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 Select操作大集合
May 26 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
js实现轮播图特效
May 28 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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 ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
简述JS控制台的使用
2018/07/15 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python使用response.read()接收json数据的实例
2018/12/19 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
党员查摆剖析材料
2014/10/10 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
演讲开场白台词大全
2015/05/29 职场文书
长江七号观后感
2015/06/11 职场文书
孟佩杰观后感
2015/06/17 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书