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); })
这样一来,大功告成!
功能简单,代码不难,但很实用。人工手打,辛苦给点个推荐吧^_^
转载于:https://www.cnblogs.com/cherishli/p/6920624.html
JS实现鼠标移上去图片停止滚动移开恢复滚动效果相关推荐
- html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
- JS实现鼠标中心放大图片功能原理及实例演示
版权声明:本文为博主原创文章,未经博主允许不得转载. 在制作网页的过程中,特别是对于浏览图片的网页,难免会涉及实现图片放大缩小及拖拽的功能,一般上述的功能很好实现,但是很多小伙伴发现其实有一个东西很难 ...
- JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果(效果演示地址:http://www.baidu.com/search/baike/usertask/mingmantianxia/). 在鼠标放到图片上, 图片会有个上下抖动 ...
- js定义鼠标经过变换图片
function changeImg(id, path) { document.getElementByIdx_x(id).src=path; } 示例: <a href="#&quo ...
- 利用js点击小眼睛图片实现转换明文暗码的效果
明文暗码:实际上就是密码框和文本框的切换. 看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了. HTML ...
- 点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
- 鼠标移至图片后抖动的JS代码
代码简介: 仿QQ的窗口抖动特效,鼠标移到到图片上面,图片就开始疯狂的抖动,好像对你的鼠标过敏一样,比较有意思,有会你的网页增加了修改功能. 代码内容: View Code <html>& ...
- 关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...
- js实现图片滚动以及点击切换效果
js可以实现多张图片自动滚动的效果,且鼠标移上去则会停止移动,鼠标移开则会继续滚动,点击滚动中的某一张图片则会实现从另外一个地方显示(放大,且鼠标移上去会放大)的效果. 点击链接查看效果:http:/ ...
最新文章
- iOS 4.2 SDK安装
- arcgis python编程案例-ArcGIS Python编程案例-电子资料链接
- linux版本的edge多网页标签(tag)不见了咋办
- 福建信息技术学院计算机系男生宿舍怎么样,广西职业技术学院宿舍怎么样
- [Java基础]抽象类基础
- Linux下获取文件编译的时间
- 软件工程作业 - word count
- Parameter '**' not found. Available parameters are [0, 1, param1, param2]解决办法
- php get 分页,PHP_codeigniter实现get分页的方法,本文实例讲述了codeigniter实现ge - phpStudy...
- 代码和mysql服务器编码不一致_PL/SQL Developer教程:解决oracle服务器端和客户端字符编码不一致问题...
- 关于Navicat 连接mysql报11001错误
- 探讨下在Delphi里面进程之间的数据共享
- js 技巧 (十)广告JS代码效果大全 【3】
- iOS App 调用QQ客户端,发起临时会话
- AVR PIC单片机视频教程
- 读书笔记(10)网络规划与设计
- Landsat系列卫星遥感影像数据USGS中批量下载多张图像的方法
- 关键词排名的查询方法
- 高并发核心技术Redis系列(七)--------Jedis操作Redis
- Hyper-V的虚拟化架构