好资源导航 » 文章资讯 » JS简单封装的图片无缝滚动效果示例【测试可用】

JS简单封装的图片无缝滚动效果示例【测试可用】

2024-02-27 03:27:02 46

本文实例讲述了JS简单封装的图片无缝滚动效果。分享给大家供大家参考，具体如下：





无缝滚动图片示例-F-BLOG

ul{list-style:none;padding:0px;margin:0px;}
#demo1ul,#demo2ul{width:400px;}
#demo1li,#demo2li{float:left;}


function$(id){
returndocument.getElementById(id);
}
functionMarquee(id,toFollow,speed)
{
vardoScroll;
varscrollBox_x=""+$(id).innerHTML+""+$(id).innerHTML+"";
varscrollBox_y=""+$(id).innerHTML+""+$(id).innerHTML+"";
varbegin=function(){
switch(toFollow){
case"left":
$(id).innerHTML=scrollBox_x;
doScroll=setInterval(function(){
if($(id).scrollLeft==$(id+"abox").offsetWidth)$(id).scrollLeft=0;
$(id).scrollLeft++;
},speed);
break;
case"right":
$(id).innerHTML=scrollBox_x;
doScroll=setInterval(function(){
if($(id).scrollLeft<=0)$(id).scrollLeft=$(id+"bbox").offsetWidth;
$(id).scrollLeft--;
},speed);
break;
case"top":
$(id).innerHTML=scrollBox_y;
doScroll=setInterval(function(){
if($(id).scrollTop==$(id+"abox").offsetHeight)$(id).scrollTop=0;
$(id).scrollTop++;
},speed);
break;
case"bottom":
$(id).innerHTML=scrollBox_y;
doScroll=setInterval(function(){
if($(id).scrollTop<=0)$(id).scrollTop=$(id+"bbox").offsetHeight;
$(id).scrollTop--;
},speed);
break;
}
}
begin();
$(id).onmouseover=function(){clearInterval(doScroll);}
$(id).onmouseout=function(){begin();}
}
window.onload=function(){
Marquee("demo2","left",30);
Marquee("demo1","right",20);
Marquee("demo3","top",30);
Marquee("demo4","bottom",30);
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

JS简单封装的图片无缝滚动效果示例【测试可用】

热门推荐

随机推荐