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

随机推荐

求逆序对 ----归并排 & 树状数组
网上看了一些归并排求逆序对的文章,又看了一些树状数组的,觉得自己也写一篇试试看吧,然后本文大体也就讲个思路(没有例题),但是还是会有个程序框架的好了下面是正文归并排求逆序对树状数组求逆序对一. ...
JS,Jquery获取各种屏幕的宽度和高度（转载）
原文:https://www.cnblogs.com/fuyuanming/articles/5453756.html 1.JS 网页可见区域宽: document.body.clientWidth ...
Linux命令之查看文件夹、文件数量及其所占磁盘空间
一.查看数量 # 查看当前目录下的文件数量(不包含子目录中的文件) ls -l|grep "^-"| wc -l # 查看当前目录下的文件数量(包含子目录中的文件) 注意:R,代表 ...
[HTTP] 基本认证的工作流程
HTTP的基本认证涉及两个字段,一个是请求字段 Authorization: Authorization: Basic xxx 一个是响应字段 WWW-Authenticate WWW-Authent ...
1)requests模块
一:requests 介绍 requests 是使用 Apache2 Licensed 许可证的基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装, 从而使得Pyt ...
12c rac On redhat 7
1 准备工作 1.1 关于GRID的一些变化 1.1.1 简化的基于映像的Oracle Grid Infrastructure安装从Oracle Grid Infrastructure 12 ...
vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效？
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...
安装python的pip模块
安装python的pip模块网址https://pypi.python.org/pypi/pip 选择,点击下载将文件解压到C:\Users\Administrator\AppData\Local ...
一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
index_select ，clamp，detach
1.torch.clamp(input,min,max,out=None)-> Tensor 将input中的元素限制在[min,max]范围内并返回一个Tensor 2.index_selec ...

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

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

随机推荐

热门专题