jQuery 文字向上轮播
Posted 笑笑~上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 文字向上轮播相关的知识，希望对你有一定的参考价值。
左图为下面代码的实例。右图为运用到项目中的方法 
直接看图，看效果，有兴趣再继续了解！！！！！！
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>
以上是关于jQuery 文字向上轮播的主要内容，如果未能解决你的问题，请参考以下文章