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

随机推荐

蓝皮书：异象石【dfs序+lca】
题目详见蓝皮书[算法竞赛:进阶指南]. 题目大意: 就是给你一颗树,然后我们要在上面进行三种操作: 1.标记某个点或者 2.撤销某个点的标记以及 3.询问标记点在树上连通所需的最短总边 ...
CF 545C
题意: 砍树, 树会向左或者向右倒,数不能倒重叠, 问最多可以砍多少树思路: 贪心 + Dp吧, 树要尽可能网左倒,这样对后面的树影响较小, 才是最优状态 #include<iostream& ...
POJ 1305
毕达哥斯三元组的模板题练习练习 #include<iostream> #include<cstring> #include<cstdio> #include< ...
spring aop -包的问题
Caused by: java.lang.NoSuchMethodError: org.springframework.aop.framework.AopProxyUtils.getSingleton ...
ElasticSearch搜索数据到底有几种方式?
Elasticsearch允许三种方式执行搜索请求: GET请求正文: curl -XGET "http://localhost:9200/app/users/_search" - ...
thinkphp (tcms)
使用的是:3.2.3模板: js获取thinkphp数组时:var obj = {:json_encode($obj)}: 转成js对象:进而再处理: 创建公共控制器: thinkphp:ajax返回 ...
restful中的分页
普通分页普通分页类似于Django中的分页源码 class PageNumberPagination(BasePagination): """ A simple pa ...
Windows Server 2016 + SCO 2016 安装及配置介绍
Windows Server 2016 + SCO 2016 安装及配置介绍高文龙关注1人评论6332人阅读2017-02-26 23:23:02 Windows Server 2016 + SCO ...
Confluence 6 注册单一小工具
如果你不能订阅一个应用的小工具,你需要将小工具一个一个的添加进来.针对网站不支持小工具订阅和你的应用和你的 Confluence 不能建立信任连接的情况,你就只能这样添加了. 首先你需要获得小工具的 ...
Confluence 6 在你用户宏中使用参数
你可以为你的用户宏指定参数.这样的话,用户可以使用参数来决定 Confluence 页面的显示情况. 如何在 Confluence 页面中使用你的宏参数当添加一个宏到 Confluence 页面中的 ...

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

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

随机推荐

热门专题