请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › Marquee替代 -- 无间滚动[IE6-7, FF, OP...]
12下一页
返回列表 发新帖
查看: 16168|回复: 44

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

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-27 22:39:20 |显示全部楼层
图片滚动展示在企业站中很经常用到.
虽然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;

 提示：您可以先修改部分代码再运行


[ 本帖最后由 mudoo 于 2008-8-30 18:28 编辑 ]
http://www.niceui.cn
西部数码顶级域名注册商39元抢注！

使用道具 举报

TBlack　
帖子
2294
体力
2538
威望
1
居住地
广东省 深圳市
发表于 2008-8-27 22:42:59 |显示全部楼层
说说思想..
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-27 22:46:51 |显示全部楼层
本人小时候不好好读书.墨水N少~`
不擅长写教程.~~
自己慢慢看.直接也可以用...
http://www.niceui.cn

使用道具 举报

vvsamln　

代码艺术

中级会员 手机认证 

帖子
367
体力
859
威望
0
居住地
河北省 邯郸市
发表于 2008-8-28 00:05:07 |显示全部楼层
好东西  收藏了 感谢楼主 能给讲讲不  来点注释

  1. <script language="javascript" type="text/javascript">
  2. //<!--
  3. // 附带函数
  4. var
  5. // 用ID获取元素
  6. $ = function(element) {
  7.         return typeof(element) == 'object' ? element : document.getElementById(element);
  8. },
  9. // 生成随机数
  10. RandStr = function(n, u){
  11.         var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
  12.         var Len = tmStr.length;
  13.         var Str = "";
  14.         for(i=1;i<n+1;i++){
  15.                 Str += tmStr.charAt(Math.random()*Len);
  16.         }
  17.         return (u ? Str.toUpperCase() : Str);
  18. };
  19. //-->
  20. </script>
  21. <script language="javascript" type="text/javascript">
  22. //<!--
  23. /*******************************************
  24.         - Marquee 替代 -- 无间滚动
  25.         - By Mudoo 2008.8
  26.         - http://hi.baidu.com/mt20
  27. ********************************************
  28.         new Marquee({
  29.                 obj                        : 'myMarquee',                // 滚动对象（必须）
  30.                 name                : 'MyMQ_1',                        // 实例名（可选，不指定则随机）
  31.                 mode                : 'x',                                // 滚动模式（可选，x=水平, y=垂直，默认x）
  32.                 speed                : 10,                                // 滚动速度（可选，越小速度越快，默认10）
  33.                 autoStart         : true,                                // 自动开始（可选，默认True）
  34.                 movePause        : true                                // 鼠标经过是否暂停（可选，默认True）
  35.         });
  36. ********************************************/
  37. var MyMarquees = new Array();
  38. // 获取检测实例名
  39. function getMyMQName(mName) {
  40.         var name = mName==undefined ? RandStr(5) : mName;
  41.         var myNames = ','+ MyMarquees.join(',') +',';
  42.        
  43.         while(myNames.indexOf(','+ name +',')!=-1) {
  44.                 name = RandStr(5);
  45.         }
  46.         return name;
  47. }
  48. function Marquee(inits) {
  49.         var _o = this;
  50.         var _i = inits;
  51.        
  52.         if(_i.obj==undefined) return;
  53.         _o.mode           = _i.mode==undefined ? 'x' : _i.mode;                        // 滚动模式(x:横向, y:纵向)
  54.         _o.mName        = getMyMQName(_i.name);                                                        // 实例名
  55.         _o.mObj                = $(_i.obj);                                                                        // 滚动对象
  56.         _o.speed        = _i.speed==undefined ? 10 : _i.speed;                        // 滚动速度
  57.         _o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
  58.         _o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
  59.        
  60.         _o.mDo                = null;                                                                                        // 计时器
  61.         _o.pause        = false;                                                                                // 暂停状态
  62.        
  63.         // 无间滚动初始化
  64.         _o.init = function() {
  65.                 if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
  66.                
  67.                 MyMarquees.push(_o.mName);
  68.                
  69.                 // 克隆滚动内容
  70.                 _o.mObj.innerHTML = _o.mode=='x' ? (
  71.                         '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
  72.                         '        <tr>'+
  73.                         '                <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
  74.                         '                <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
  75.                         '        </tr>'+
  76.                         '</table>'
  77.                 ) : (
  78.                         '<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
  79.                         '<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
  80.                 );
  81.                
  82.                 // 获取对象、高宽
  83.                 _o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
  84.                 _o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
  85.                 _o.mo1Width = _o.mObj1.scrollWidth;
  86.                 _o.mo1Height = _o.mObj1.scrollHeight;
  87.                
  88.                 // 初始滚动
  89.                 if(_o.autoStart) _o.start();
  90.         };
  91.                
  92.         // 开始滚动
  93.         _o.start = function() {
  94.                 _o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
  95.                 if(_o.movePause) {
  96.                         _o.mObj.onmouseover = function() {_o.pause = true;}
  97.                         _o.mObj.onmouseout = function() {_o.pause = false;}
  98.                 }
  99.         }
  100.        
  101.         // 停止滚动
  102.         _o.stop = function() {
  103.                 clearInterval(_o.mDo)
  104.                 _o.mObj.onmouseover = function() {}
  105.                 _o.mObj.onmouseout = function() {}
  106.         }
  107.        
  108.         // 水平滚动
  109.         _o.moveX = function() {
  110.                 if(_o.pause) return;
  111.                 var left = _o.mObj.scrollLeft;
  112.                 if(left==_o.mo1Width){
  113.                         _o.mObj.scrollLeft = 0 ;
  114.                 }else if(left>_o.mo1Width) {
  115.                         _o.mObj.scrollLeft = left-_o.mo1Width;
  116.                 }else{
  117.                         _o.mObj.scrollLeft++;
  118.                 }
  119.         };
  120.        
  121.         // 垂直滚动
  122.         _o.moveY = function() {
  123.                 if(_o.pause) return;
  124.                 var top = _o.mObj.scrollTop;
  125.                 if(top==_o.mo1Height){
  126.                         _o.mObj.scrollTop = 0 ;
  127.                 }else if(top>_o.mo1Height) {
  128.                         _o.mObj.scrollTop = top-_o.mo1Height;
  129.                 }else{
  130.                         _o.mObj.scrollTop++;
  131.                 }
  132.         };
  133.        
  134.         _o.init();
  135. }
  136. //-->
  137. </script>
复制代码
玩不丧志

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-28 11:53:01 |显示全部楼层
不是都有注释了么？..
http://www.niceui.cn

使用道具 举报

zhenzhenle　
帖子
6
体力
45
威望
0
居住地
广东省 广州市
发表于 2008-8-28 16:42:37 |显示全部楼层
好东西收藏了

使用道具 举报

261509559　

随枫飘月

银牌会员

帖子
753
体力
1698
威望
4
居住地
山东省 济南市
发表于 2008-8-28 16:46:05 |显示全部楼层
不错，收藏一个先
yanglei blog

使用道具 举报

xkang　
帖子
848
体力
2432
威望
1
发表于 2008-8-29 09:43:17 |显示全部楼层
楼主辛苦！不过还有个悬停状态貌似还没做吧
因为专业，所以选择..技术群：11162579

使用道具 举报

wolfxyx　

徐魔风

金牌会员 手机认证 

帖子
1244
体力
3267
威望
0
发表于 2008-8-29 14:06:25 |显示全部楼层
辛苦。。我就拿来主义了
努力精通Javascript，然后PHP

使用道具 举报

yymax　
帖子
761
体力
1190
威望
1
居住地
广东省 深圳市
发表于 2008-8-29 20:55:46 |显示全部楼层
IE7下，横向滚动到一定时间就停止了
哈哈
寻找熟练使用【ASP+生成静态】的开发朋友

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-29 21:50:12 |显示全部楼层

回复 10# yymax 的帖子

貌似没可能吧.偶就在IE7下做的...
具体什么情况?
http://www.niceui.cn

使用道具 举报

yymax　
帖子
761
体力
1190
威望
1
居住地
广东省 深圳市
发表于 2008-8-29 21:59:42 |显示全部楼层
晕倒啊，居然现在打开 左侧不滚动了
寻找熟练使用【ASP+生成静态】的开发朋友

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-29 22:06:10 |显示全部楼层

回复 12# yymax 的帖子

刚在编辑。
现在应该可以了，还有问题请联系我。
http://www.niceui.cn

使用道具 举报

km268　

盗版阿飞

版主 手机认证 

帖子
8828
体力
11931
威望
3
居住地
云南省 曲靖市
发表于 2008-8-30 10:52:35 |显示全部楼层
IE6下，横向无悬停，纵向内容不够长的仅显示两张图片且无效果；
揚帆千日無以出海 只因大浪不及心漣漪
國外免备案PHP虚拟主机

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-30 12:06:37 |显示全部楼层

回复 14# km268 的帖子

那就是正常...
横向无悬停是演示里故意设置的。movePause: false
内容大小没超过容器大小就不滚动。
http://www.niceui.cn

使用道具 举报

yymax　
帖子
761
体力
1190
威望
1
居住地
广东省 深圳市
发表于 2008-8-30 12:36:04 |显示全部楼层
我是SP2
IE7
分辨率是1680*1050

运行打开以后，无论是最大化窗口，还是1024窗口，横向都不滚
寻找熟练使用【ASP+生成静态】的开发朋友

使用道具 举报

lenlens　
帖子
64
体力
301
威望
0
发表于 2008-8-30 15:18:36 |显示全部楼层
发现个小小的问题，在宽屏的情况下，横向的不会滚动，因为横向的css的width是98%，改成实际px就可以了

使用道具 举报

tmulmt　

墨墨无雨

银牌会员

帖子
2094
体力
2074
威望
0
发表于 2008-8-30 16:18:12 |显示全部楼层
我这里看一切正常，多谢楼主辛苦。如果能写写教程就更好了，让俺们都学一下，自己看着费劲啊。

使用道具 举报

yymax　
帖子
761
体力
1190
威望
1
居住地
广东省 深圳市
发表于 2008-8-30 20:30:57 |显示全部楼层
恭喜楼主
贺喜楼主
现在滚了
寻找熟练使用【ASP+生成静态】的开发朋友

使用道具 举报

阿智　

我爱女生

金牌会员 手机认证 

帖子
1047
体力
6725
威望
14
居住地
陕西省 西安市
发表于 2008-8-30 20:33:58 |显示全部楼层
声明：
如果第一跟第二个演示无法滚动。那是因为你的分辨率太大。
内容大小没有超出容器大小。初始函数不进行处理。不属于bug范围
请将窗口缩小再刷新。

==========================================
为什么不将滚动操作监控到ONRESIZE事件中.
在打开页面后,大的情况下就不滚动,拉小就滚动
千万别点我，会进入阿智的博客的

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-30 20:45:17 |显示全部楼层

回复 19# yymax 的帖子

因为写声明比写函数要快.
要加班...过两天再写~~.
http://www.niceui.cn

使用道具 举报

t2eyes　

御宇清风

初级会员

帖子
43
体力
107
威望
0
发表于 2008-8-31 13:54:58 |显示全部楼层
不知道是因为我电脑的原因还是因为楼主没有进行编辑

就只有第二个有鼠标悬停。。。。


但对楼主的共享精神还是万般崇拜和支持的！

学习ing。。。

使用道具 举报

mudoo　楼主

经典木头

高级会员

帖子
468
体力
954
威望
5
居住地
福建省 泉州市
发表于 2008-8-31 14:49:38 |显示全部楼层

回复 22# t2eyes 的帖子

请认真看演示代码...
#15已经说过了.
http://www.niceui.cn

使用道具 举报

t2eyes　

御宇清风

初级会员

帖子
43
体力
107
威望
0
发表于 2008-8-31 15:41:03 |显示全部楼层

回复 23# mudoo [楼主] 的帖子

收到了，惭愧...

谢谢···

使用道具 举报

龙飞凤舞　
帖子
54
体力
128
威望
0
发表于 2008-9-1 22:36:04 |显示全部楼层
在1920*1200 下第一/二个效果正常。第3/4个内容不够没动。

使用道具 举报

rainbutterfly　
帖子
28
体力
28
威望
0
居住地
广西壮族自治区 桂林市
发表于 2008-9-2 09:47:09 |显示全部楼层
非常感谢  收藏了

使用道具 举报

ttkl3239　
帖子
14
体力
38
威望
0
发表于 2008-9-3 20:43:21 |显示全部楼层

无间滚动

无间滚动

使用道具 举报

blank99　
帖子
37
体力
83
威望
0
发表于 2008-9-11 15:43:01 |显示全部楼层
是非常不错,但代码实在太长了,为一个效果加这么多代码不划算!不过还是谢谢!

使用道具 举报

lingboxia　
帖子
34
体力
75
威望
0
发表于 2008-9-12 07:24:41 |显示全部楼层
不错，收藏一个先
256m.net

使用道具 举报

bbsonline　
帖子
90
体力
342
威望
0
发表于 2008-9-12 08:45:41 |显示全部楼层
恩收到支持 啊

使用道具 举报

12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-11 04:19 , Processed in 0.133296 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部