很实用的文字和图片定时自动向上滚动特效代码,可自定义滚动速度,许多建站的用来做新闻标题滚动展示等特效。
<!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=gb2312"> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>用文字和图片同时定时向上滚动效果_武鸣人</title> <style type="text/css"> body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#666;line-height:2em;background:#000;} #box_www_wuming_ren{height:25px;width:220px;overflow:hidden;border:2px solid #CCC;list-style:none;margin:0;padding:0;position:relative;padding-left:5px;margin:50px auto;background:#FFf;cursor:pointer;} #img_wuming_ren{height:73px;width:229px;overflow:hidden;border:2px solid #CCC;list-style:none;margin:0;padding:0;position:relative;margin:50px auto;background:#FFf;cursor:pointer;} ul li,ul{margin:0;padding:0;} img{display:block;} </style> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <ul id="box_www_wuming_ren"> <li>[1]武鸣人一号标题_武鸣人</li> <li>[2]武鸣人二号标题_武鸣人</li> <li>[3]武鸣人三号标题_武鸣人</li> <li>[4]武鸣人四号标题_武鸣人</li> <li>[5]武鸣人五号标题_武鸣人</li> </ul> <ul id="img_wuming_ren"> <li><img border="0" src="/img/20240306_www_wuming_ren_53.jpg" name="page_cnt_3"></li> <li><img border="0" src="/img/20240306_www_wuming_ren_54.jpg" name="page_cnt_3"></li> <li><img border="0" src="/img/20240306_www_wuming_ren_53.jpg" name="page_cnt_3"></li> <li><img border="0" src="/img/20240306_www_wuming_ren_54.jpg" name="page_cnt_3"></li> </ul> <script type="text/javascript"> var rollText={ go:null, oParentUl:null, oUlH:null, liArr:null, childNode:null, timeout:null, run:function(id,delay){ var oLiFirst=this.liArr[0]; var liMarTop = oLiFirst.style.marginTop; var liTopNum=parseInt(liMarTop); var c = Math.abs(liTopNum); if(c< parseInt(this.oUlH)){ c++; oLiFirst.style.marginTop ='-' + c + 'px'; }else if(Math.abs(liTopNum)== parseInt(this.oUlH)){ clearInterval(this.go); this.oParentUl.removeChild(oLiFirst); this.oParentUl.appendChild(oLiFirst); this.liArr[this.liArr.length-1].style.marginTop='0px'; this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay); } }, start:function(id,childtags,delay){ this.childNode=childtags; this.oParentUl=document.getElementById(id); this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height']; this.liArr=this.oParentUl.getElementsByTagName(childtags); for(var i=0;i<this.liArr.length;i++){ this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;'; } this.go =setInterval( function(obj,id,delay){ return function(){obj.run(id,delay)} }(this,id,delay),10); this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this); this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this); } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) rollText.start('box_www_wuming_ren','li',1000); function clone(){}; clone.prototype= rollText; var obj = new clone; obj.start('img_wuming_ren','li',1000); </script> </body> </html>
本文来自武鸣人网站,转载请注明出处