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 ...
随机推荐
- apache用户认证、域名跳转、Apache访问日志（两种格式）
1.apache 设置,用户访问时 目录或文件的认证: 对目录的认证: <Directory /var/www/222> //指定认证的目录AllowOverride AuthConfig ...
- LeetCode - Number of Recent Calls
Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...
- MySQL Innodb Engine -- 文件格式(innodb_file_format)
======================================================== 在InnoDB 1.0.x版本之前,InnoDB 存储引擎提供了 Compact 和 ...
- 创建一个简单的terraform module
terraform module可以实现代码的复用,同时方便分享,下面创建一个简单的基于localfile && template provider 的module module ...
- Stateful Kubernetes Applications Made Easier: PSO and FlashBlade
转自:https://medium.com/@joshua_robinson/stateful-kubernetes-applications-made-easier-pso-and-flashbla ...
- Unity 官方文档学习
Manual Texture Components:https://docs.unity3d.com/Manual/comp-Textures.html Profiler:https://docs.u ...
- python, 用filter实现素数
# _*_ coding:utf-8 _*_ #step1: 生成一个序列def _odd_iter(): n = 1 while True: n = n + 1 yield n #Step2: 定义 ...
- celery + redis quick start
软件: redis server redis-server.exe 安装redis for python using pip 安装celery (redis) pip install -U &quo ...
- Golang 端口复用测试
先给出结论: 同一个进程,使用一个端口,然后连接关闭,大约需要30s后才可再次使用这个端口. 测试 首先使用端口9001连接服务端,发送数据,然后关闭连接,接着再次使用端口9001连接服务端,如果连接 ...
- 文件权限控制--umask
问题 有一个场景,在A机器上有一个可执行文件,将其压缩,然后拷贝到B机器上,解压,发现原来文件的可执行权限消失了. 原因 B机器上,当前解压用户的umask设置,限制了新创建文件的权限. umask是 ...