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

随机推荐

基于OpenSSL自建CA和颁发SSL证书
关于SSL/TLS介绍见文章 SSL/TLS原理详解.关于证书授权中心CA以及数字证书等概念,请移步 OpenSSL 与 SSL 数字证书概念贴 . openssl是一个开源程序的套件.这个套件有三个 ...
css效果文字多了就...
开发中经常会遇见这样的问题,一段文字或者一段标题过长了,就让超出长度的部分益...替换.具体怎么做的呢?直接上代码: <style> *{ margin: 0; padding: 0; } ...
python操作三大主流数据库(1)python操作mysql①windows环境中安装python操作mysql数据库的MySQLdb模块mysql-client
windows安装python操作mysql数据库的MySQLdb模块mysql-client 正常情况下应该是cmd下直接运行 pip install mysql-client 命令即可,试了很多台 ...
添加struts2本地dtd限制
将源码保重的struts-2.1.7.dtd文件拷贝到dtds文件夹中打开eclipse配置文件window/preferences,搜索xml找到XML Catalog
MD5加密算法工具类
import java.math.BigInteger; import java.security.MessageDigest; import java.security.NoSuchAlgorith ...
Windows Server 2008 R2 报错事件ID:10之WMI报错
问题描述: Details -Event filter with query "SELECT * FROM __InstanceModificationEvent WITHIN 60 WHE ...
poll & select
//todo /* * copied from http://devarea.com/linux-io-multiplexing-select-vs-poll-vs-epoll/#.W1GZ0vkzZ ...
ActiveMQ在Windows下的安装与启动（懒人专属）
其实这些ActiveMQ官网都有,但是如果你懒得看官网,那就直接看这吧! 1. 官网下载最新的ActiveMQ安装包 apache-activemq-x.x.x-bin.zip并解压 2.进入安装 ...
[C]关于extern与struct
问题我曾经很困惑,就是在两个编译单元当中,如何把一个单元中声明的struct结构引入到另外一个单元中来,折腾了很久,后来发现这位大神的留言不是这么用的…… 类型的定义和类型变量的定义不同,类型定义 ...
j2cache笔记
初步理解 eg: https://my.oschina.net/javayou https://my.oschina.net/tinyframework/blog/538363?p=2 https:/ ...

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

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

随机推荐

热门专题