标签：cti 自己 gif rem 高度 end 点击 es2017 efault
左图为下面代码的实例。右图为运用到项目中的方法 
直接看图，看效果，有兴趣再继续了解！！！！！！
Jquery写的一个简单文字向上轮播插件。因为在项目中有运用到就自己写了一个。
顺便可以学习下简单的jQuery插件写法。。
点击，停止轮播！！！！！
文件名：l-slide.js //写了一个简单的插件，名字命名为 l-slide.js ;(function ($) { $.fn.lSlide = function (options) { initLSlide(this, options); }; function initLSlide(item,options) { var defaults = { nTop:-0.71 }; var opts = $.extend({},defaults,options); var _self = $(item); var timeId = -1; timeId = setInterval(function () { // 动画往上移动距离，单位为px _self.animate({top:opts.nTop + "px"},function () { // 查到第一个子元素 var item = _self.children(‘li‘)[0]; // 获取第一个元素 var fChild = $(item).prop(‘outerHTML‘); // 将第一个节点拼接到最后 _self.append(fChild); // 将第一个节点删除 $(item).remove(); }); _self.animate({top:0+ "px"},0); },1000) // 点击今日中奖名单停止轮播 _self.on(‘touchstart‘,function () { clearInterval(timeId); }) } })(jQuery)
html代码：
必须引用JQuery <style> div{ width: 200px; height: 200px; margin: 100px auto; overflow: auto; } li{ height: 20px; } </style> <body> <div> <ul id="ulContent"> <li>我是第1行文字</li> <li>我是第2行文字</li> <li>我是第3行文字</li> <li>我是第4行文字</li> <li>我是第5行文字</li> <li>我是第6行文字</li> <li>我是第7行文字</li> <li>我是第8行文字</li> <li>我是第9行文字</li> <li>我是第10行文字</li> <li>我是第11行文字</li> <li>我是第12行文字</li> <li>我是第13行文字</li> <li>我是第14行文字</li> <li>我是第15行文字</li> <li>我是第16行文字</li> <li>我是第17行文字</li> <li>我是第18行文字</li> <li>我是第19行文字</li> <li>我是第20行文字</li> </ul> </div> <script src="jquery.min.js"></script> //引入上面写的插件 <script src="l-slide.js"></script> <script> $(function(){ <!--获取li每行的高度，动画移动的高度--> var liHeight = $(‘li‘).height(); <!--调用插件--> $(‘#ulContent‘).lSlide({nTop:liHeight}); }) </script> </body>
标签：cti 自己 gif rem 高度 end 点击 es2017 efault
原文地址：http://www.cnblogs.com/xiaoxiaossrs/p/7521556.html
