日期:2014-05-16 浏览次数:20462 次
<marquee onmouseout="this.start()" onmouseover="this.stop()">用来设置鼠标移出该区域时继续滚动</marquee>
------解决方案--------------------
<style> #s{ width:500px; border:1px solid #000; overflow:hidden;} #s div{ width:1000px;} #s #i span{ width:500px; display:block; float:left;} </style> <div id="s"> <div id="i"> <span id="t">要滚动的文字,滚啊滚,滚啊滚</span> </div> </div> <script type="text/javascript"> var speed = 10 var s = document.getElementById("s") var i = document.getElementById("i") var t = document.getElementById("t") i.appendChild(t.cloneNode(true)) function scroll() { s.scrollLeft += 1 if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0; } window.setInterval(scroll,speed) </script>
------解决方案--------------------
<style> #s{ width:500px; border:1px solid #000; overflow:hidden;} #s div{ width:1000px;} #s #i span{ width:500px; display:block; float:left;} </style> <div id="s"> <div id="i"> <span id="t">要滚动的文字,滚啊滚,滚啊滚</span> </div> </div> <script type="text/javascript"> var speed = 10 var s = document.getElementById("s") var i = document.getElementById("i") var t = document.getElementById("t") var d i.appendChild(t.cloneNode(true)) function scroll() { s.scrollLeft += 1 if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0; } d = window.setInterval(scroll,speed) s.onmouseover = function(){window.clearInterval(d)} s.onmouseout = function(){d = window.setInterval(scroll,speed)} </script>
------解决方案--------------------
window.XX = window.XX || {}; XX.Fx = XX.Fx || {}; /* 走马灯构造函数; 参数elem:要进行包装的dom元素,即包装后,其内部元素会实现走马灯效果 opts:JSON格式的数据,可传入的参数包括: { speed //滚动速度,以毫秒为单位,默认为1000 step //滚动像素, 默认为5 direction //滚动方向,包括'left', 'right', 'top', 'bottom',默认'left' } */ XX.Fx.Marquee = function(elem, opts){ opts = opts || {}; this.el = elem; this.speed = opts.speed || 1000; this.step = opts.step || 5; var dir = this.direction = opts.direction || 'left'; if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') { throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"'); } elem.style.overflow = 'hidden'; elem.style.whiteSpace = 'nowrap'; if(dir === 'right' || dir === 'bottom'){ this.step = - this.step ; } this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop'; this.size = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight); }; XX.Fx.Marquee.prototype.start = function(){ if(this.timer){ clearTimeout(this.timer); } this.el.innerHTML += this.el.innerHTML; var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null; switch (this.direction){ case 'right': case 'bottom': move = function(){ if(el[offset] > 0){ el[offset] += step; setTi