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

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

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

下边是布局的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. DAM的使用结合串口和中断以及GPIO。

    DAM的使用结合串口和中断以及GPIO. 当我学到DMA这章的时候就意味着我已经学完了,GPIO里的LED,按键,还有就是串口发送数据. 那么下面就来总结下前段时间所学的知识(因为接下来有断时间我是没 ...

  2. IC卡读卡器在安卓(android)下的开发

    友我科技推出IC卡读卡器的Android开发包,软件工程师只需要导入jar类库文件,就可以在App中操作IC卡读卡器了. 目前IC卡读卡器的Android开发包开放操作的卡类型有:M1, S50, U ...

  3. Ecplise 中 加载JDBC 连接 Mysql 数据库读取数据

    准备工作 首先下载 JDBC 驱动,下载地址https://www.mysql.com/products/connector/ 将压缩包解压得到文件 mysql-connector-java-5.1. ...

  4. (读书笔记)函数参数浅析-JavaScript高级程序设计(第3版)

    ECMAScript函数不介意传递的参数个数,因为在其内部是用一个数组进行表示的.在函数体内可以通过arguments对象来访问这个参数数组,就像我们正常访问数组一样处理. arguments对象只是 ...

  5. Google官方MVP模式示例项目解析 todo-mvp

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6700668.html 引言:在Google没有给出一套权威的架构实现之前,很多App项目在架构方面都有或多 ...

  6. ES6 深入let的作用域

    说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...

  7. xshell配色Solarized Dark

    转自:xshell配色Solarized Dark [Solarized_Dark] text(bold)= magenta(bold)=6c71c4 text= white(bold)=fdf6e3 ...

  8. Dubbo的使用简介

    Dubbo是什么 官方定义 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000, ...

  9. bootstrap快速入门笔记(二)-栅格系统,响应式类

    一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...

  10. spring cloud 集成 swagger2 构建Restful APIS 说明文档

    在Pom.xml文件中引用依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...