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

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

<!DOCTYPE html>




 <html lang="zh-CN"> 
<head>
<title>文字滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<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">
setTimeout(function(){
//四方向无缝滚动
scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});

},500);

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);
};

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

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

JavaScript小例子：复选框全选
JavaScript小例子:复选框全选这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
JavaScript小例子
1. alert.html <html> <head> <title></title> <script type="text/javas ...
AngularJS 指令实现文本水平滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript实现无缝滚动原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
五个小例子教你搞懂 JavaScript 作用域问题
众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...
c/c++ 继承与多态文本查询的小例子（非智能指针版本）
问题:在上一篇继承与多态文本查询的小例子(智能指针版本)在Query类里使用的是智能指针,只把智能指针换成普通的指针,并不添加拷贝构造方法,会发生什么呢? 执行时,代码崩掉. 分析下面一行代码: Q ...
c/c++ 继承与多态文本查询的小例子（智能指针版本）
为了更好的理解继承和多态,做一个文本查询的小例子. 接口类:Query有2个方法. eval:查询,返回查询结果类QueryResult rep:得到要查询的文本客户端程序的使用方法: //查询包含 ...
php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

随机推荐

Excel 2013 表格自用技巧
参考 Excel表格的基本操作(精选36个技巧) Excel2013基本用法关于VLOOKUP函数目录快速复制单元格单元格内强制换行锁定标题行查找重复值万元显示单元格中显示001 按月 ...
删除元素splice、shift\pop
splice() 方法: 向/从数组中添加/删除项目,然后返回被删除的项目. splice( index位数, 数量, 新添加 ) 该方法会改变原始数组删除数组中第一个元素 arr.shift( ...
001_获取nginx证书
一. 以下命令可以获取nginx域名的证书 openssl s_client -showcerts -connect www.jyall.com:443 < /dev/null 2>&am ...
C/C++ 获取文件大小
在C语言中测试文件的大小,主要使用二个标准函数. 1.fseek 函数原型:int fseek ( FILE * stream, long int offset, int origin ); 参数说明 ...
python实现求最大公约数与最小公倍数
记录python实现最大公约数&最小公位数两种算法概念最大公约数:指两个或多个整数共有约数中最大的一个最小公倍数:两个或多个整数公有的倍数叫做它们的公倍数,其中除0以外最小的一个公倍数就 ...
Maven中央仓库地址整理
最近做项目的时候,一直发现常用的oschina maven源一直都没有反应,后面发现原来oschina竟然关闭了maven源服务,后面经同事推荐了阿里云的maven源,这速度杠杠的 Maven 中央仓 ...
django配置发送邮箱
该邮箱配置后台发送邮箱验证使用 settings内配置 # 服务器地址 EMAIL_HOST = 'smtp.163.com' # 端口,邮箱默认动态端口 25 EMAIL_PORT = 25 # 邮 ...
java基础题刷题中的知识点复习
将变量转换为字符串方法:(String)待转对象..toString().String.valueOf(待转对象) 对字符串进行操作的方法,使用StringBuffer和StringBuilder定义 ...
SQL Server管理员必备技能之性能优化
SQL Server管理员必备技能之性能优化高文龙关注1人评论1171人阅读2017-09-22 08:27:41 SQL Server 作为企业必不可少的服务之一,所以对于管理员的日常运维是一个极 ...
Confluence 6 数据收集隐私策略
为什么 Confluence 收集使用数据? 针对 Confluence 我们很自豪 Confluence 是这个星球上最高效和强大的协作工具,我们也计划继续保持这个特性,尽我们最大的努力提供更新的 ...

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

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

随机推荐

热门专题