js實現文字（圖片）垂直無縫連接滾動

本文轉載自查看原文 2014-10-30 16:56 2342 字幕循環滾動/ js/ 循環/ 字幕滾動/ javascript

前一段時間為公司開發一個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 + '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 }

View Code

以上代碼略嫌粗糙，如果是圖文滾動可能需要做些修改，當然關鍵在於和大家分享思路拋磚引玉，歡迎大家提出更好的建議

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現圖片無縫連接 js實現無縫連接輪播圖（五）點擊右箭頭，實現圖片滾動 js實現無縫連接輪播圖（六）點擊右側按鈕，實現小圓點也一起滾動 js實現無縫連接輪播圖（四）點擊小圓點，移動圖片 HTML 多張圖片無縫連接 js 實現圖片的無縫滾動 js文字的無縫滾動（上下） js文字無縫滾動 js實現無縫連接輪播圖（八）自動播放功能 JS 輪播圖（無縫連接的輪播圖實現，含代碼供參考）