首頁 >web前端 >js教程 >用Javascript 编写可以缓慢弹出收缩的层_javascript技巧

用Javascript 编写可以缓慢弹出收缩的层_javascript技巧

WBOY原創: 2016-05-16 18:44:03923瀏覽

代码如下：

<title>层的扩展与收缩</title> 
 
 
<div id="div1"> 
</div> 
<script type="text/javascript"> 
function StretchDiv(divid,color){ 
var target; 
var flag=false; 
var onMouseDown=function(){ 
if(flag){ 
var h=parseInt(target.style.height); 
onMouseDown.shortDiv=function(){ 
h=h-1; 
if(h<20){ 
return; 
} 
target.style.height=h+"px"; 
setTimeout(onMouseDown.shortDiv,30); 
} 
onMouseDown.shortDiv(); 
} 
else { 
//target.style.height=parseInt(target.style.height)+180+"px"; 
var h=parseInt(target.style.height); 
onMouseDown.longDiv=function(){ 
h=h+1; 
if(h>200){ 
return; 
} 
target.style.height=h+"px"; 
setTimeout(onMouseDown.longDiv,30); 
} 
onMouseDown.longDiv(); 
} 
flag=!flag; 
} 
function init(){ 
target=document.getElementById(divid); 
target.style.position = "absolute"; 
target.style.width = "200px"; 
target.style.height = "20px"; 
target.style.left = "100px"; 
target.style.top = "100px"; 
target.style.backgroundColor = color; 
target.onmousedown = onMouseDown; 
} 
init(); 
} 
new StretchDiv("div1","blue"); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JS 用6N±1法求素数实例教程_javascript技巧下一篇：javascript void(0)的妙用_javascript技巧

看更多

用Javascript 编写可以缓慢弹出收缩的层_javascript技巧

相關文章