前端ABC练习一：中心放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心放大</title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
position: relative;
background: #eee;
left: 300px;
top: 300px;
}
#div2{
width: 200px;
height: 200px;
position: absolute;
background: red;
left: 300px;
top: 300px;
}
</style>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.onmouseover = function(){
startMove(div1,{width:200,height:200,marginTop:-50,marginLeft:-50})
}
div1.onmouseout = function(){
startMove(div1,{width:200,height:200,marginTop:0,marginLeft:0})
}
</script>
</body>
</html>
练习二：
<!DOCTYPE html>
<html>
<head>
<title>案例</title>
<meta charset="utf-8">
<script type="text/javascript" src="move.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#ul1{
width: 366px;
margin: auto;
position: relative;
margin-top: 50px;
}
#ul1 li{
list-style: none;
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid black;
float: left;
margin: 10px;
}
#ul1 li img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul id="ul1">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
</ul>
<script type="text/javascript">
var oul = document.getElementById('ul1');
var list = oul.getElementsByTagName('li');
var iMinZindex = 2;
// 布局转换
for (var i = 0; i < list.length; i++) {
// list[i].innerHTML = "left:"+list[i].offsetLeft+",top:"+list[i].offsetTop;
list[i].style.left = list[i].offsetLeft + "px";
list[i].style.top = list[i].offsetTop + "px";
}
for (var i = 0; i < list.length; i++) {
list[i].style.position = "absolute";
list[i].style.margin = "0";
}
// 添加事件
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function(){
this.style.zIndex = iMinZindex ++;
startMove(this, {width: 200, height: 200, marginLeft:-50, marginTop:-50})
}
list[i].onmouseout = function(){
startMove(this, {width: 100, height: 100, marginLeft:0, marginTop:0})
}
}
</script>
</body>
</html>