html 使用js+css+html實現圖片劃過預覽效果
效果圖：：：當滑鼠劃過的時候圖片自動開啟和摺疊
程式碼：：
html程式碼：：命名為：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sliding doors</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/slidingdoors.css" />
<script src="js/slidingdoors.js"></script>
</head>
<body>
<div id="container">
<img src="img/door1.png" alt="1080P神器" title="1080P神器"/>
<img src="img/door2.png" alt="1080P神器" title="1080P神器"/>
<img src="img/door3.png" alt="1080P神器" title="1080P神器"/>
<img src="img/door4.png" alt="1080P神器" title="1080P神器"/>
</div>
</body>
</html>
css程式碼：：
命名為：slidingdoors.css程式碼如下：
#container{
height: 477px;
margin:0 auto;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;//溢位容器不顯示
position:relative;
}
#container img{
position: absolute;
display: block;
left: 0;
border-left: 1px solid #ccc;
}
js檔案命名為：slidingdoors.js
程式碼如下：：：
window.onload = function(){
//容器物件
var box = document.getElementById('container');
//獲得影象集合
var imgs = box.getElementsByTagName('img');
//單張圖片的寬度
var imgWidth = imgs[0].offsetWidth;
//設定隱藏門體露出的寬度
var exposeWidth = 160;
//設定容器寬度
var boxWidth = imgWidth + (imgs.length - 1)*exposeWidth;
box.style.width = boxWidth + 'px';
function setImgsPos(){
for(var i =1,len = imgs.length;i<len;i++)
{
imgs[i].style.left = imgWidth+exposeWidth*(i-1)+'px';
}
}
setImgsPos();
var translate = imgWidth-exposeWidth;
for(var i = 0,len = imgs.length;i<len;i++)
{
(function(i){
imgs[i].onmouseover = function(){
setImgsPos();
//開啟門
for(var j = 1;j<=i;j++)
{
imgs[j].style.left = parseInt(imgs[j].style.left,10)-translate+'px';
}
}
})(i);
}
};