夜鹰教程网-程序员的加油站
你好，欢迎来到夜鹰网！【去购买教程】
 当前位置：文章中心 >> 成都网站建设_成都网页设计
向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）
夜鹰教程网 来源：www.yyjcw.com 日期：2016-11-15 17:19:55
向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）</title>
</head>
<body><!--下面是向上滚动代码-->
<div id=lan27_com_top style=overflow:hidden;height:100;width:90;>
<div id=lan27_com_top1>
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
</div>
<div id=lan27_com_top2></div>
</div>
<script>
var speed=30
lan27_com_top2.innerHTML=lan27_com_top1.innerHTML //克隆lan27_com_top1为lan27_com_top2
function Marquee1(){
//当滚动至lan27_com_top1与lan27_com_top2交界时
if(lan27_com_top2.offsetTop-lan27_com_top.scrollTop<=0)  
lan27_com_top.scrollTop-=lan27_com_top1.offsetHeight //lan27_com_top跳到最顶端
else{
lan27_com_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
lan27_com_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
lan27_com_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id=lan27_com_bottom style=overflow:hidden;height:100;width:90;>
<div id=lan27_com_bottom1>
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
<img src="http://www.chaoqiang.com.cn/logo.gif">
</div>
<div id=lan27_com_bottom2></div>
</div>
<script>
var speed=30
lan27_com_bottom2.innerHTML=lan27_com_bottom1.innerHTML
lan27_com_bottom.scrollTop=lan27_com_bottom.scrollHeight
function Marquee2(){
if(lan27_com_bottom1.offsetTop-lan27_com_bottom.scrollTop>=0)
lan27_com_bottom.scrollTop+=lan27_com_bottom2.offsetHeight
else{
lan27_com_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
lan27_com_bottom.onmouseover=function() {clearInterval(MyMar2)}
lan27_com_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="lan27_com_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="lan27_com_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td><td><img src="http://www.chaoqiang.com.cn/logo.gif" width="88"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
</tr>
</table>
</td>
<td id="lan27_com_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
lan27_com_left2.innerHTML=lan27_com_left1.innerHTML
function Marquee3(){
if(lan27_com_left2.offsetWidth-lan27_com_left.scrollLeft<=0)
lan27_com_left.scrollLeft-=lan27_com_left1.offsetWidth
else{
lan27_com_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
lan27_com_left.onmouseover=function() {clearInterval(MyMar3)}
lan27_com_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="lan27_com_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="lan27_com_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
<td><img src="http://www.chaoqiang.com.cn/logo.gif"></td>
</tr>
</table>
</td>
<td id="lan27_com_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
lan27_com_right2.innerHTML=lan27_com_right1.innerHTML
function Marquee4(){
if(lan27_com_right.scrollLeft<=0)
lan27_com_right.scrollLeft+=lan27_com_right2.offsetWidth
else{
lan27_com_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
lan27_com_right.onmouseover=function() {clearInterval(MyMar4)}
lan27_com_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
<p></p>
</body>
</html>
复制链接 网友评论 收藏本文 关闭此页
上一条： 解决Dreamweaver代码不自动提示  下一条： 加速、再加速－HTML
夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！ 目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。 普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。 详细咨询QQ：1416759661   夜鹰教程网  基于角色的权限管理系统（c-s/b-s）。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
Dreamweaver CS4 SN以及注册机、激…
成都网站建设：私人网站建设的好处…
向上下左右不间断无缝滚动图片的效…
网站建设需要准备哪些资料？
ASP无限级分类实例教程
使用IE8常见问题问答
网页制作有关知识
如何加入网页代码的基本知识
QQ空间开心农场升级最快的方法
不让你的QQ好友删除你
HTML框架(Frames)
什么域名？如何注册域名？如何解析…
如何做好需求分析：需求管理是项目…
QQ远程协助后黑屏或花屏故障解决办…
专业化操作 Word 2007文档审阅技巧…
  最近更新
如何使用百度地图API一些简单的功…
C#正则表达式提取网址、标题、图片…
网站高并发解决思路(转)
安装好Discuz!NT论坛后首页是一片…
有哪些细节设计给你带来好的用户体…
抄袭来的东西进行拼装之后，属于我…
成都最便宜网站建设 QQ：14167596…
成都网站建设：私人网站建设的好处…
夜鹰教程网网站建设常见问题集锦
浅谈网站建设的十二大误区
网站建设需要准备哪些资料？
怎样才能写好一篇软文呢：越低俗越…
什么域名？如何注册域名？如何解析…
站长如何将网站的访客变为顾客？
夜鹰教程网打造成都私人网站建设的…

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号：蜀ICP备08011740号3