JavaScript之图片操作6
上一篇写的关于放大镜的，可能在实际开发中用的不是很多，接下来将的图片无缝滚动在实际工作中就是用的比较多的了。
如上图，通过定时器控制图片无缝滚动，当鼠标悬浮时停止滚动，鼠标离开，滚动继续。
主要原理是通过定位实现图片的移动，然后通过定时器实现滚动的效果，即无缝滚动。
首先是基础的结构
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;float:left;}
li{margin: 5px;border:3px double #00a67c;float:left;}
li img{width:150px;float:left;}
#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}
#indemo{width:800%;float:left;}
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<ul id="demo1">
<li><img src="img/pic1.jpg"></li>
<li><img src="img/pic2.jpg"></li>
<li><img src="img/pic3.jpg"></li>
<li><img src="img/pic4.jpg"></li>
<li><img src="img/pic5.jpg"></li>
<li><img src="img/pic6.jpg"></li>
<li><img src="img/pic7.jpg"></li>
</ul>
<ul id="demo2"></ul>
</div>
</div>
</body>
</html>
有了基本结构后，就要让图片动起来，为了实现图片的无缝滚动，将存放图片的ul进行复制，放在其后，模拟循环效果。其次，每当图片滚动到复制元素的最后一张图片时，就应该让图片重新回到最开始的状态再继续滚动，这样的话就形成了无缝循环滚动的效果。
<script type="text/javascript">
window.onload = function(){
var age = 20;
var tab = document.getElementById('demo');
var tab1 = document.getElementById('demo1');
var tab2 = document.getElementById('demo2');
tab2.innerHTML = tab1.innerHTML; function run(){
//tab1的宽度小于 tab被隐藏的宽度；
if(tab1.offsetWidth - tab.scrollLeft <=0 ){
//重置tab被隐藏的宽度
tab.scrollLeft -= tab1.offsetWidth;
}else {
tab.scrollLeft++;
}
};
var mymar = setInterval(run,age);
}
</script>
最后就是优化了，当鼠标悬浮时停止滚动，鼠标离开后继续滚动。
<script type="text/javascript">
tab.onmouseover = function(){
clearInterval(mymar);
}
tab.onmouseout = function(){
mymar = setInterval(run,age);
}
</script>
到此，我们就实现了最开始想要的效果了，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;float:left;}
li{margin: 5px;border:3px double #00a67c;float:left;}
li img{width:150px;float:left;}
#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}
#indemo{width:800%;float:left;}
</style> </head>
<body>
<div id="demo">
<div id="indemo">
<ul id="demo1">
<li><img src="img/pic1.jpg"></li>
<li><img src="img/pic2.jpg"></li>
<li><img src="img/pic3.jpg"></li>
<li><img src="img/pic4.jpg"></li>
<li><img src="img/pic5.jpg"></li>
<li><img src="img/pic6.jpg"></li>
<li><img src="img/pic7.jpg"></li>
</ul>
<ul id="demo2"></ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var age = 20;
var tab = document.getElementById('demo');
var tab1 = document.getElementById('demo1');
var tab2 = document.getElementById('demo2');
tab2.innerHTML = tab1.innerHTML; function run(){
if(tab1.offsetWidth - tab.scrollLeft <=0 ){
tab.scrollLeft -= tab1.offsetWidth;
}else {
tab.scrollLeft++;
}
};
var mymar = setInterval(run,age);
tab.onmouseover = function(){
clearInterval(mymar);
}
tab.onmouseout = function(){
mymar = setInterval(run,age);
}
}
</script>
</body>
</html>
完整详细代码链接：点这里
JavaScript之图片操作6的更多相关文章
- JavaScript之图片操作7
前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
- JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
- JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
- JavaScript之图片操作3
在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
- JavaScript之图片操作4
本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...
- JavaScript之图片操作2
在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
随机推荐
- centos7 启动mysql
密码无法登录问题: 在my.cnf 中加一句 skip-grant-tables : 重启mysql服务: mysql -uroot -p: USE mysql ; 进入后,修改密码 .UPDA ...
- 系统间通信——RPC架构设计
架构设计:系统间通信(10)——RPC的基本概念 1.概述经过了详细的信息格式.网络IO模型的讲解,并且通过JAVA RMI的讲解进行了预热.从这篇文章开始我们将进入这个系列博文的另一个重点知识体系的 ...
- （16）模型层Models - ORM的使用
需求:通过orm创建user表 先配置settings文件夹 连接数据库和配置数据库 Django的模块有两种 1.mysqlDB django内置的模块,只能在python2.X版本下用 2.py ...
- 流程控制之if
流程控制 假如把写程序比做走路,那我们到现在为止,一直走的都是直路,还没遇到过分叉口,想象现实中,你遇到了分叉口,然后你决定往哪拐必然是有所动机的.你要判断那条岔路是你真正要走的路,如果我们想让程序也 ...
- Project Euler 54
#include<bits/stdc++.h> using namespace std; ]; ]; ; map<char,int> mp; //map<char,cha ...
- hdu4289 Control 最大流最小割
You, the head of Department of Security, recently received a top-secret information that a group of ...
- python------模块定义、导入、优化 ------->re模块
该部分内容引用自:http://www.cnblogs.com/alex3714/articles/5161349.html 谢谢原博主的文章,只是自己学习,无其他使用. re模块 常用正则表达式符号 ...
- 深入浅出理解 COOKIE MAPPING
转载自:http://www.myttnn.com/digital-marketing/cookie-mapping-introduction/ 在RTB(实时竞价广告,Real-Time-Biddi ...
- C++中的继承和多继承
一.学习笔记 1.继承 class Student : public Person { ... } 2.继承时权限派生类中可以直接访问父类的protected成员,但是不能访问其private成员,若 ...
- KVM部署、使用、调优
背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高 云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...