练习:鼠标感应伸缩隐藏层
鼠标感应伸缩隐藏层,实际上我没完全理解这个例子,但是相信以后会用的到,所以先把code贴上来,未来我要去理解的两个参数方法setInterval() ,clearInterval(),目前还不是很清楚这两个的用法 。如果有谁会欢迎留言解答,不胜感激。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{width:200px;word-break:break-all;border:1px solid red;overflow:hidden; cursor:pointer} </style> <script type="text/javascript"> var t = true; var obj,a; function openclose(openclose){ var h = obj.offsetHeight; h += openclose*5; if(h>=150){ clearInterval(a); obj.style.height = "150px"; t = true; } else if(h<=50){ clearInterval(a); obj.style.height = "50px"; t = true; } else obj.style.height = h + "px"; } function getlink(){ obj.onmouseout = function(){ clearInterval(a); a = setInterval("openclose(-1)" , 5); } obj.onmouseover = function(){ clearInterval(a); a = setInterval("openclose(1)" , 5); } } window.onload = function() { obj = document.getElementById("box") obj.style.height = "50px"; getlink(); } </script> </head> <body> <div id="box"> <img src="http://www.phpstudy.net/images/logo.gif"> </div> </body> </html>
|
«
»