<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.big{background: #ccc;margin: 50px auto;width: 600px;height: 300px;text-align: center;padding: 100px;}
#div1{width: 128px;height: 128px;background: url(img/1.png);float: left;}
#div2{width: 128px;height: 128px;background: url(img/2.png);float: left;}
#div3{width: 128px;height: 128px;background: url(img/3.png);float: left;}
#div4{width: 128px;height: 128px;background: url(img/4.png);float: left;}
#div5{width: 128px;height: 128px;background: url(img/5.png);float: left;}
#div6{width: 128px;height: 128px;background: url(img/6.png);float: left;}
#change{width: 200px;height: 200px;background: green;display: none; float: right;}
</style>
</head>
<body>
<div class="big">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div><br><br><br><br><br><br><br><br>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="change"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function() {
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oDiv4=document.getElementById('div4');
var oDiv5=document.getElementById('div5');
var oDiv6=document.getElementById('div6');
var oDivC=document.getElementById('change');
function get(){
oDivC.style.display='block';
}
function Return(){
oDivC.style.display='none';
}
//添加移入事件
oDiv1.onmousemove=oDiv2.onmousemove=oDiv3.onmousemove=oDiv4.onmousemove=oDiv5.onmousemove=oDiv6.onmousemove=function(){
get();
}
//添加移出事件
oDiv1.onmouseout=oDiv2.onmouseout=oDiv3.onmouseout=oDiv4.onmouseout=oDiv5.onmouseout=oDiv6.onmouseout=function(){
Return();
}
}
</script>
</html> |
收藏
淘帖
踩
