jQuery滚动插件Sly.js 滑动最后几个元素不在一行 滑动显示不完整

下载最新版的sly:http://darsa.in/sly/

移动端需要做适配,一行要求恰好显示10个li,总计是12个,因为是适配的问题,所以li的宽度就不能写死

最初的解决方案是是每个长度是总宽度是10%

css的写法

width:10%

发现差了几个像素导致后面的li直接被挤到下行去了,直接的后果就是看不到最后面的元素

后来用js直接算写成px

 var width = (($("#list").width() - 10)/10);
        document.write("<style>" +
                        "li{width:"+width+"px}"+
                "</style>")

因为每个li有个右边框所以总宽度得去除10个像素

结果发现问题还是没解决

后来在css里面直接写

width:40px;

这样就没问题

慢慢的发现了一个规律,就是只要宽度是带小数点的就不行,整数就没问题

后来查找源码,原来

li的parent就是ul的宽度是round四舍五入出来的,而且插件里面用了大量的四舍五入,对于整数不存在误差,而小数随着累计误差就越来越大


对于sly1.6.1 链接:https://raw.githubusercontent.com/darsain/sly/master/dist/sly.js

来说,在line39


只需要把系统默认的round方法去掉就ok,把

var round = nMath.round

改成

var round = function (round) {
		return round;
	};


经测试问题搞定!这是插件的一个坑!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值