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 ...

随机推荐

Android开发该学习哪些东西？
开篇: 本人也是众多Android开发道路上行走的一员,听了不少大神的知乎live,自己也看了不少书,也和不少前辈交流过,所以在这里分享一下Android开发应该学习的书籍以及知识,当然,也包括一些方 ...
linux批量替换文件内容3种方法(perl,sed,shell)
方法1:perl 这两天在构建一个应用的使用用到了maven,由于project很大,足足有700多个 pom.xml文件,更郁闷的是在很多pom.xml文件里都单独指定了资源库的url,我需要把 ...
【转】JVM内存结构 VS Java内存模型 VS Java对象模型
JVM内存结构我们都知道,Java代码是要运行在虚拟机上的,而虚拟机在执行Java程序的过程中会把所管理的内存划分为若干个不同的数据区域,这些区域都有各自的用途. 其中有些区域随着虚拟机进程的启动而 ...
Alpha 事后诸葛亮
前言事后诸葛亮?作业名真的不好听,下一届还要沿用吗? 队名:小白吃通向hjj博客的任意门思考总结设想和目标我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? ...
css效果文字多了就...
开发中经常会遇见这样的问题,一段文字或者一段标题过长了,就让超出长度的部分益...替换.具体怎么做的呢?直接上代码: <style> *{ margin: 0; padding: 0; } ...
最新sublime text 3 注册码license分享（亲测有效）
—– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...
Poco::Crypto--加解密_RSA
Poco::Crypto--加解密(RSA) 1.简单的加解密 Cipher::Ptr pCipher = CipherFactory::defaultFactory().createCipher(R ...
CentOS 7 服务器之间ssh无密码登录、传输文件
在Linux服务器之间使用ssh命令向另一个Linux服务器发送执行指令是需要输入密码 ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一 ...
Hibernatede 一对多映射配置
Hibernatede 一对多映射配置以公司和员工为例:公司是一,员工是多第一步创建两个实体类,公司和员工写核心配置文件hibernate.cfg.xml 写映 ...
Windows添加.NET Framework 3.0 NetFx3 失败 - 状态为：0x800f0950
原文链接:https://answers.microsoft.com/zh-hans/insider/forum/all/win10-dism%E9%94%99%E8%AF%AF-0x800f0950 ...

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

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

随机推荐

热门专题