码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 文字向上轮播

时间:2017-09-14 18:48:21      阅读:302      评论:0      收藏:0      [点我收藏+]

标签: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>

 

jQuery 文字向上轮播

标签:cti   自己   gif   rem   高度   end   点击   es2017   efault   

原文地址:http://www.cnblogs.com/xiaoxiaossrs/p/7521556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!