javascript制作滚动文字
用javascript制作滚动文字的方法如下:
<div id="roll" class="roll"> 11111111111111111111111 22222222222222222222222 33333333333333333333333 44444444444444444444444 55555555555555555555555 </div> <script> /* *思路 *1、首先写一个函数动态的设置节点的style *2、每过一段特定的时间,文字的top值减少指定的值 *3、如果是最后一项,则恢复为最开始的状态. * */ var roll = document.getElementById("roll"); var div = roll.innerHTML; setcss = function (_this, css) { if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) { return; } for (var i in css) { _this.style[i] = css[i]; } return _this; }; roll.innerHTML = "<div id='rr'>" + div + "</div>"; setcss(roll, { "position": "relative", "overflow": "hidden", "width": "100px", "height": "100px", "color": "red", }) var timeroll = document.getElementById("rr"); var h = timeroll.offsetHeight; Timeroll = function () { var h = timeroll.offsetHeight; var t = parseInt(timeroll.style.top, 10); var tt = h > Math.abs(t) || t >= 0 ? t - 10 : (h || 0); setcss(timeroll, { "top": tt + "px" }); setTimeout(Timeroll, 200); }; if (h > 100) { Timeroll(); setcss(timeroll, { "position": "relative", "top": "0px", }) } </script>