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实现鼠标移上去图片停止滚动移开恢复滚动效果的更多相关文章
- JS实现 鼠标放上去 图片自动放大的效果
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- 鼠标放上去图片慢慢变大js 或 变大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现鼠标滚动事件,兼容IE9,FF,Chrome.
<!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
随机推荐
- Windows安装mysql-python提示:error: Microsoft Visual C++ 9.0 is required
Windows安装mysql-python提示:error: Microsoft Visual C++ 9.0 is required,Get it from http://aka.ms/vcpyth ...
- JS滚动加载
var one = true;//设置一个全局变量 $(window).scroll(function () { var hight = document.body.scrollHeight - do ...
- es6基础系列一:let和const
let 声明变量,可以说是具有作用域的var,用于声明变量,主要规则如下: 1 let声明的变量拥有块级作用域 { let i = 1; console.log(i); // 1 } console. ...
- 【HDOJ 1215】七夕节
七夕节 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissio ...
- angular apply
<div ng-controller="firstController"> {{date}} </div> <script> var first ...
- SELECT中(非常)常用的子查询操作
MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...
- 使用validator-api来验证spring-boot的参数
作为服务端开发,验证前端传入的参数的合法性是一个必不可少的步骤,但是验证参数是一个基本上是一个体力活,而且冗余代码繁多,也影响代码的可阅读性,所以有没有一个比较优雅的方式来解决这个问题? 这么简单的问 ...
- CSS3弹性伸缩布局(中)——flexbox布局
混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...
- C++随机数rand(), srand()
c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...
- endsWith is not a function解决方案
在写javascript脚本时,用某些方法,有时候会碰到"XXX is not a function"之类的报错. 出现这种情况,主要是因为某些方法在低版本浏览器上不支持.比如说& ...