鼠标滑上图片后背景图改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页换肤</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
position: absolute;
width: 100%;
height: 100%;
background-image: url(imgs/1.jpg) ;
background-repeat: no-repeat;
background-size: 500px 400px;
}
img{
float: left;
width: 150px;
height: 100px;
padding: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementsByTagName('img');
var div=document.getElementById('div');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover=function(){
div.style.background= "url("+this.src+") no-repeat";
div.style.backgroundSize="100% 100%";
}
}
}
</script>
</head>
<body>
<div id="div">
<img src="imgs/1.jpg" alt="图一">
<img src="imgs/2.jpg" alt="图二">
<img src="imgs/3.jpg" alt="图三">
<img src="imgs/4.jpg" alt="图四">
</div>
</body>
</html>
