这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目。

首先,要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例,那个是一块块的的滚动==>实现图片的循环滚动 .

这次我们就做滚动区域是平滑循环滚动效果。

下边是布局的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实现鼠标移上去图片停止滚动移开恢复滚动效果的更多相关文章

  1. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  2. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  3. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  4. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  5. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  6. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  7. 鼠标放上去图片慢慢变大js 或 变大

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS实现鼠标滚动事件,兼容IE9,FF,Chrome.

    <!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...

  9. iOS 图片轮播图(自动滚动)

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

随机推荐

  1. 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 ...

  2. JS滚动加载

    var one = true;//设置一个全局变量 $(window).scroll(function () { var hight = document.body.scrollHeight - do ...

  3. es6基础系列一:let和const

    let 声明变量,可以说是具有作用域的var,用于声明变量,主要规则如下: 1 let声明的变量拥有块级作用域 { let i = 1; console.log(i); // 1 } console. ...

  4. 【HDOJ 1215】七夕节

    七夕节 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...

  5. angular apply

    <div ng-controller="firstController"> {{date}} </div> <script> var first ...

  6. SELECT中(非常)常用的子查询操作

    MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...

  7. 使用validator-api来验证spring-boot的参数

    作为服务端开发,验证前端传入的参数的合法性是一个必不可少的步骤,但是验证参数是一个基本上是一个体力活,而且冗余代码繁多,也影响代码的可阅读性,所以有没有一个比较优雅的方式来解决这个问题? 这么简单的问 ...

  8. CSS3弹性伸缩布局(中)——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...

  9. C++随机数rand(), srand()

    c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...

  10. endsWith is not a function解决方案

    在写javascript脚本时,用某些方法,有时候会碰到"XXX is not a function"之类的报错. 出现这种情况,主要是因为某些方法在低版本浏览器上不支持.比如说& ...