<script type="text/javascript">
/*
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动)
**
**实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,
**因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。
*/
var speed1=0 //图片左移的速度
var MyMar1 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar2 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var lefthit=0 //记录左移按钮点击次数
var righthit=0 ////记录右移按钮点击次数
//调用右移方法前,先让左移停止(clearInterval清除setInterval对方法的调用)
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图片左移的方法
function toleft(){
//判断是否是第一次按下左移按钮(图片往左开始移动的时候,不会在调用此方法。只有当按了右移按钮时,才会把lefthit重设为0)
if(lefthit==0){
speed1=30;//图片左移速度时间毫秒
//让的内容demo2与demo1内容一样
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
//上行图片移动的方法
function Marquee1(){
//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
//demo跳回初始位置
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
}
else{
//demo开始重新移动
document.getElementById("demo").scrollLeft++
}
}
//setInterval让Marquee1方法每隔多少秒执行一次,并把返回的调用次数ID
MyMar1=setInterval(Marquee1,speed1)
//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时,第一行和第二行的图片都会停止
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//当鼠标移除demo时,重新setInterval让方法执行,这样图片会继续移动
document.getElementById("demo").onmouseout=function()
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下面的方法与上面的方法一样,用于第二行的图片向左移动
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee2(){
if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
else{
document.getElementById("demo_a").scrollLeft++
}
}
MyMar2=setInterval(Marquee2,speed1)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar2);clearInterval(MyMar1)}
document.getElementById("demo_a").onmouseout=function()
{MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
lefthit=1 //设置左移按钮,当按了一次左移后(不管按多少次),在没按右移按钮之前,toleft方法里的的代码不会再被执行
righthit=0 //把右移按钮设为0,这样当下次点了右移按钮的时候,以便toright方法被调用
}
}
var MyMar3 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar4 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var speed2=0 //图片右移的速度
//调用移左方法前,先让右移停止(clearInterval清除setInterval对方法的调用)
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}
//图片右移方法(与图片左移方法思路一样)
function toright(){
//判断是否是第一次按下右移按钮(图片往右开始移动的时候,不会在调用此方法。只有当按了左移按钮时,才会把righthit重设为0)
if(righthit==0){
speed2=30;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee_a(){
if(document.getElementById("demo").scrollLeft<=0){
document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
}
else{
document.getElementById("demo").scrollLeft--
}
}
MyMar3=setInterval(Marquee_a,speed2)
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
document.getElementById("demo").onmouseout=function()
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee_b(){
if(document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
}
else{
document.getElementById("demo_a").scrollLeft--
}
}
MyMar4=setInterval(Marquee_b,speed2)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar4);clearInterval(MyMar3)}
document.getElementById("demo_a").onmouseout=function()
{MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
righthit=1 //设置右移按钮,当按了一次右移按钮后(不管按多少次),在没按左移按钮之前,toright方法里的的代码不会再被执行
lefthit=0 //把左移按钮设为0,这样当下次点了左移按钮的时候,以便toleft方法被调用
}
}
</script>
- 描述: 移动效果示图
- 大小: 32.8 KB
- demo.rar (764.6 KB)
- 描述: 演示Demo
- 下载次数: 1389
分享到:
相关推荐
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动...
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE),效果比较好
符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm 符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm
IE6、IE7、Firefox之间的兼容写法IE6、IE7、Firefox之间的兼容写法
自己结合网上资源做的js无缝图片滚动,IE78,firefox,chrome测试
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
edgesun焦点图组件,图片滑动效果,带示例,支持IE/firefox/chrome 调用简单,只需一行代码: NewEdgesunImgSlider(imgW, imgH, titlePos, indexFlag, imgDirection, waitTime, images, titles) 说明: imgW:图片...
兼容firefox火狐、IE6IE7IE8加入收藏,设为首页代码
图片动态循环滚动js代码,兼容IE6,7,8 火狐
PNG图片透明兼容IE6和火狐示例 引用iepngfix.htc使背景PAN图片透明 打包中已经包含iepngfix.htc文件
设为首页、加入收藏代码,兼容IE和fireFox设为首页、加入收藏代码,兼容IE和fireFox
edgesun焦点图组件,带示例,支持IE/firefox/chrome,在IE下可显示46种变化效果 调用简单,只需一行代码: NewEdgesunImgChange(imgWidth, imgHeight, titlePosition, indexFlag, waitTime, changeType, defImg, ...
图片上传 预览 兼容 IE 6/7/8 firefox / 新版firefox
jquery.nicescroll兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条,资源附有相关示例,使用简单便利。
将此JS文件包含在网页中,可实现3个浏览器中部分函数功能兼容!
图片滚动展示单击放大代码,使用prettyPhoto插件,代码兼容:IE6,IE7,IE8,Firefox,chrome
兼容IE firefox收藏设为主页兼容IE firefox收藏设为主页