无缝滚动代码，JavaScript实现多形式的滚动效果

发布时间：2018-09-09 19:18:43 所属栏目：Unix 来源：站长网

导读：一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持

　　一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持滚动，所以只要原始内容尺寸超过容器对应尺寸的1/4就能滚动，降低了之前两次循环元素时的滚动门槛。

　　第一个参数 con_id 是用于JS找到元素的，是滚动元素的id。

　　第二个参数 speed_num 是用来设置滚动速度的，数值越大，滚动速度越慢;单位默认是毫秒，不用写，只要写个正整数即可。

　　第三个参数 direct 是用来控制滚动方向的，top/bottom/left/right,如果不是这四个值，则水平滚动默认向左，竖直滚动默认向上。注意几点：

　　1、水平滚动的容器id给出的容器能且仅能有一个直接子节点!

　　2、使用方式是在页面头部引入此文件，在需要滚动的容器的闭合标签后调用对应的滚动方法scrollSP(con_id,speed,direct)、scrollSZ(con_id,speed,direct)。

　　示例代码（烈火网友情提示：为了方便演示，这里使用了数字代替文字和图片，如有需要请自行替换）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚动代码</title> <style> *{ margin:0; padding:0;} ul,li{ list-style:none;} .top_1{ height:100px; width:200px; border:1px solid #333333; margin:0 auto;} .top_1 p{ height:30px; line-height:30px; margin-top:10px;} .left_1{ width:500px; height:100px; margin:0 auto;} .left_1 ul{} .left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;} .left_1 p{ width:50px; he 100px; line-height:100px;} .left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;} </style> <script language="javascript"> function scrollSZ(con_id,speed,direct){ var con,items,heightHalf,heightAll; var timer; speed = parseInt(speed);//获取设置的速度参数 con = document.getElementById(con_id); con.style.overflow = "hidden"; if(direct == "top"){ direct = "top"; }else if(direct == "bottom"){ direct = "bottom"; }else{ direct = "top"; } con.innerHTML +=con.innerHTML; con.innerHTML +=con.innerHTML; items = getChildNodes(con); if(items.length < 1){ return; } heightAll = 0; for(var i=0;i<items.length;i++){ var numTop,numBottom; if (!!window.ActiveXObject){ numTop = items[i].currentStyle["marginTop"]; numBottom = items[i].currentStyle["marginBottom"]; }else{ numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"]; numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"]; } numTop = parseInt(numTop); numBottom = parseInt(numBottom); numTop += numBottom; if(numTop >0){ heightAll += numTop; } heightAll += items[i].offsetHeight; } heightHalf = heightAll/2; if(direct == "bottom"){ con.scrollTop = heightHalf; timer = setInterval(_scrollBottom,speed); }else if(direct == "top"){ timer = setInterval(_scrollTop,speed); } con.onmouseover = function(){ if(timer){ clearInterval(timer); timer = null; } }; con.onmouseout = function(){ if(!timer){ if(direct == "top"){ timer = setInterval(_scrollTop,speed); }else if(direct == "bottom"){ timer = setInterval(_scrollBottom,speed); } } }; function _scrollTop(){ if(con.scrollTop < heightHalf){ con.scrollTop += 2; }else{ con.scrollTop = 0; } } function _scrollBottom(){ if(con.scrollTop > 0){ con.scrollTop -= 2; }else{ con.scrollTop = heightHalf; } } } function scrollSP(con_id,speed,direct){ var con,innerCon,timer,items,widthAll,widthHalf; speed = parseInt(speed); con = document.getElementById(con_id); con.style.overflow = "hidden"; items = getChildNodes(con); if(items.length == 1){ innerCon = items[0]; }else{ return; } innerCon.innerHTML += innerCon.innerHTML; innerCon.innerHTML += innerCon.innerHTML; items = getChildNodes(innerCon); if(items.length<1){ return; } widthAll = 0; for(var i=0;i<items.length;i++){ } for(var i=0;i<items.length;i++){ var numLeft,numRight; if (!!window.ActiveXObject){ items[i].style.styleFloat = "left"; numLeft = items[i].currentStyle["marginLeft"]; numRight = items[i].currentStyle["marginRight"]; }else{ items[i].style.cssFloat = "left"; numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"]; numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"]; } numLeft = parseInt(numLeft); numRight = parseInt(numRight); numLeft += numRight; if(numLeft>0){ widthAll += numLeft; } widthAll += items[i].offsetWidth; } widthHalf = widthAll/2; innerCon.style.width = widthAll+"px"; if(direct == "left"){ direct = "left"; }else if(direct == "right"){ direct = "right"; }else{ direct = "left" } if(direct == "left"){ timer = setInterval(_scrollLeft,speed); }else if(direct == "right"){ con.scrollLeft = widthHalf; timer = setInterval(_scrollRight,speed); } con.onmouseover = function(){ if(timer){ clearInterval(timer); timer = null; } } con.onmouseout = function(){ if(direct == "left"){ timer = setInterval(_scrollLeft,speed); }else{ timer = setInterval(_scrollRight,speed); } } function _scrollLeft(){ if(con.scrollLeft<widthHalf){ con.scrollLeft += 2; }else{ con.scrollLeft = 0; } } function _scrollRight(){ if(con.scrollLeft>0){ con.scrollLeft -= 2; }else{ con.scrollLeft = widthHalf; } } } function getChildNodes(obj){//获取元素子节点 var childList,list; childList = new Array(); list = obj.childNodes; for(var i=0;i<list.length;i++){ if(list[i].nodeType == 1) childList[childList.length] = list[i]; } return childList; } </script> </head> <body> <div id="top_1" class="top_1"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <div>b</div> <p>5</p> <p>6</p> <p>7</p> <div>a</div> </div> <script language="javascript">scrollSZ("top_1",10,"bottom");</script> <div id="left_1" class="left_1"> <div class="left_1_i"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <div>b</div> <div>a</div> </div> </div> <script language="javascript">scrollSP("left_1",10,"right");</script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!