DIV三种不同的收缩样式效果

starting · 发表于 2013-2-7 23:40:30

<!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"></style><script type="text/javascript" language="Javascript" src="jquery.js"></script><SCRIPT LANGUAGE="JavaScript">var _divShowTimer;//20000var _divObj;var divHeight;var divWidth;function showDiv(divId,_sType,_time){ _divObj=document.getElementById(divId);if(!_divObj)return;if(!_sType){if(_divObj.style.display==""){_divObj.style.display="none";}else{_divObj.style.display="";}return;} if(!_time)_time=500;//gpsPlayerTimer = setInterval("gpsTrack2()", 300);if(_sType=="1"){//竖直逐渐张开或收缩if(_divObj.style.display!="none"){divHeight=_divObj.clientHeight;_divShowTimer = setInterval("displaySTyle1('none')", 5);}else{_divShowTimer = setInterval("displaySTyle1('')", 5);}}else if(_sType=="2"){//由角落逐渐张开或收缩if(_divObj.style.display==""){divHeight=_divObj.clientHeight;divWidth=_divObj.clientWidth;_divShowTimer = setInterval("displaySTyle2('none')",5);}else{_divShowTimer = setInterval("displaySTyle2('')",5);}}else if(_sType=="3"){//由角落逐渐张开或收,且颜色慢慢变淡//$d.toggle("slow"); //("slow", "normal", "fast")，hide("slow")隐藏 ,show("slow")显示$(_divObj).toggle(_time);}else if(_sType=="4"){}else if(_sType=="5"){}else if(_sType=="6"){}else if(_sType=="7"){}}function displaySTyle1(_diSty){try{if(_diSty=="none"){_divObj.style.height=_divObj.clientHeight-5+"px";if(_divObj.clientHeight==3){_divObj.style.display="none";clearInterval(_divShowTimer);//清除计时器return;}}else if(_diSty==""){_divObj.style.height=_divObj.clientHeight+5+"px";_divObj.style.display="";_divSH=parseInt(_divObj.style.height);if(_divSH==divHeight){clearInterval(_divShowTimer);//清除计时器return;}}}catch(err){}}function displaySTyle2(_diSty){try{if(_diSty=="none"){_divObj.style.height=_divObj.clientHeight-5+"px";_divObj.style.width=_divObj.clientWidth-5+"px";if(_divObj.clientHeight==3){_divObj.style.display="none";clearInterval(_divShowTimer);//清除计时器return;}}else if(_diSty==""){_divObj.style.height=_divObj.clientHeight+5+"px";_divObj.style.width=_divObj.clientWidth+5+"px";_divObj.style.display="";_divSH=parseInt(_divObj.style.height);if(_divSH==divHeight){_divObj.style.width=divWidth;clearInterval(_divShowTimer);//清除计时器return;}}}catch(err){}}function displaySTyle3(){var $d=$(_divObj)$d.toggle("slow"); //("slow", "normal", "fast")，hide("slow")隐藏 ,show("slow")显示}</SCRIPT></head><body><div id="Layer1"></div><input type="button" name="Submit" value="1" /><input type="button" name="Submit" value="2" /><input type="button" name="Submit" value="3" /><input type="button" name="Submit" value="4" /><input type="button" name="Submit" value="5" /><input type="button" name="Submit" value="6" /><input type="button" name="Submit" value="7" /></body></html> 该样式主要有三种：一、竖直逐渐张开或收缩，二、由角落逐渐张开或收缩三、由角落逐渐张开或收,且颜色慢慢变淡

把该代码拷贝到dreamweaver运行即可看到效果

		自动登录	找回密码
密码			立即注册