泡客首页
|
CMS下载
|
CRM下载
|
泡客部落
|
首页
挨踢资讯
编程技巧
SEO优化
实用代码
聚焦话题
工作手记
系统安全
本站程序
留言
泡客部落
程序讨论
意见建议
疯狂灌水
社区互动论坛
TXT小说下载
素材酷站推荐
站长工具箱
推荐阅读
·6种lightbox效果源代码下载
·转Jshell写的一篇对Pcook CMS的分析文章
·IIS安装注意事项 最安全的安装方法
·ORIENTED红黑色系web2.0模板
·检测上传的图片文件(jpeg,gif,bmp,png)是否真
·本站使用的数据库备份代码
·减轻JavaScript测试和调试负担
·简单的滚动公告代码 兼容IE、Firefox
·CSS中的滑动门技术 导航栏背景跟随鼠标滑动
·长标题文章用CSS控制省略号方式显示
站内搜索
随机文档
·Iframe自适应高度_ie_firefox下都可用
·IIS安装注意事项 最安全的安装方法
·让超出DIV宽度范围的文字自动显示省略号...
·ADSL路由器默认密码
·用CSS滤镜打开图片的各种效果,很有用-CSS代码特效
·一个高手做的三级联动下拉框
·用CSS打造图片边框颜色
·实现首页幻灯片效果
·用ASP编写的确认对话框
·XHTML+CSS制作的网站导航菜单
您现在的位置:
首页
>>
实用代码
>> 信息正文
Marquee替代 -- 无间滚动[IE6-7, FF, OP...]
2008-10-3 23:51:30 来源: 网络 作者:站长 访问:
239
次 被顶:
8
次 字号:【
大
中
小
】
HTML代码
<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> <DIV class=case> <DIV class=title><A class=r href="#">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 class=r href="#">Top</A><A name=1></A>Marquee 演示 - 横向模式</DIV> <DIV class=MyMarqueeX id=MyMarqueeX> <TABLE cellPadding=0 width="100%" align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=MYMQ_hjnw4_1> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD></TR></TBODY></TABLE></TD> <TD id=MYMQ_hjnw4_2> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV> <DIV class=case> <DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 纵向模式</DIV> <DIV class=MyMarqueeY id=MyMarqueeY> <DIV id=MYMQ_7b93f_1><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"><BR></DIV> <DIV id=MYMQ_7b93f_2><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"><BR></DIV></DIV></DIV> <DIV class=case> <DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 横向模式(内容不够宽)</DIV> <DIV class=MyMarqueeX id=MyMarqueeX2> <TABLE cellPadding=0 width="100%" align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=MYMQ_n61ck_1> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD></TR></TBODY></TABLE></TD> <TD id=MYMQ_n61ck_2> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD> <TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV> <DIV class=case> <DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 纵向模式(内容不够长)</DIV> <DIV class=MyMarqueeY id=MyMarqueeY2><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><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>
提示:您可以先修改部分代码再运行
顶一下
打印本文
加入收藏
返回顶部
关闭窗口
Tags:
上一篇:
XHTML+CSS制作的网站导航菜单
下一篇:
aspjpeg2.0组件下载(适用32位/64位系统)
相关文章列表
·
乱葬青春
·
凌乱的思绪
·
忆守震
·
目标
·
秋风忽至的晚上
·
再见,2008年12月10日
参与评论
请文明参与讨论,禁止漫骂攻击。
用户名:
(Ctrl+Enter 快速发表)
网友评论列表
关于我们
|
联系我们
|
广告服务
|
友情链接
|
网站地图
|
版权声明
|
人才招聘
|
帮助
© CopyRight 2008
Pcook.com.cn
, Inc.All Rights Reserved.
Powered by:
laoy8
Design by:
Pcook
沪ICP备08004247号