前一段时间为公司开发一个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>View Code
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
新闻热点
疑难解答
