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 ...
随机推荐
- DAM的使用结合串口和中断以及GPIO。
DAM的使用结合串口和中断以及GPIO. 当我学到DMA这章的时候就意味着我已经学完了,GPIO里的LED,按键,还有就是串口发送数据. 那么下面就来总结下前段时间所学的知识(因为接下来有断时间我是没 ...
- IC卡读卡器在安卓(android)下的开发
友我科技推出IC卡读卡器的Android开发包,软件工程师只需要导入jar类库文件,就可以在App中操作IC卡读卡器了. 目前IC卡读卡器的Android开发包开放操作的卡类型有:M1, S50, U ...
- Ecplise 中 加载JDBC 连接 Mysql 数据库读取数据
准备工作 首先下载 JDBC 驱动,下载地址https://www.mysql.com/products/connector/ 将压缩包解压得到文件 mysql-connector-java-5.1. ...
- (读书笔记)函数参数浅析-JavaScript高级程序设计(第3版)
ECMAScript函数不介意传递的参数个数,因为在其内部是用一个数组进行表示的.在函数体内可以通过arguments对象来访问这个参数数组,就像我们正常访问数组一样处理. arguments对象只是 ...
- Google官方MVP模式示例项目解析 todo-mvp
转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6700668.html 引言:在Google没有给出一套权威的架构实现之前,很多App项目在架构方面都有或多 ...
- ES6 深入let的作用域
说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...
- xshell配色Solarized Dark
转自:xshell配色Solarized Dark [Solarized_Dark] text(bold)= magenta(bold)=6c71c4 text= white(bold)=fdf6e3 ...
- Dubbo的使用简介
Dubbo是什么 官方定义 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000, ...
- bootstrap快速入门笔记(二)-栅格系统,响应式类
一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...
- spring cloud 集成 swagger2 构建Restful APIS 说明文档
在Pom.xml文件中引用依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...