Marquee替代 -- 无间滚动[IE6-7, FF, OP...]

最新推荐文章于 2023-01-29 10:01:29 发布

lihaiyin

最新推荐文章于 2023-01-29 10:01:29 发布

阅读量471

点赞数

文章标签： ie class function border float javascript

图片滚动展示在企业站中很经常用到.
虽然Marquee可以实现.
但是..屁股总是带着一片空白.!
客户不乐意了.觉得太难看.
那就做无间滚动吧.
虽然我觉得不难~.可并不是人人都懂JS.
无奈!.为了避免每次出错的时候都喊救命...
重新做了个.调用尽量简单化了.~至少我感觉简单了...
废话不多说...

引用:

声明：
如果第一跟第二个演示无法滚动。那是因为你的分辨率太大。
内容大小没有超出容器大小。初始函数不进行处理。不属于bug范围
请将窗口缩小再刷新。

第三与第四个演示为内容大小不够的情况。

下面代码:
自己看,自己研究~~虽然没什么好研究的...
完全拿来主义也不反对...

2008.8.29 修正

引用:

发现个判断错误.
判断是否滚动时..竟然犯低级逻辑错误...
if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;

应该改为

if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return <!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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* {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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.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> <mce:script language="javascript" type="text/javascript"></mce:script> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <div class="case"> <div class="title"><a href="#" mce_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="#" mce_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://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/35.jpg" mce_src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/36.jpg" mce_src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/35.jpg" mce_src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/36.jpg" mce_src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td> </tr> </table> </div> </div> <div class="case"> <div class="title"><a href="#" mce_href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div> <div id="MyMarqueeY" class="MyMarqueeY"> <img src="http://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/35.jpg" mce_src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/36.jpg" mce_src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /><br /> </div> </div> <div class="case"> <div class="title"><a href="#" mce_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://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td> </tr> </table> </div> </div> <div class="case"> <div class="title"><a href="#" mce_href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式（内容不够长）</div> <div id="MyMarqueeY2" class="MyMarqueeY"> <img src="http://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br /> </div> </div> <mce:script language="javascript" type="text/javascript"></mce:script> </body> </html> ;