首页 > 代码库 > js实现文字（图片）垂直无缝连接滚动
js实现文字（图片）垂直无缝连接滚动
前一段时间为公司开发一个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 }
以上代码略嫌粗糙，如果是图文滚动可能需要做些修改，当然关键在于和大家分享思路抛砖引玉，欢迎大家提出更好的建议
js实现文字（图片）垂直无缝连接滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。