Default1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> .div1 { position: relative; 100px; height: 40px; background-color: red; margin-left: 5px; float: left; overflow: hidden; } .div1 div { position: relative; top: 40px; 100px; height: 400px; background-color: green; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1"> <div id="div1_1"></div> </div> <div class="div1"> <div></div> </div> <div class="div1"> <div></div> </div> <div class="div1"> <div></div> </div> <div class="div1"> <div></div> </div> <div class="div1"> <div id="div1_2"></div> </div> <div class="div1"> <div></div> </div> <div class="div1"> <div></div> </div> <script type="text/ecmascript"> window.onload = function () { var oDivs = document.getElementsByClassName('div1'); for (var i = 0; i < oDivs.length; i++) { oDivs[i].onmouseover = function () { $(this).stop().animate({height:"400px"}, 400); }; oDivs[i].onmouseout = function () { $(this).stop().animate({ height: "40px" }, 400); }; } } </script> <%--<script type="text/javascript"> //先取出div1们，注册鼠标移入移出事件 var oDivs = document.getElementsByClassName('div1'); for (var i = 0; i < oDivs.length; i++) { oDivs[i].onmouseover = function () { this.style.overflow = 'visible'; }; oDivs[i].onmouseout = function () { this.style.overflow = 'hidden'; }; } </script>--%> </form> </body> </html>
Default2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js1.js"></script> <style type="text/css"> .div1 { position: relative; 100px; height: 40px; background-color: red; margin-left: 5px; float: left; } #div1_1 { position:relative; top:40px; 400px; height:0px; background-color:aqua; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1"> <div id="div1_1"></div> </div> </form> </body> </html>
js1.js
var speed = 10; window.onload = function () { var oDivs = document.getElementsByClassName('div1'); for (var i = 0; i < oDivs.length; i++) { oDivs[i].onmouseover = function () { var aaa = this; var timer1 = window.setInterval(function () { Move1(aaa, timer1) }, speed); }; } //下拉方法 function Move1(Div, timer1) { Div.onmouseout = function () { window.clearInterval(timer1); var aaa = this; var timer2 = window.setInterval(function () { Move2(aaa, timer2) }, speed); Div.getElementsByTagName('div')[0].onmouseover = function () { window.clearInterval(timer2); var timer3 = window.setInterval(Move3(Div, timer3), speed); }; }; if (Div.offsetHeight == 400) { window.clearInterval(timer1); return; } Div.style.height = Div.offsetHeight + 10 + 'px'; } function Move2(Div, timer2) { Div.onmouseover = function () { window.clearInterval(timer2) var aaa = this; var timer1 = window.setInterval(function () { Move1(aaa, timer1) }, speed); }; if (Div.offsetHeight == 40) { window.clearInterval(timer2); return; } Div.style.height = Div.offsetHeight - 10 + 'px'; } function Move3(Div,timer3) { if (Div.offsetHeight == 400) { window.clearInterval(timer3); return; } Div.style.height = Div.offsetHeight + 10 + 'px'; } };//onload事件结束