码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-06-15 18:14:23      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

 

一些問題:

本地測試沒問題,但是 通過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

 

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

标签:

原文地址:http://www.cnblogs.com/bigboyLin/p/4577803.html

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