首页 > 代码库 > JS实现鼠标移上去图片停止滚动移开恢复滚动效果
JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目。
首先,要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例,那个是一块块的的滚动==>实现图片的循环滚动 .
这次我们就做滚动区域是平滑循环滚动效果。
下边是布局的HTML代码,原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),
<div class=" ban_img"> <div class="in_img"> <div class="inside inside1"></div> <div class="inside inside2"></div> <div class="inside inside3"></div> <div class="inside inside4"></div> <div class="inside inside5"></div> <div class="inside inside6"></div> <div class="inside inside1"></div> <div class="inside inside2"></div> <div class="inside inside3"></div> <div class="inside inside4"></div> </div> </div>
下边是CSS样式,我加的是背景图,可跟实际情况选择(图片路径根据实际位置修改)
.ban_img{ height: 400px; .in_img{ width: 3000px; background-color: blue; .inside{ width: 300px; float: left; height: 400px; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; border: 3px solid #108A77; } .inside1{ background-image: url(../img/binzhilang.png); } .inside2{ background-image: url(../img/zhihui.png); } .inside3{ background-image: url(../img/jredu.png); } .inside4{ background-image: url(../img/sanyi.png); } .inside5{ background-image: url(../img/cimply.png); } .inside6{ background-image: url(../img/xingbake.png); } } }
实现循环滚动的JS很简单,为div(.in_img)加一个定时器就可以了,每10毫秒调整它的marginleft-1px,循环完一遍,计数器num清零
var scroll=document.getElementsByClassName("in_img"); var num=0; var time=setInterval(function(){ num--; scroll[0].style.marginLeft=num+"px"; if(num<=-1800){ num=0; } },10);
这样一来,平滑连续滚动的效果就可以实现了.
那么怎么实现标题所述效果呢?这也很简单,为div(.in_img)绑定两个事件来控制定时器就可以了。
首先添加鼠标移上去事件,来清除定时器
scroll[0].addEventListener("mouseover",function(){ clearInterval(time); });
然后添加鼠标移走事件,再恢复定时器
scroll[0].addEventListener("mouseout",function(){ time=setInterval(function(){ num--; scroll[0].style.marginLeft=num+"px"; if(num<=-1800){ num=0; } },10); })
这样一来,大功告成!
功能简单,代码不难,但很实用。人工手打,辛苦给点个推荐吧^_^
JS实现鼠标移上去图片停止滚动移开恢复滚动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。