练习一:中心放大
<!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>