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

初学者。

推拉门是网页中常见的一种形式，通过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实现图片推拉门效果代码实例详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js图片滚动效果时间可随意设定当鼠标移上去时停止

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo

  • JS简单的轮播的图片滚动实例

    [javascript]  复制代码 代码如下: var forimg = function (foritem, hoverStop, defaultfor) {          var _foritem = foritem.constructor == jQuery ? foritem : $(foritem);          var imgarr = [              { "z-index": 1, "width": 100, "he

  • javascript 另一种图片滚动切换效果思路

    先说一种最普遍的思路: 把图片们用ul之类的包起来,并设置float.然后设置这个ul本身为absolute定位,其父标签用relative定位.通过设置ul的left或top值,实现图片队列的滚动效果 特点: 只操作一个html元素(即上文的ul),对系统开销小:滚到头会回滚:从大序号滚动到小序号也会回滚:从最后序号滚动到第一个,会"咻"的一下把所有中间的图片也路过一次. 另一种思路就是我在XScroll.js里实现的思路,所有图片用绝对定位.具体看那篇文章吧. XScroll.js

  • 解析javascript瀑布流原理实现图片滚动加载

    解析javascript瀑布流原理实现图片滚动加载

    先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

  • javascript 不间断的图片滚动并可点击

    css: 复制代码 代码如下: <style type="text/css"> .rollBox { width: 704px; overflow: hidden; padding: 12px 0 5px 6px; } .rollBox .LeftBotton { height: 52px; width: 19px; background: url(jt.gif) no-repeat 11px 0; overflow: hidden; float: left; displa

  • js实现鼠标经过时图片滚动停止的方法

    本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js实现网站首页图片滚动显示

    复制代码 代码如下: <div id="demo"> <div id="indemo"> <div id="demo1"> <asp:Repeater ID="Pro_List" runat="server"> <ItemTemplate> <a href="/Product/html/<%#Eval("id&quo

  • js+div实现图片滚动效果代码

    横向 <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" style="white-space:nowrap;padding:0;"

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

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

    初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo

  • JS实现图片幻灯片效果代码实例

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg" width="400px" height="300px" /></li> <li><img src="images/2.jpg" width="400px" height=&quo

  • js实现图片轮换效果代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)

    漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)

    在线演示 http://img.jb51.net/online/tab08/index.htm li,ul{margin:0;padding:0;list-style-type:0} body{background:#eee; text-align:center;} li img{vertical-align:bottom; } .dhooo_tab{ width:460px; margin:10px; background:#fff url(images/main_bg.gif) repeat

  • js带前后翻页的图片切换效果代码分享

    js带前后翻页的图片切换效果代码分享

    本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

  • js钢琴按钮波浪式图片排列效果代码分享

    js钢琴按钮波浪式图片排列效果代码分享

    本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图:                                -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能

  • JS实现可视化音频效果的实例代码

    效果如图: 背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整. 代码如下(可直接复制使用): <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></scr

  • 微信小程序实现图片翻转效果的实例代码

    老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'> <!--正面的框 --> <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view> <!--背面的框 --> <view class='frame {{class2}}'> <im

随机推荐