本篇文章给大家分享的内容是浅析手机滑动插件--iscroll.js,有着一定的参考价值,有需要的朋友可以参考一下
话不多说,直接上代码:
//实例化滚动插件 var myScroll = new IScroll('#wrapper', {scrollX: true, freeScroll: true});//实例化 myScroll.scrollToElement('.active',true,true);//特定元素居中
不知道大神是怎么做的 ,我是这样计算宽度的–
//计算需要滚动盒子的宽度 var wrapper = $("#wrapper"); wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());
完整实例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5 横向滚动</title> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script> <style> p{ width:80%; margin: 50px auto; border: 1px solid seagreen; overflow: hidden; } ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; } li{ padding: 15px 0; float: left; list-style: none; width: 100px;margin: 10px; text-align: center; background: rosybrown } li.active{ background: red; } </style></head><body><p class="wrapper"><ul> <li>第1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> <li>第5个</li> <li class="active">第6个</li> <li>第7个</li></ul></p><script> var ele = $("ul"); ele.width((ele.find("li").length + 1) * (ele.find("li").width()+20)); var myScroll = new IScroll('p', {scrollX: true, scrollY: false}); myScroll.scrollToElement('.active',true,true);</script></body></html>
相关推荐:
以上就是浅析手机滑动插件—iscroll.js的详细内容,更多请关注php中文网其它相关文章!
已抢26914个
抢已抢14299个
抢已抢7179个
抢已抢8639个
抢已抢17632个
抢已抢7104个
抢