`

JS不间断无缝滚动 (兼容火狐和IE)

无缝滚动滚动图片滚动特效JS特效 
阅读更多 
<!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=utf-8" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)/title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></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="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></p>
<p><img src="oyzd.img"></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="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
<!--oyzd-->
//使用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="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></p></td>
<td><p><img src="oyzd.img"></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>

 

1
顶
1
踩
分享到：
| 因为无知，却又不去探索而失去
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）

    本文将详细探讨如何实现一个“向上下左右不间断无缝滚动图片的效果”，并确保该效果在火狐（Firefox）和IE（Internet Explorer）浏览器上兼容。 首先，我们需要了解无缝滚动的核心原理。这种效果通常通过JavaScript...

    不间断无缝滚动图片

    在网页设计中，"不间断无缝滚动图片"是一种常见的视觉效果，它通过JavaScript或者CSS3等技术实现，使得图片能够连续不断地、平滑地从一端滚动到另一端，给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...

    兼容IE、FireFox、Safari多浏览器的图片不间断滚动

    以上就是实现兼容IE8、Firefox、Safari等多浏览器的图片不间断滚动的基本步骤。通过JavaScript和CSS的巧妙结合，我们可以创建一个在各种环境下都能良好运行的图片滚动效果。记住，测试和调试是确保兼容性的关键，要...

    js 实现无缝滚动 兼容IE和FF

    在JavaScript中实现无缝滚动是一种常见的...通过以上步骤和代码，我们可以创建一个兼容IE和Firefox的无缝滚动效果。这个实现不仅限于`&lt;ul&gt;`和`&lt;li&gt;`，也可以应用于其他HTML元素，只需适当调整CSS和JavaScript代码即可。

    无缝文字滚动方案

    2. 兼容性：确保代码兼容主流浏览器，包括IE、Chrome、Firefox、Safari等。 3. 无障碍性：考虑到屏幕阅读器和其他辅助技术，滚动效果应不影响信息的可访问性。 4. 用户体验：滚动速度不宜过快，要提供清晰的开始和...

    jQuery kxbdMarquee 无缝滚动

    3. **兼容性好**：作为jQuery插件，kxbdMarquee 兼容大部分现代浏览器，包括IE8+，以及Chrome、Firefox、Safari和Opera等。 4. **易用性强**：通过简单的jQuery选择器和方法调用即可启用滚动效果，减少了开发时间和...

    30多种上下左右滚动代码兼容各种浏览器

    本文将详细讲解30多种上下左右滚动代码，这些代码经过优化，能够兼容各种主流浏览器，包括IE、Firefox、Chrome、Safari和Opera等。 一、连续滚动 连续滚动是最基础的滚动效果，它可以让文字或图片持续不断地从一侧...

    javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

    在多浏览器环境下，尤其是考虑到IE和Firefox等浏览器的兼容性问题，编写兼容的代码就显得尤为重要。 该滚动脚本通过函数`boxmove(d1, d2, d3, e, obj)`实现。函数参数如下： - `d1`：外围容器元素的ID，用于包含...

    通用的JS滚动封装类！能够满足你所有的滚动开发需求！

    6. **兼容性**：考虑到不同浏览器之间的差异，MSClass类进行了良好的兼容性处理，确保在主流浏览器如Chrome、Firefox、Safari、Edge和旧版IE中都能正常工作。 7. **API接口**：提供了丰富的API接口供开发者调用，如...

    超级经典一套鼠标控制左右滚动图片带自动翻滚

    最后，"图片滚动"和"向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)"涉及的是图片轮播技术。图片轮播是一种让多张图片在一定时间内自动切换展示的方法，通常包含左右箭头控制，可以设置动画效果，使切换过程平滑...

    无间断滚动的新闻文章列表 多浏览器兼容

    多浏览器兼容意味着这种滚动效果需要在不同的浏览器（如Chrome、Firefox、Safari、Edge以及IE等）上都能正常工作。 在实现无间断滚动时，首先需要创建一个包含新闻文章的列表结构，例如使用HTML的`&lt;ul&gt;`和`&lt;li&gt;`...

    jquery.kxbdmarquee插件

    无缝滚动是一种常见的网页元素动态展示方式，它能让内容在页面上不间断地滚动，为用户带来流畅的视觉体验。 ### 插件安装与依赖 在使用`jquery.kxbdmarquee`之前，确保已将jQuery库引入到项目中。你可以通过CDN...

Magicbox
Global site tag (gtag.js) - Google Analytics