JS向上下左右不间断无缝滚动图片代码(兼容IE火狐)

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量996 收藏
点赞数
分类专栏： WEB前端开发 文章标签： ie function border div xhtml table 
<!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>JS向上下左右不间断无缝滚动图片代码(兼容火狐和IE)</title>
</head>

<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
  <div id="colee1">
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
  </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.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
  <div id="colee_bottom1">
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
  </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.οnmοuseοver=function() {clearInterval(MyMar2)}
colee_bottom.οnmοuseοut=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><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></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.οnmοuseοver=function() {clearInterval(MyMar3)}
colee_left.οnmοuseοut=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><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></td>
            <td><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></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.οnmοuseοver=function() {clearInterval(MyMar4)}
colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
</body>
</html>
JS向上下左右不间断无缝滚动图片代码(兼容IE火狐)

yanli_xu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
11-26
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动) **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆， **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置， **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 Code highlighting produced by Actipro Code
向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）
08-18
本文将详细探讨如何实现一个“向上下左右不间断无缝滚动图片的效果”，并确保该效果在火狐（Firefox）和IE（Internet Explorer）浏览器上兼容。 首先，我们需要了解无缝滚动的核心原理。这种效果通常通过JavaScript...
JS无间隙滚动向左、向右、向上、向下兼容IE,firefox
weixin_33712987的博客
06-06 112
  代码如下: boxmove(d1,d2,d3,e,obj) d1 = 外围容器 d2 = 内容 d3 = 复制d2的内容接替循环滚动 e = 方向与方法 1,2,3,4 = 自动滚动，分别对应：上,右,下,左 "top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左 obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。 ...
JS不间断无缝滚动 (兼容火狐和IE)
weixin_34235371的博客
02-07 74
Html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www...
兼容ie8的轮播图
qq_41893686的博客
05-12 355
JS插件：http://www.superslide2.com/param.html 效果图： 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e.
图片无缝滚动兼容ie6
Bling_Bling_的博客
06-24 528
图片无缝滚动，兼容ie6，以下例子，自己放图片就可以实现： jquery图片左右连续滚动 *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;
兼容IE、FireFox、Safari多浏览器的图片不间断滚动
11-25
以上就是实现兼容IE8、Firefox、Safari等多浏览器的图片不间断滚动的基本步骤。通过JavaScript和CSS的巧妙结合，我们可以创建一个在各种环境下都能良好运行的图片滚动效果。记住，测试和调试是确保兼容性的关键，要...
js 实现无缝滚动 兼容IE和FF
12-10
在JavaScript中实现无缝滚动是一种常见的...通过以上步骤和代码，我们可以创建一个兼容IE和Firefox的无缝滚动效果。这个实现不仅限于`<ul>`和`<li>`，也可以应用于其他HTML元素，只需适当调整CSS和JavaScript代码即可。
不间断无缝滚动图片
08-27
在网页设计中，"不间断无缝滚动图片"是一种常见的视觉效果，它通过JavaScript或者CSS3等技术实现，使得图片能够连续不断地、平滑地从一端滚动到另一端，给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...
30多种上下左右滚动代码兼容各种浏览器
12-23
本文将详细讲解30多种上下左右滚动代码，这些代码经过优化，能够兼容各种主流浏览器，包括IE、Firefox、Chrome、Safari和Opera等。 一、连续滚动 连续滚动是最基础的滚动效果，它可以让文字或图片持续不断地从一侧...
DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性
08-11
DIV滚动效果JavaScript示例，可用于实现新闻滚动效果，很简洁。包含了上下左右4个方向。 测试可兼容于IE、FireFox、Chrome、Opera、Safari等浏览器。
dede 向左滚动代码
03-11
dede 向左滚动代码,使用这个代码可以直接放上去通用.
兼容ie和ff的无缝滚动
justsoloving的专栏
08-06 529
<br /><html><br /><head><br />    <title></title><br />    <script language="javascript" type="text/javascript"><br />        function VScrollPanel() {<br />            this.width = null; //滚动范围宽度<br />            this.height = null; //滚动范围高度<br />        
上下两图的横向滚动效果（可自动可手动）-兼容IE8和Chrome浏览器!
zyytaiyame的博客
02-23 894
上下两图的横向滚动效果（可自动可手动）-兼容IE8和Chrome浏览器!在线测试打包下载
js 图片无缝滚动 横向 纵向
lbeller的博客
12-06 1312
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
js 实现无缝滚动 兼容IE FF
创业的程序员
10-11 757
js 实现无缝滚动 兼容IE FF，大家可以看看。   原理解析： 1、首先给容器设定高度或宽度，比如ul，设置ul高40px;overflow:hidden； 2、容器高度设定后，内容的高度超出40px，超过部分溢出，被隐藏，scrollTop属性可用，这一点可以用overflow:scroll来看效果； 3、改变容器的scrollTop（上下滚动）属性的值，让内容上下
原生js实现轮播图，兼容IE
cmchenmei的博客
04-10 1002
html部分：<div class ="wrapper"> <ul class="sliderPage"> <li> <img src ="./image/1.png"> </li> <li> <img src ="./image/2.png"> </li> <li>
DIV+CSS+JS实现不间断横向滚动代码
科比不来it
02-23 1788
DIV+CSS+JS实现不间断横向滚动代码 横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;he
第二章-在HTML中使用JavaScript
最新发布
2301_79858637的博客
07-07 1246
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
CSS兼容IE和Firefox的技巧集合
10-27
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值