滚动字幕，鼠标经过停留

最新推荐文章于 2024-11-21 09:40:06 发布

iteye_2636

最新推荐文章于 2024-11-21 09:40:06 发布

阅读量410

点赞数

文章标签： xhtml javascript json ViewUI

做了一天的滚动字幕，鼠标经过停留，终于弄出来了，给大家总结下代码如下，直接可复制粘贴用，希望对大家有所帮助，如有问题，联系qq:523132661<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload = function(){ var m = new XX.Fx.Marquee(document.getElementById('demo'), {direction:'top', speed:80, step:1}); m.start(); myStop = function(){ m.stop(); }; myStart = function(){ m.start(); } }; 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实现动画的函数 */ XX.Fx.Marquee = function(elem, opts){ opts = opts || {}; //为设定滚动的方向变量 this.el = elem; this.speed = opts.speed || 1000; //滚动的速度为1秒滚动一次 this.step = opts.step || 5; //滚动像素设置为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表示封装的滚定元素*/ 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); this.el.innerHTML += this.el.innerHTML; }; XX.Fx.Marquee.prototype.start = function(){ if(this.timer) { clearTimeout(this.timer); } 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; } else{ el[offset] = that.size; } }; break; default: move = function(){ if(el[offset] < size){ el[offset] += step; } else{ el[offset] = 0; } }; } this.timer = setInterval(move, speed); }; XX.Fx.Marquee.prototype.stop = function(){ clearInterval(this.timer); }; </script> </head> <body> <hr color="#ff0000" /> <div id="demo" style="border:1 solid #c0c0c0;text-align:left;width:954px;height:200px" οnmοuseοver="myStop();" οnmοuseοut="myStart();"> <h2>--------------------走马灯演示测试--------------------------</h2><br /> 文字滚动测试1<br /> 文字滚动测试2<br /> 文字滚动测试3<br /> <br /> 制作者：Exodia<br /> 联系方式:QQ39942816<br /> <a href="http://blog.youkuaiyun.com/dxx1988">BLOG地址</a> </div> </body> </html>