js實現圖片推拉門效果代碼實例

2024-05-06 16:51:04

字體：大中小

來源：轉載

供稿：網友

初學者。

推拉門是網頁中常見的一種形式，通過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" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";">	#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,圖片推拉門,代碼