萬盛學電腦網 >> 腳本專題 >> javascript >> 純javascript實現四方向文本無縫滾動效果
純javascript實現四方向文本無縫滾動效果
本文主要給大家分享了使用純javascript實現的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。
實現一個文本無縫滾動的效果：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]--> <head> <title>文字滾動</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{margin:0;padding:0;} body{padding:20px;} .textbox{border:1px solid #ddd;width:auto;overflow: hidden;} .textbox ul{list-style: none;position: relative;} .textbox ul li{padding:5px 0;} </style> </head> <body class="home-page"> <div id="textbox" class="textbox"> <ul> <li>汽車 | 運動B級車降3萬5 </li> <li>家居 | 這麼厲害的裝修 女人真的要坐不住了</li> <li>教育 | 各省前三報考華工重獎10萬元/人</li> <li>汽車 | 運動B級車降3萬5 平行進口車加價11萬</li> <li>健康 | 濫用激素釀苦果 14歲男孩10年不長個兒</li> <li>數碼 | 最新手機報價 說好的寬帶降費提速呢？</li> <li>汽車 | 平行進口車加價11萬</li> <li>汽車 | 運動B級車降3萬5</li> <li>汽車 | 平行進口車加價11萬</li> <li>運動 | 恆大亞冠生死戰 猜比分贏正版球衣</li> </ul> <a href="#" class="btnPrev">向左</a> <a href="#" class="btnNext">向右</a> </div> <br> <br> <div id="textbox2" class="textbox"> <ul> <li>汽車 | 運動B級車降3萬5 </li> <li>家居 | 這麼厲害的裝修 女人真的要坐不住了</li> <li>教育 | 各省前三報考華工重獎10萬元/人</li> <li>汽車 | 運動B級車降3萬5 平行進口車加價11萬</li> <li>健康 | 濫用激素釀苦果 14歲男孩10年不長個兒</li> <li>數碼 | 最新手機報價 說好的寬帶降費提速呢？</li> <li>汽車 | 平行進口車加價11萬</li> <li>汽車 | 運動B級車降3萬5</li> <li>汽車 | 平行進口車加價11萬</li> <li>運動 | 恆大亞冠生死戰 猜比分贏正版球衣</li> </ul> <a href="#" class="btnPrev">向上</a> <a href="#" class="btnNext">向下</a> </div> <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script> <script type="text/javascript"> //四方向無縫滾動 scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'}); scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'}); function scroll(container,options){ var box = $(contaijavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved