html 使用js+css+html实现图片划过预览效果
2016-07-14 16:33
639 查看
效果图：：：当鼠标划过的时候图片自动打开和折叠
代码：：
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);
}
};
代码：：
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);
}
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 