js实现图片推拉门效果代码实例


Posted in Javascript onMay 18, 2019

初学者。

推拉门是网页中常见的一种形式,通过JS实现比较简单。主要是通过getElement找到节点元素,然后对其进行相应的赋值即可。

新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作“门”的图片),styles(用来存放css文件),scripts(用来存放js文件)。然后在index.html中添加代码:

<!doctype html>
<html>
	<head>
	<meta charset="utf-8"/>
	<title>sliding doors</title>
	<link rel="stylesheet" href="styles/doors.css" rel="external nofollow" />
	<script src="scripts/doors.js"></script>
	</head>
	<body>
		<div id="container">
			<img src="images/door1.jpg" alt="柯南" title="柯南"/>
			<img src="images/door2.jpg" alt="柯南" title="柯南"/>
			<img src="images/door3.jpg" alt="柯南" title="柯南"/>
			<img src="images/door4.jpg" alt="柯南" title="柯南"/>
		</div>
	</body>
</html>

接着是styles目录下的doors.css:

#container{
	height:600px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
 
#container img{
	position:absolute;
	border-left:1px solid #ccc;
	display:block;
	left:0;
}

然后是scripts目录下的doors.js:

window.onload = function()
{
	var box = document.getElementById("container"); //获得容器对象
	var imgs = box.getElementsByTagName("img"); //获得图片对象数组
	imgWidth = imgs[0].offsetWidth; //图片宽度
	var exposeWidth = 100; //每张图片露出的宽度
	var boxWidth = imgWidth + exposeWidth * (imgs.length - 1);
	box.style.width = boxWidth + "px";
	
	//初始化图片位置
	function reset()
	{
		for(var i = 1; i < imgs.length; i ++)
		{
			imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";
		}
	} 
	reset();
	
	//开门时候每个图片应该左移的距离
	var translate = imgWidth - exposeWidth;
	//为每个图片添加事件
	for(var i = 0; i < imgs.length; i ++)
	{
		
		//自动执行函数
		(function(i){
			imgs[i].onmouseover = function()
			{
				//重置图片位置
				reset();
				for(var j = 1; j <= i; j ++)
				{
					imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
					
				}
			};
			
		})(i);
	}
};

这样即可实现推拉门效果。

效果如下,截图略微粗糙

js实现图片推拉门效果代码实例

以上所述是小编给大家介绍的js实现图片推拉门效果代码实例详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
详解js中let与var声明变量的区别
Apr 05 #Javascript
webpack中如何加载静态文件的方法步骤
May 18 #Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 #Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 #Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 #Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 #Javascript
You might like
解析php中反射的应用
2013/06/18 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
浅析php原型模式
2014/11/25 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
JS交换变量的方法
2015/01/21 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
Angular路由简单学习
2016/12/26 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
node内置调试方法总结
2018/02/22 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
深入探究Django中的Session与Cookie
2017/07/30 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
心理健康课教学反思
2014/02/13 职场文书
班组建设经验交流材料
2014/05/12 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技