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

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

<!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;}
.home-page{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="http://files.cnblogs.com/files/bigboyLin//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(){
if(console.log){console.log($(this).height());}
$(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>

一些問題：

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

demo:

Download

时间： 2024-12-21 20:12:34

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

javascript 小例子(待补充)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function figure1(){ var figure = money.value; var wushi = Math.floor(figure/50); var ershi = Math

JS实用的带停顿的逐行文本循环滚动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实用的带停顿的逐行文本循环滚动效果丨k

20150620文本自动滚动效果

html====== <div class="demo1"> <h3>文本框中的文字自动滚动</h3> <div id="roll" data-rwidth="100" data-rheight="100" class="roll"> <ul id="ul" class="list" style="&qu

AngularJS 指令 实现文本水平滚动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html;

Javascript图片无缝滚动

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: 先睹为快:demo <!DOCTYPE html>

小例子：通用模块——文本框默认提示信息

小例子:通用模块——文本框默认提示信息 因为H5的属性 不兼容所有浏览器 <input type="search" name="" placeholder="提示信息" /> 所以有下面写法: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <met

JavaScript基础中的基础（小例子：滚动字幕）

一.变量 局部变量声明前面要加"var" <script type="text/javascript"> // 全局变量 name = 'alex'; function func(){ // 局部变量 var age = 18; // 修改全局变量name name = "eric" } </script> 二.数据类型 数据类型有:数字.字符串.布尔值      数组.字典 数字.字符串.布尔值.null.undefin

五个小例子教你搞懂 JavaScript 作用域问题

众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题. 感谢 例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要 死磕自己,奉献大家!) 先给出五个例子: 每个例子旁边都会给出答案的链接,如果你全部都正确了,你可以忽略这篇短文,并深深的鄙视下笔者. 例一:

javascript 复合数据的定义和使用 ( 小例子 )

思路:主要是先要获取到三个 box 元素的 top 值 和 left 值,然后有复合数据进行存值,再进行数组值的位置移动来实现切换 box 位置效果: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> #warp{margin:50p