js实现文字定时上下滚动效果
2011-11-30 17:34
579 查看
<!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" /> <meta name="keywords" content="文字定时上下滚动效果" /> <title>兼容多种浏览器的文字定时上下滚动效果</title> <style type="text/css"> .cls_container { border: 1px solid #ccc; width: 380px; font-size: 12px; height: 24px; overflow: hidden; } .cls_container ul { list-style-type: none; margin: 0; padding: 0; margin-left: 32px; } .cls_container ul li { height: 24px; line-height: 24px; width: 320px; float: left; display: inline; } </style> </head> <body> <div id="myscroll" class="cls_container"> <ul> <li><a href="http://www.sina.com/">LI文字效果1</a></li> <li><a href="http://www.sina.com/">LI文字效果2</a></li> <li><a href="http://www.sina.com/">LI文字效果3</a></li> <li><a href="http://www.sina.com/">LI文字效果4</a></li> <li><a href="http://www.sina.com/">LI文字效果5</a></li> <li><a href="http://www.sina.com/">LI文字效果6 </a></li> <li><a href="http://www.sina.com/">LI文字效果7</a></li> <li><a href="http://www.sina.com/">LI文字效果8</a></li> <li><a href="http://www.sina.com/">LI文字效果9</a></li> <li><a href="http://www.sina.com/">LI文字效果10</a></li> <li><a href="http://www.sina.com/">LI文字效果11</a></li> </ul> </div> <script type="text/javascript"> function $(element){ if(arguments.length>1){//如果有多个目标对象,则循环将所有目标对象都存于elements数组当中 for(var i=0,length=arguments.length,elements=[];i<length;i++){ elements.push($(arguments[i])); } return elements; } if(typeof element=="string"){//如果是一个目标ID,则取对应的dom对象 return document.getElementById(element); }else{//如果是一个dom对象,直接返回 return element; } } var Class={ create:function(){ return function(){ this.initialize.apply(this,arguments); } } } Function.prototype.bind=function(object){ var method=this; return function(){ method.apply(object,arguments); } } var Scroll=Class.create(); Scroll.prototype={ initialize:function(element,height){ this.element=$(element); this.element.innerHTML+=this.element.innerHTML; this.height=height; this.maxHeight=this.element.scrollHeight/2; this.counter=0; this.scroll(); this.timer=""; this.element.onmouseover=this.stop.bind(this); this.element.onmouseout=function(){ this.timer=setTimeout(this.scroll.bind(this),1000); }.bind(this); }, scroll:function(){ if(this.element.scrollTop<this.maxHeight){ this.element.scrollTop++; this.counter++; }else{ this.element.scrollTop=0; this.counter=0; } if(this.counter<this.height){ this.timer=setTimeout(this.scroll.bind(this),20); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),3000); } }, stop:function(){ clearTimeout(this.timer); } } //调用函数进行文字滚动效果 new Scroll("myscroll",24); </script> </body> </html>
相关文章推荐
- js扩展滚动窗口小插件实现文字左右上下滚动效果实例
- js实现文字定时向上滚动效果_文字特效_js网页特效代码
- JS实现的文字与图片定时切换效果代码
- Scroll text - JS实现文字自动循环滚动效果
- 实现上下文字滚动的效果
- js实现简单易用的上下无缝滚动效果
- jquery实现文字的上下滚动效果
- js实现文字垂直滚动和鼠标悬停效果
- JS实现“鼠标控制局部文字滚动效果”研究
- js实现文字滚动效果
- 一个js实现任务栏文字滚动效果
- JS实现的文字与图片定时切换效果代码
- iOS文字上下滚动效果的实现
- js实现首尾相连的文字滚动效果
- Js 实现文字爬楼滚动效果 结合文本框
- 友情链接横向文字上下间隙循环滚动JS效果
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- 实现Js文字滚动效果(代码)
- JS实现倒计时和文字滚动的效果实例