javascript小例子：實現四方向文本无缝滚动效果

实现一个文本无缝滚动的效果：

 

 

 

一些問題：

本地測試沒問題，但是 通過document.write()把代碼輸入執行后，垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..

源代碼：

<!DOCTYPE html>   
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<title>文字滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
 .textbox{border:1px solid #ddd;width:auto;overflow: hidden;}
 .textbox ul{list-style: none;position: relative;}
 .textbox ul li{padding:5px 0;}
</style>
</head>
<body class="home-page">

    <div id="textbox" class="textbox">
        <ul>
            <li>汽车 | 运动B级车降3万5 </li>
            <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
            <li>教育 | 各省前三报考华工重奖10万元/人</li>
            <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
            <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
            <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
            <li>汽车 | 平行进口车加价11万</li>
            <li>汽车 | 运动B级车降3万5</li>
            <li>汽车 |  平行进口车加价11万</li>
            <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
        </ul>
        <a href="#"  class="btnPrev">向左</a>
        <a href="#"  class="btnNext">向右</a>
    </div>
    <br>
    <br>
    <div id="textbox2" class="textbox">
        <ul>
            <li>汽车 | 运动B级车降3万5 </li>
            <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
            <li>教育 | 各省前三报考华工重奖10万元/人</li>
            <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
            <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
            <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
            <li>汽车 | 平行进口车加价11万</li>
            <li>汽车 | 运动B级车降3万5</li>
            <li>汽车 |  平行进口车加价11万</li>
            <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
        </ul>
        <a href="#"  class="btnPrev">向上</a>
        <a href="#"  class="btnNext">向下</a>
    </div>
    <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        //四方向无缝滚动
        scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
        scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});

        function scroll(container,options){
            var box = $(container);
            var boxUl = box.find('ul').eq(0);
            var LiHeight = 0; //不包含克隆li列表高度
            var cloneLiHeight = 0; //包含克隆li列表高度
            var LiWidth = 0; //不包含克隆li列表宽度
            var cloneLiWidth = 0; //包含克隆li列表宽度
            var Lis = boxUl.children();
            var btnPrev = box.find('.btnPrev');
            var btnNext = box.find('.btnNext');

            //默认参数
            var defult= {
                vis : 2, //显示个数
                autoPlay:true, //自动播放
                speed :50, //滚动速度
                dir:'prev', //滚动方向
                btnHidden:false, //按钮是否隐藏
                type:'v' // 水平或者垂直方向

            };
            var opt = $.extend({},defult,options);


            //构建DOM结构
            var lastClone=0; //最后克隆元素
            var lastCloneHeight=0;//最后克隆元素高度
            var allCloneHeight=0;//全部克隆元素总高度
            var lastCloneWidth=0;
            var allCloneWidth=0;
            var visHeight=0; //可视高度
            var visWidth=0;
            var boxUl_wrap;

            if(opt.type === "v"){ //垂直方向
                Lis.each(function(){
                    $(this).height($(this).height());
                    LiHeight += $(this).outerHeight(true);
                });
                lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
                lastCloneHeight = lastClone.outerHeight(true);
                allCloneHeight = lastClone.outerHeight(true);

                for(var i = 0; i < opt.vis ; i++){
                    Lis.eq(i).clone().addClass('clone').appendTo(boxUl);
                    allCloneHeight += Lis.eq(i).outerHeight(true);
                }

                visHeight = allCloneHeight - lastCloneHeight;
                cloneLiHeight = LiHeight + allCloneHeight;
                
                boxUl_wrap = $('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
                boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);

            }else if(opt.type ==="h"){ //水平方向
                Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});
                Lis.each(function(){
                    $(this).width($(this).width());
                    LiWidth += $(this).outerWidth(true);
                });

                lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
                lastCloneWidth= lastClone.outerWidth(true);
                allCloneWidth = lastClone.outerWidth(true);

                for(var j = 0; j < opt.vis ; j++){
                    Lis.eq(j).clone().addClass('clone').appendTo(boxUl);
                    allCloneWidth += Lis.eq(j).outerWidth(true);
                }
                visHeight = Lis.eq(0).outerHeight(true);
                visWidth = allCloneWidth - lastCloneWidth;
                cloneLiWidth = LiWidth + allCloneWidth;
                
                boxUl_wrap = $('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
                boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);
                box.css({'width':visWidth});
            }


            //添加事件处理
            var timer = null;
            var scrollTop = function(){
                clearInterval(timer);
                    timer = setInterval(function(){
                        var tmp = parseInt(boxUl.css('top').replace('px',""));
                        tmp--;
                        boxUl.animate({'top':tmp},0,function(){
                            if(tmp <= -(LiHeight + lastCloneHeight)){
                                boxUl.css('top',-lastCloneHeight);
                            }
                        });
                    },opt.speed);
            };

            var scrollDown = function(){
                clearInterval(timer);
                    timer = setInterval(function(){
                        var tmp = parseInt(boxUl.css('top').replace('px',""));
                        tmp++;
                        boxUl.animate({'top':tmp},0,function(){
                            if(tmp >= 0){
                                boxUl.css('top',-(LiHeight));
                            }
                        });
                    },opt.speed);
            };

            var scrollLeft = function(){
                clearInterval(timer);
                    timer = setInterval(function(){
                        var tmp = parseInt(boxUl.css('left').replace('px',""));
                        tmp--;
                        boxUl.animate({'left':tmp},0,function(){
                            if(tmp <= -(LiWidth + lastCloneWidth)){
                                boxUl.css('left',-(lastCloneWidth));
                            }
                        });
                    },opt.speed);
            };
            
            var scrollRight = function(){
                clearInterval(timer);
                    timer = setInterval(function(){
                        var tmp = parseInt(boxUl.css('left').replace('px',""));
                        tmp++;
                        boxUl.animate({'left':tmp},0,function(){
                            if(tmp >= 0){
                                boxUl.css('left',-(LiWidth));
                            }
                        });
                    },opt.speed);
            };

            var scrollType = function(type,dir){
                if(Lis.length >= opt.vis){ //显示个数不能多于列表个数，否则不显示效果
                    var sdir = typeof dir!=="undefined" ? dir : opt.dir;
                    switch(type){
                        case "v":
                            if(sdir == "prev"){scrollTop();}else{scrollDown();}
                            break;
                        case "h":
                            if(sdir == "prev"){scrollLeft();}else{scrollRight();}
                    }
                }
            };


            if(opt.autoPlay){
                scrollType(opt.type);
            }

            //添加事件处理
            box.find('#ulWrap').hover(function(){
                clearInterval(timer);
            },function(){
                scrollType(opt.type);
            });

            //按钮是否隐藏
            if(!opt.btnHidden){

                btnPrev.unbind('mouseover');
                btnNext.unbind('mouseover');

                btnPrev.mouseover(function(){
                    scrollType(opt.type,"prev");
                });
                btnNext.mouseover(function(){
                    scrollType(opt.type,"next");
                });
            }else{
                btnPrev.hide();
                btnNext.hide();
            }

        }
    </script>
</body>
</html>
View Code

 demo:

Download

 

posted @ 2015-06-15 16:43  Aarongo  阅读(689)  评论(0)  编辑  收藏  举报