设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 17597|回复: 18

发一个左右方向无缝滚动的js源代码,兼容ie,firefox,兼容w3c标准

[复制链接]
发表于 2008-10-4 12:23:24 | 显示全部楼层 |阅读模式
分享一段一个左右方向无缝滚动的js源代码,兼容ie,firefox,兼容w3c标准。班门弄斧,大家多多指教!
昨天帮客户修改一个网站,需要一个左右无缝滚动图片的效果,在网上搜索一些源代码,也试了一些,但是都不符合我的要求,左右方向无缝滚动,兼容firefox,符合w3c标准。
所以没有办法,只有自己深入研究一下,经过一段调试终于成功了,在IE7和firefox3.0下面可以正常运行,遵循Xhtml 1.0 标准,但部分代码不是很规范,:-)。其他浏览器没有专门测试。在这里和大家分享一下,如有不足的地方欢迎大家批评指正,毕竟js方面我还不是很精通,但不用怀疑,这段代码绝对能用,:-)。


源代码下载地址:左右无缝滚动 兼容firefox W3C 标准 js 源代码大小:2,049 字节
 楼主| 发表于 2008-10-5 15:26:51 | 显示全部楼层

为了方便,把核心代码贴出来

<!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><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<META content="MSHTML 6.00.6000.20815" name=GENERATOR></HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD class=border01 align=middle>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 815px">
<TABLE height=100 cellSpacing=0 cellPadding=0 align=center border=0
      cellspace="0">
<TBODY>
<TR>
<TD id=marquePic1 vAlign=top align=middle height=100>
<TABLE height=100 cellSpacing=1 cellPadding=0 width=815 border=0>
<TBODY>
<TR align=middle>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843172847.jpg" mce_src="images/200843172847.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/20084317340383.jpg" mce_src="images/20084317340383.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173529652.jpg" mce_src="images/200843173529652.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173633873.jpg" mce_src="images/200843173633873.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173727600.jpg" mce_src="images/200843173727600.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173946787.jpg" mce_src="images/200843173946787.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174056740.jpg" mce_src="images/200843174056740.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174213307.jpg" mce_src="images/200843174213307.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174335514.jpg" mce_src="images/200843174335514.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174433450.jpg" mce_src="images/200843174433450.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174539975.jpg" mce_src="images/200843174539975.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174648990.jpg" mce_src="images/200843174648990.jpg" width=153
              border=0></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD id=marquePic2 vAlign=top>
            </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

<SCRIPT language=Javascript>
<!--
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('marquePic1');
var FGDemo2=document.getElementById('marquePic2');
FGDemo2.innerHTML=FGDemo1.innerHTML;
function Marquee1(){
if(FGDemo.scrollLeft>=FGDemo1.scrollWidth){
FGDemo.scrollLeft=0;
}else{
FGDemo.scrollLeft++;
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)
}
-->
</SCRIPT>
</DIV>

</BODY></HTML>
发表于 2008-10-7 14:01:23 | 显示全部楼层
支持一下,踩一脚,板凳
发表于 2008-10-16 10:02:52 | 显示全部楼层
感觉不错哦:)
发表于 2008-11-17 13:56:03 | 显示全部楼层
支持一个  确实不错 还很实用 我正好缺少一个 来顶上吧
发表于 2009-4-23 16:56:28 | 显示全部楼层
这个在谷歌浏览器下有问题,动一会就停了
发表于 2009-8-5 18:52:30 | 显示全部楼层
<div class="div_linklist4_2">
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_1.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_2.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_3.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_4.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_5.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_6.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                        </div>




请问div的怎么滚动?????????????
发表于 2009-10-17 20:00:31 | 显示全部楼层
试了一下  的确挺好用  支持楼主把更多更好的脚本发出来给大家共享一下
发表于 2010-2-17 22:52:07 | 显示全部楼层
支持,学习中……
发表于 2010-4-20 11:41:35 | 显示全部楼层
这个结构真是怪吓人的,怎么不改成div的,非要table
发表于 2010-11-15 08:54:51 | 显示全部楼层
确实不错
发表于 2010-12-1 09:08:12 | 显示全部楼层
确实很不错,收藏
发表于 2011-3-11 10:24:29 | 显示全部楼层
挺实用的 ,谢谢奉献了哦!
发表于 2011-11-30 15:37:08 | 显示全部楼层
......和我收藏的那个一样,就是改了字样,是DIV的,原来是楼主的原创?

<SCRIPT language=Javascript>
<!--
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('marquePic1');
var FGDemo2=document.getElementById('marquePic2');
FGDemo2.innerHTML=FGDemo1.innerHTML;
function Marquee1(){
if(FGDemo.scrollLeft>=FGDemo1.scrollWidth){
FGDemo.scrollLeft=0;
}else{
FGDemo.scrollLeft++;
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)
}
-->
</SCRIPT>
发表于 2012-2-14 16:02:54 | 显示全部楼层
支持一个  确实不错 很实用
发表于 2012-2-14 17:24:44 | 显示全部楼层
不错,是好东西,收藏了先
发表于 2012-2-15 10:56:43 | 显示全部楼层
很好。
发表于 2012-3-5 02:47:26 | 显示全部楼层
顶一下  呵呵
发表于 2012-3-22 11:53:16 | 显示全部楼层
这个以前做过一个  也挺好用的
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-25 09:40 , Processed in 0.108534 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表