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 相关文章推荐
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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
基于mysql的bbs设计(一)
2006/10/09 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
学校标语大全
2014/06/19 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Golang jwt身份认证
2022/04/20 Golang