跑马灯代码，样式复杂的文字滚动效果

发布时间：2018-08-19 14:47 所属栏目：121 来源：站长网

导读：烈66火98网(LieHuo26.Net)教81程一款样式复杂的文字滚动效果、跑马灯代码，实际也不复杂，烈火网已经收录过不少跑马灯的效果，文字滚动也算是比较常见了，本跑马灯有点个性，最先滚动一行文字，从左到右滚动，然后再成批向上滚动，一个滚动完毕，第二个紧

　　烈66火98网(LieHuo26.Net)教81程一款样式复杂的文字滚动效果、跑马灯代码，实际也不复杂，烈火网已经收录过不少跑马灯的效果，文字滚动也算是比较常见了，本跑马灯有点个性，最先滚动一行文字，从左到右滚动，然后再成批向上滚动，一个滚动完毕，第二个紧接着出现，有意思吧。

　　演示：

<html> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <title>跑马灯</title> <style> * { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/ body { overflow:auto; } #mq { width:220px; height:40px; line-height:20px; overflow:hidden; border:1px solid black; } #mq div { position:absolute; width:220px; padding:0px 10px; } </style> <script> function init(){ initMq($("mq")); $("mq").start(); } function initMq(obj){ var objs; //定义跑马灯对象的自定义属性 obj.currentItem = -1; obj.loopDelay = 50; obj.loopItems = new Array(); obj.loopTimer = null; obj.speedX = 2; obj.speedY = 2; //定义跑马灯对象的自定义方法 obj.loop = mq_loop; obj.start = mq_startLoop; obj.stop = mq_stopLoop; //定义跑马灯对象的事件 obj.onmouseover = function(){ this.stop(); } obj.onmouseout = function(){ this.loop(); } //获取跑马灯对象的所有子元素 objs = obj.getElementsByTagName("div"); for(var i=0; i<objs.length; i++){ //在loopItems属性中记录子元素 obj.loopItems.push(objs[i]); //自定义子元素的属性和方法 objs[i].index = i; objs[i].move = move; objs[i].reset = mq_reset; //初始化子元素的状态 objs[i].reset(); } } function move(x, y){ this.style.left = x + "px"; this.style.top = y + "px"; } function mq_loop(){ var obj; clearTimeout(this.loopTimer); if(this.currentItem >= this.loopItems.length)this.currentItem = 0; obj = this.loopItems[this.currentItem]; if(obj.offsetLeft!=this.offsetLeft){ //向左卷动 obj.move(obj.offsetLeft - this.speedX, obj.offsetTop); }else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){ //向上卷动 obj.move(obj.offsetLeft, obj.offsetTop - this.speedX); }else{ //重置该子元素 obj.reset(); this.currentItem++; } this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay); } function mq_reset(){ var p = this.parentNode; this.move(p.offsetLeft + p.offsetWidth, p.offsetTop); } function mq_startLoop(){ for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset(); this.currentItem = 0; this.loop(); } function mq_stopLoop(){ clearTimeout(this.loopTimer); } function $(str){ return(document.getElementById(str)); } window.onload = init; </script> </head> <body> <div id="mq"> <div> 姚明在今天的比赛中拿到了22分和12个篮板球，拉斐尔-阿尔斯通拿到了17分和9次助攻，最终火箭以92比77击败了骑士，这是他们在最近10场比赛中的第九场胜利，也是他们取得的五连胜。赛后麦蒂说：“我们很多球员都站了出来。” </div> <div> 影片《大灌篮》除了在电影特技和体育主题两大方面，与当年星爷的《少林足球》堪称龙虎片，而且此番故事中，周董和老戏骨曾志伟饰演的一段动人父子情，又与星爷前不久刚刚公映的转型大片《长江7号》不谋而合。 </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）