版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词：
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
网页特效
>> 正文
[
关闭窗口
]
可以上下左右滚动的图片(兼容IE和火狐firefox)
发布日期：2011-10-08
点击：4916
<!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=gb2312" /> <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)丨zdbase-站点基地丨www.zdbase.com</title> </head> <body><!--下面是向上滚动代码--> 告诉你一个应有尽有的网页特效网址：<a href="http://www.zdbase.com">zdbase-站点基地丨www.zdbase.com</a> <hr /> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src="/images/1.jpg"></p> <p><img src="/images/2.jpg"></p> <p><img src="/images/3.jpg"></p> <p><img src="/images/4.jpg"></p> <p><img src="/images/5.jpg"></p> <p><img src="/images/6.jpg"></p> <p><img src="/images/7.jpg"></p> <p><img src="/images/8.jpg"></p> <p><img src="/images/5.jpg"></p> </div> <div id="colee2"></div> </div> <script> var speed=30; var colee2=document.getElementById("colee2"); var colee1=document.getElementById("colee1"); var colee=document.getElementById("colee"); colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2 function Marquee1(){ //当滚动至colee1与colee2交界时 if(colee2.offsetTop-colee.scrollTop<=0){ colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端 }else{ colee.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 colee.onmouseover=function() {clearInterval(MyMar1)} //鼠标移开时重设定时器 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> <div id="colee_bottom1"> <p><img src="/images/1.jpg"></p> <p><img src="/images/2.jpg"></p> <p><img src="/images/3.jpg"></p> <p><img src="/images/4.jpg"></p> <p><img src="/images/5.jpg"></p> <p><img src="/images/6.jpg"></p> <p><img src="/images/7.jpg"></p> <p><img src="/images/8.jpg"></p> <p><img src="/images/5.jpg"></p> </div> <div id="colee_bottom2"></div> </div> <script> var speed=30 var colee_bottom2=document.getElementById("colee_bottom2"); var colee_bottom1=document.getElementById("colee_bottom1"); var colee_bottom=document.getElementById("colee_bottom"); colee_bottom2.innerHTML=colee_bottom1.innerHTML colee_bottom.scrollTop=colee_bottom.scrollHeight function Marquee2(){ if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) colee_bottom.scrollTop+=colee_bottom2.offsetHeight else{ colee_bottom.scrollTop-- } } var MyMar2=setInterval(Marquee2,speed) colee_bottom.onmouseover=function() {clearInterval(MyMar2)} colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} </script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <div id="colee_left" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="/images/1.jpg"></p></td> <td><p><img src="/images/2.jpg"></p></td> <td><p><img src="/images/3.jpg"></p></td> <td><p><img src="/images/4.jpg"></p></td> <td><p><img src="/images/5.jpg"></p></td> <td><p><img src="/images/6.jpg"></p></td> <td><p><img src="/images/7.jpg"></p></td> </tr> </table> </td> <td id="colee_left2" valign="top"></td> </tr> </table> </div> <script> //使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2"); var colee_left1=document.getElementById("colee_left1"); var colee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <div id="colee_right" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_right1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="images/1.jpg"></p></td> <td><p><img src="images/2.jpg"></p></td> <td><p><img src="images/3.jpg"></p></td> <td><p><img src="images/4.jpg"></p></td> <td><p><img src="images/5.jpg"></p></td> </tr> </table> </td> <td id="colee_right2" valign="top"></td> </tr> </table> </div> <script> var speed=30//速度数值越大速度越慢 var colee_right2=document.getElementById("colee_right2"); var colee_right1=document.getElementById("colee_right1"); var colee_right=document.getElementById("colee_right"); colee_right2.innerHTML=colee_right1.innerHTML function Marquee4(){ if(colee_right.scrollLeft<=0) colee_right.scrollLeft+=colee_right2.offsetWidth else{ colee_right.scrollLeft-- } } var MyMar4=setInterval(Marquee4,speed) colee_right.onmouseover=function() {clearInterval(MyMar4)} colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} </script> <!--向右滚动代码结束--> </body> </html> <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.zdbase.com" target="_blank">站点基地网页特效</a>丨zdbase.com 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
相关文章
鼠标悬停图标滚动一下效果原理
鼠标悬停图片稍微放大效果，网站常用
windows server 2008 ...
可以上下左右滚动的图片(兼容IE和火狐f...
整个页面图形整合成一张图片做背景的使用方...
围绕图片的文字做法
随滚动条动态滑动的图片
一行文字自动向上滚动代码
CSS控制滚动条颜色
删除图片上文字的几种方法
网页里的图片在CSS里定义了样式无法另存...
网页图片如何选择使用GIF格式还是JPG...
用鼠标搬移图片
按住鼠标左键上下运动可以滚动页面
跟随鼠标的图片，有变化的哦
与以往不同的跟随鼠标的滚动文字
围绕图片疯狂旋转的花朵
跟随鼠标的弹性效果的运动图片
图片列表使用控件每行显示固定列数不能按照...
跟随鼠标的图片
JS动态平滑滚动菜单效果
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计
