js实现文字（图片）垂直无缝连接滚动
浏览数：36 /
时间：2015年06月09日
前一段时间为公司开发一个web项目时遇到一个字幕滚动问题：页面上垂直滚动显示若干合作单位名录，作为一个典型.net码农，遇到前端问题首先想到的就是网上找一个现成的插件或者demo来改改了事，网上资源也很多，可是单就自己找到的资源来说，都单循环的滚动，其思路无非就是包含资源的div在页面上定时的从下到上。。。再从下到上。。。如此反复。问题就来了，比如我一个名单，循环完成到重新下一次循环会有一个明显的跳跃，而我想要的是像无限循环那样无缝循环，消除万恶的跳跃感。
受小伙伴们demo的启发，决定自己重写实现无缝循环：其思路是数据绑定到div后，执行一个复制，数据滚动显示时其实是两个相同的div在移动，并且第一个显示完成后复位到第二个后面，继续移动，原来的第二个又变成了第一个，如此循环，体验上还真是给人无缝循环的赶脚，上个demo供小伙伴们参详，欢迎批评指正
html部分（因为用的asp.net reapter 生成的多余table,div可以直接无视）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../Include/scripts/jquery-1.8.2.js"></script> 7 <script src="../Include/scripts/verticScroll.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 //合作单位滚动 11 ScrollText_vertic($(‘#scrollLocalP‘), 400, 75, $("#scrollLocalSub"), ‘top‘, 1, 50, ‘localPTemp‘);//垂直循环滚动 12 }); 13 14 </script> 15 </head> 16 <body> 17 <div style="float: left; width: 400px; height: 100px;"> 18 <div style="font-size: 16px; font-weight: 700;">以下为滚动：</div> 19 <div id="scrollLocalP" style="height: 75px; overflow: hidden; position: relative;"> 20 <div id="scrollLocalSub"> 21 <div id="localDiv" style="color:#666;"> 22 <table> 23 <tr> 24 <td> 25 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 26 <div> 27 <span id="rptLocal_lblName_0" class="bigtxt">安徽省</span> 28 </div> 29 </div> 30 </td> 31 32 <td> 33 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 34 <div> 35 <span id="rptLocal_lblName_1" class="bigtxt">上海市</span> 36 </div> 37 </div> 38 </td> 39 </tr> 40 <tr> 41 <td> 42 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 43 <div> 44 <span id="rptLocal_lblName_2" class="bigtxt">北京市</span> 45 </div> 46 </div> 47 </td> 48 49 <td> 50 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 51 <div> 52 <span id="rptLocal_lblName_3" class="bigtxt">江苏省</span> 53 </div> 54 </div> 55 </td> 56 </tr> 57 <tr> 58 <td> 59 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 60 <div> 61 <span id="rptLocal_lblName_4" class="bigtxt">重庆市</span> 62 </div> 63 </div> 64 </td> 65 66 <td> 67 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 68 <div> 69 <span id="rptLocal_lblName_5" class="bigtxt">四川省</span> 70 </div> 71 </div> 72 </td> 73 </tr> 74 <tr> 75 <td> 76 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 77 <div> 78 <span id="rptLocal_lblName_6" class="bigtxt">福建省</span> 79 </div> 80 </div> 81 </td> 82 83 <td> 84 <div style="height: 26px; width: 180px; text-align: center; line-height: 26px;"> 85 <div> 86 <span id="rptLocal_lblName_7" class="bigtxt">黄浦江～～</span> 87 </div> 88 </div> 89 </td> 90 </tr> 91 </table> 92 </div> 93 </div> 94 </div> 95 </div> 96 </body> 97 </html>
js部分（verticScroll）
1 //循环调用的方法 2 function ScrollAutoPlay_vertic(contID1, contID2, scrolldir, ShowHeight, textheight, steper) { 3 var panel_1 = $(‘#‘ + contID1); 4 var panel_2 = $(‘#‘ + contID2); 5 6 currPos_1 = parseInt(panel_1.css(‘top‘)); //第一个容器距离顶部的高度 7 currPos_2 = parseInt(panel_2.css(‘top‘)); //第二个容器距离顶部的高度 8 //根据第二个容器的位置重置第一个容器的位置，当第二个容器完全显示后重置 9 if (parseInt(currPos_2) == (ShowHeight - textheight)) { 10 panel_1.css(‘top‘, ShowHeight); 11 } 12 else { 13 panel_1.css(‘top‘, currPos_1 - steper); 14 } 15 16 if (parseInt(currPos_1) == (ShowHeight - textheight)) { 17 panel_2.css(‘top‘, ShowHeight); 18 } 19 else { 20 panel_2.css(‘top‘, currPos_2 - steper); 21 } 22 23 } 24 //--------------------------------------------左右滚动效果---------------------------------------------- 25 /* 26 AppendToObj： 显示位置（目标对象） 27 ShowWidth： 显示宽度 28 ShowHeight： 显示高度 29 ShowText： 显示信息 30 ScrollDirection： 滚动方向（值：top、right） 31 Steper： 每次移动的间距（单位：px；数值越小，滚动越流畅，建议设置为1px） 32 Interval: 每次执行运动的时间间隔（单位：毫秒；数值越小，运动越快） 33 templeName: 生成的容器主id 34 */ 35 function ScrollText_vertic(AppendToObj, ShowWidth, ShowHeight, ShowText, ScrollDirection, Steper, Interval,templeName) { 36 var textHeight, PosInit, PosSteper; 37 var ScrollTime_virtic; 38 if (ShowText.height() < ShowHeight) { //判断是否需要滚动，如果内容高度小于容器高度就不滚动 39 return; 40 } 41 42 with (AppendToObj) { 43 html(‘‘); 44 css(‘overflow‘, ‘hidden‘); 45 css(‘width‘, ShowWidth + ‘px‘); 46 css(‘line-height‘, ShowHeight + ‘px‘); 47 css(‘height‘, ShowHeight); 48 } 49 if (ScrollDirection == ‘top‘) { 50 PosInit = ShowHeight; 51 PosSteper = Steper; 52 } 53 else { 54 PosSteper = 0 - Steper; 55 } 56 if (Steper < 1 || Steper > ShowHeight) { Steper = 1 }//每次移动间距超出限制(单位:px) 57 if (Interval < 1) { Interval = 10 }//每次移动的时间间隔（单位：毫秒） 58 var Container1 = $(‘<div></div>‘); //第一个用于展示的容器 59 var ContainerID1 = templeName; //第一个用于展示的容器id 60 61 var i = 0; 62 while ($(‘#‘ + ContainerID1).length > 0) { 63 ContainerID1 = ContainerID1 + ‘_‘ + i; 64 i++; 65 } 66 with (Container1) { 67 attr(‘id‘, ContainerID1); 68 //css(‘float‘, ‘left‘); 69 css(‘cursor‘, ‘default‘); 70 css(‘position‘, ‘absolute‘); 71 appendTo(AppendToObj); 72 html(ShowText.html()); 73 //鼠标进入后停止滚动 74 mouseover(function () { 75 clearInterval(ScrollTime_virtic); 76 }); 77 mouseout(function () { 78 ScrollTime_virtic = setInterval("ScrollAutoPlay_vertic(‘" + ContainerID1 + "‘,‘" + ContainerID2 + "‘,‘" + ScrollDirection + "‘," + ShowHeight + ‘,‘ + textHeight + "," + PosSteper + ")", Interval); 79 }); 80 } 81 textHeight = Container1.height(); 82 if (isNaN(PosInit)) { PosInit = 0 - textHeight; }; 83 Container1.css(‘top‘, PosInit); 84 85 var Container2 = $(‘<div></div>‘); //第二个用于展示的容器 86 var ContainerID2 = templeName; //第二个用于展示的容器id 87 var i = 0; 88 while ($(‘#‘ + ContainerID2).length > 0) { 89 ContainerID2 = ContainerID2 + ‘_‘ + i; 90 i++; 91 } 92 with (Container2) { 93 attr(‘id‘, ContainerID2); 94 //css(‘float‘, ‘left‘); 95 css(‘cursor‘, ‘default‘); 96 css(‘position‘, ‘absolute‘); 97 appendTo(AppendToObj); 98 html(ShowText.html()); 99 mouseover(function () { 100 clearInterval(ScrollTime_virtic); 101 }); 102 mouseout(function () { 103 ScrollTime_virtic = setInterval("ScrollAutoPlay_vertic(‘" + ContainerID1 + "‘,‘" + ContainerID2 + "‘,‘" + ScrollDirection + "‘," + ShowHeight + ‘,‘ + textHeight + "," + PosSteper + ")", Interval); 104 }); 105 } 106 textHeight = Container2.height(); 107 if (isNaN(PosInit)) { PosInit = textHeight + 100; }; 108 Container2.css(‘top‘, PosInit + textHeight); 109 110 111 ScrollTime_virtic = setInterval("ScrollAutoPlay_vertic(‘" + ContainerID1 + "‘,‘" + ContainerID2 + "‘,‘" + ScrollDirection + "‘," + ShowHeight + ‘,‘ + textHeight + "," + PosSteper + ")", Interval); 112 }
以上代码略嫌粗糙，如果是图文滚动可能需要做些修改，当然关键在于和大家分享思路抛砖引玉，欢迎大家提出更好的建议
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
