整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

“图片滑动样式”修改HTML教程

友们,下午好!

都说一张美美的图能为文章增色三分!

那如果是一个交互的图片样式 + 几张美美图呢?这能为文章增色多少呢?

比如这种(样式ID:90298)

使用这种样式,即能有效的展示图片,还能缩小文章空间,而且还与读者存在互动交互,想不想知道这种样式怎么做出来呢?

上面两种样式都可以在样式中心输入ID搜索到。

但是,样式中心的原样式,都是四张图片滑动的,直接进行换图就可以使用了。

但如果要像三儿上面做的两个样式,一个是5张图,一个是9张图,就要进HTML进行修改了。

教程一(带图片说明的样式)

进入到“HTML”模式,找到<section .........> </section>这段代码,先选择Ctrl+C复制。

然后在此段代码结尾处敲回车键换行,再选择Ctrl+V粘贴。

粘贴几次,样式就会在原有四张的基础上多出几张,胖友们可以根据自己的需求进行多次粘贴。

教程二

进入到“HTML”模式,找到<img src=........./>这段代码,先选择Ctrl+C复制,然后在此段代码结尾处,再Ctrl+V粘贴。

同上个样式,粘贴几次,样式就会在原有四张的基础上多出几张,胖友们可以根据自己的需求进行多次粘贴。

为了样式的美感,还是有三点建议给大家。

1、图片请保持尺寸一致。否则会导致图片层次不齐。

2、尺寸请500x500以上。否则可能会使图片不清楚。

3、图片大小尽可能小点。否则浏览时加载会不流畅。

更多好玩样式,请进样式中心搜索“滚动

好了,本次教程就到这里~bye


要在网页上用几个滑块

出于某些原因,需要在网页上用几个滑块。

其实,这是很简单的一件事情,只需敲一行html代码就可以了:

<input type="range" name="points" min="1" max="10">

耗时不超过一分钟,非常容易的一件事情。

不过这样不仅不美观,而且让人感觉很低端:


html的滑块

怎么办呢?其实也很简单,因为已经有人做好了,而且不仅做了滑块,交互页面上可能需要用到的东西都做好了,我们拿过来用即可。这一套东西就叫前端 UI 框架。

有一个框架叫layui,简单易用,花点时间阅读一下说明文档就可以了。做出来的滑块比默认的好看了。

layui的滑块

但是很不幸的,做出来的滑块在PC端正常,但在手机端不能滑动,这是什么原因呢?

于是我开始排查起来:

会不会是手机浏览器兼容性问题呢?

会不会是我引用layui时出了什么问题呢?

会不会是我写的代码有问题呢?

会不会是浏览器缓存的问题呢?

按部就班地查了一遍,都没有问题。那么,问题十有八九在layui自身上了。很快,我的猜疑得到了印证:

github上的issue

糟糕透了!虽然我找到了问题所在,但几个小时时间也过去了。

layui不行了,那就换一个吧。有一个很热门的叫Element,据说是饿了吗团队开发的,我就选它了。

于是开始登录它的官网,在手机上测试了一下,确定能用之后就开始阅读文档,动手试着做了几个小例子,还挺好用。



正当我准备开始用Element在我的页面上添加滑块的时候,眼角的余光瞥见了浏览器上推送过来的几个字“Element停止维护”。

“有这事?”一边想着,一边搜了一下,还真是,停止维护了。

停止维护!虽然这对于我用Element做个滑块没有任何影响,滑块也依然能用,但我自身的执拗阻止了我继续使用Element。代价,就是差不多一个小时时间又废掉了。

接下来怎么办呢?要么再找一个框架,要么直接找一个单独的滑块组件来用。

找了几个单独的滑块组件,有的只支持低版本的jquery,有的有一些bug,都不尽如人意。

再找个框架嘛,又有诸多顾虑。比如这框架会不会又停止维护?

犹豫中,询问了一个做前端的小伙伴,扯了一会,快一个小时时间又过去了。

后来,我也懒得瞻前顾后了,直接用jquery-ui吧。

这是最后的样子,不好看,但也顾不了这么多了。

原本小小的一个问题,被我搞得这么复杂,这里边暴露了一些问题,其中就包括我的执拗。

如果有产品经理问我,加几个滑块需要多长时间?

我回答:“二十分钟吧!”

然后,我发现我掉入了一个深坑里。

再然后呢?

加班吧,兄弟!