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 相关文章推荐
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
如何快速上手Vuex
Feb 14 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 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+MySQL插入操作实例
2015/01/21 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
两款万能的php分页类
2015/11/12 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
简单实现python画圆功能
2018/01/25 Python
详解python 爬取12306验证码
2019/05/10 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
python ssh 执行shell命令的示例
2020/09/29 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
室内设计专业毕业生求职信
2014/05/02 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
安全温馨提示语大全
2015/07/14 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Docker下安装Oracle19c
2022/04/13 Servers