设置首页
-
加入收藏
导航:
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置:
文章中心
-
WEB技术
-
Marquee替代 -- 无间滚动[IE6-7, FF, OP...]
相关文章
Marquee替代 -- 无间滚动[IE6-7, FF, OP...]
用marquee实现loading
水平无缝滚动代码
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
Marquee替代 -- 无间滚动[IE6-7, FF, OP...]
关键词:Marquee,滚动 时间:2008年09月19日 星期五 阅读:631
<!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>Marquee 替代 -- 无间滚动</title> <style type="text/css"> <!-- * {padding: 0; margin: 0} body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px} input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB} textarea {padding: 5px; line-height: 20px} p {margin: 1em 0} ul {} li {height: 1%; overflow: hidden; list-style-type: none} a {color: #666666; text-decoration: none} a:hover {color: #333333} .r {float: right} .l {float: left} .b {font-weight: bold} .gray {color: #666666; margin-top: 8px} .light {color:#FF6600; margin: 0 5px} .case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden} .title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA} .call {display:block;} .key {display: block; width: 8em; float: left} .type {display: block; width: 6em; float: left} .info {padding-left: 2em} .demo {margin-bottom: 2em} --> </style> <style type="text/css"> <!-- .MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto} .MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px} .MyMarqueeY {width: 205px; height: 420px; overflow: hidden;} .MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px} --> </style> <script language="javascript" type="text/javascript"> //<!-- // 附带函数 var // 用ID获取元素 $ = function(element) { return typeof(element) == 'object' ? element : document.getElementById(element); }, // 生成随机数 RandStr = function(n, u){ var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789"; var Len = tmStr.length; var Str = ""; for(i=1;i<n+1;i++){ Str += tmStr.charAt(Math.random()*Len); } return (u ? Str.toUpperCase() : Str); }; //--> </script> <script language="javascript" type="text/javascript"> //<!-- /******************************************* - Marquee 替代 -- 无间滚动 - By Mudoo 2008.8 - http://hi.baidu.com/mt20 ******************************************** new Marquee({ obj : 'myMarquee', // 滚动对象(必须) name : 'MyMQ_1', // 实例名(可选,不指定则随机) mode : 'x', // 滚动模式(可选,x=水平, y=垂直,默认x) speed : 10, // 滚动速度(可选,越小速度越快,默认10) autoStart : true, // 自动开始(可选,默认True) movePause : true // 鼠标经过是否暂停(可选,默认True) }); ********************************************/ var MyMarquees = new Array(); // 获取检测实例名 function getMyMQName(mName) { var name = mName==undefined ? RandStr(5) : mName; var myNames = ','+ MyMarquees.join(',') +','; while(myNames.indexOf(','+ name +',')!=-1) { name = RandStr(5); } return name; } function Marquee(inits) { var _o = this; var _i = inits; if(_i.obj==undefined) return; _o.mode = _i.mode==undefined ? 'x' : _i.mode; // 滚动模式(x:横向, y:纵向) _o.mName = getMyMQName(_i.name); // 实例名 _o.mObj = $(_i.obj); // 滚动对象 _o.speed = _i.speed==undefined ? 10 : _i.speed; // 滚动速度 _o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始 _o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停 _o.mDo = null; // 计时器 _o.pause = false; // 暂停状态 // 无间滚动初始化 _o.init = function() { if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return; MyMarquees.push(_o.mName); // 克隆滚动内容 _o.mObj.innerHTML = _o.mode=='x' ? ( '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+ ' <tr>'+ ' <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+ ' <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+ ' </tr>'+ '</table>' ) : ( '<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+ '<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>' ); // 获取对象、高宽 _o.mObj1 = $('MYMQ_'+ _o.mName +'_1'); _o.mObj2 = $('MYMQ_'+ _o.mName +'_2'); _o.mo1Width = _o.mObj1.scrollWidth; _o.mo1Height = _o.mObj1.scrollHeight; // 初始滚动 if(_o.autoStart) _o.start(); }; // 开始滚动 _o.start = function() { _o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed); if(_o.movePause) { _o.mObj.onmouseover = function() {_o.pause = true;} _o.mObj.onmouseout = function() {_o.pause = false;} } } // 停止滚动 _o.stop = function() { clearInterval(_o.mDo) _o.mObj.onmouseover = function() {} _o.mObj.onmouseout = function() {} } // 水平滚动 _o.moveX = function() { if(_o.pause) return; var left = _o.mObj.scrollLeft; if(left==_o.mo1Width){ _o.mObj.scrollLeft = 0 ; }else if(left>_o.mo1Width) { _o.mObj.scrollLeft = left-_o.mo1Width; }else{ _o.mObj.scrollLeft++; } }; // 垂直滚动 _o.moveY = function() { if(_o.pause) return; var top = _o.mObj.scrollTop; if(top==_o.mo1Height){ _o.mObj.scrollTop = 0 ; }else if(top>_o.mo1Height) { _o.mObj.scrollTop = top-_o.mo1Height; }else{ _o.mObj.scrollTop++; } }; _o.init(); } //--> </script> </head> <body> <div class="case"> <div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div> <div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div> <ul class="info gray"> <li><span class="key">obj:</span><span class="type">Object</span>滚动对象 (*必须)</li> <li><span class="key">name:</span><span class="type">String</span>实例名 (*可选,默认随机)</li> <li><span class="key">mode:</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li> <li><span class="key">speed:</span><span class="type">Number</span>滚动速度,越小速度越快 (*可选,默认10)</li> <li><span class="key">autoStart:</span><span class="type">Boolean</span>自动开始 (*可选,默认True)</li> <li><span class="key">movePause:</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选,默认True)</li> </ul> </div> <div class="case"> <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div> <div id="MyMarqueeX" class="MyMarqueeX"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="魅力泉州" /></td> </tr> </table> </div> </div> <div class="case"> <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div> <div id="MyMarqueeY" class="MyMarqueeY"> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="魅力泉州" /><br /> </div> </div> <div class="case"> <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式(内容不够宽)</div> <div id="MyMarqueeX2" class="MyMarqueeX"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="魅力泉州" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="魅力泉州" /></td> </tr> </table> </div> </div> <div class="case"> <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式(内容不够长)</div> <div id="MyMarqueeY2" class="MyMarqueeY"> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="魅力泉州" /><br /> <img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="魅力泉州" /><br /> </div> </div> <script language="javascript" type="text/javascript"> //<!-- /********************************************* - Marquee 演示 *********************************************/ new Marquee({ obj : 'MyMarqueeX', movePause : false }); new Marquee({ obj : 'MyMarqueeY', mode : 'y' }); new Marquee({ obj : 'MyMarqueeX2', movePause : false }); new Marquee({ obj : 'MyMarqueeY2', mode : 'y' }); //--> </script> </body> </html>
提示:可以先修改部分代码后再运行
简单横向:
<!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" /> <title>无间滚动-兼容IE7 IE6 FireFox Opera</title> <style type="text/css"> #demo { margin:30px auto 0; width:800px; overflow:hidden; } img { border:2px solid #e6e6e6; padding:1px; } </style> </head> <body> <div id="demo"> <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td id="demo1"> <table width="100%" border="0" cellspacing="8" cellpadding="0"> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="" /></td> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="" /></td> </tr> </table> </td> <td id="demo2"> </td> </tr> </table> </div> </body> </html> <script type="text/javascript"> var speed = 20; //数字越大,速度越慢 var ZJJDemo = document.getElementById('demo'); var ZJJDemo1 = document.getElementById('demo1'); var ZJJDemo2 = document.getElementById('demo2'); ZJJDemo2.innerHTML = ZJJDemo1.innerHTML function Marquee1(){ if(ZJJDemo2.offsetWidth-ZJJDemo.scrollLeft<=0) ZJJDemo.scrollLeft-=ZJJDemo1.offsetWidth else{ ZJJDemo.scrollLeft++ } } var MyMar1 = setInterval(Marquee1,speed) ZJJDemo.onmouseover = function() {clearInterval(MyMar1)} ZJJDemo.onmouseout = function() {MyMar1=setInterval(Marquee1,speed)} </script>
提示:可以先修改部分代码后再运行
简单纵向
<!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" /> <title>无间滚动-兼容IE7 IE6 FireFox Opera</title> <style type="text/css"> #demo { margin:30px auto 0; width:200px; height:500px; overflow:hidden; } img { border:2px solid #e6e6e6; padding:1px; } </style> </head> <body> <div id="demo"> <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td id="demo1"> <table width="100%" border="0" cellspacing="8" cellpadding="0"> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134s7d9.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134i3mq.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134hl8x.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134ax4v.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134g0yv.jpg" alt="" /></td> </tr> <tr align="center"> <td><img src="http://hahalaiba.fj126.net/art/file/preview/08919134gf5r.jpg" alt="" /></td> </tr> </table> </td> </tr> <tr> <td id="demo2"> </td> </tr> </table> </div> </body> </html> <script type="text/javascript"> var speed = 20; //数字越大,速度越慢 var ZJJDemo = document.getElementById('demo'); var ZJJDemo1 = document.getElementById('demo1'); var ZJJDemo2 = document.getElementById('demo2'); ZJJDemo2.innerHTML = ZJJDemo1.innerHTML function Marquee1(){ if(ZJJDemo2.offsetHeight-ZJJDemo.scrollTop<=0) ZJJDemo.scrollTop-=ZJJDemo1.offsetHeight else{ ZJJDemo.scrollTop++ } } var MyMar1 = setInterval(Marquee1,speed) ZJJDemo.onmouseover = function() {clearInterval(MyMar1)} ZJJDemo.onmouseout = function() {MyMar1=setInterval(Marquee1,speed)} </script>
提示:可以先修改部分代码后再运行
上一篇:
301永久重定向实现方式及302重定向
下一篇:
仿土豆网首页效果, 焦点图片切换效果
2条记录
访客评论
谢谢站长的代码,帮我解决了一大难题~忽忽~
萧萧
于 2009-6-23 11:45:03 发表
#1
很好!站长有好东西再给分享哦!
网友6969
于 2009-7-7 17:57:04 发表
#2
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我,再次发表不需要重填个人信息。
不想保留信息请
删除cookie
!
友情链接
天意设计
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
2条记录访客评论
谢谢站长的代码,帮我解决了一大难题~忽忽~
很好!站长有好东西再给分享哦!