修剪矩形

代码
<!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" />
<style type="text/css">
#data1
{ position:absolute; top:100px; left:100px; padding:0px; width:200px; height:200px; background-color:#FFFF00; clip:rect(0px,200px,200px,0px);}
</style>
<script type="text/javascript">
    
var bottom=200;
    
var clipped=false;
    document.onclick
=testItem;
    
    
function testItem(){
        
if(clipped){
            unClipItem();
        }
else{
            clipItem();    
        }
    }
    
    
function clipItem(){
        bottom 
-= 20;
        
var clip="rect(0px,200px,"+bottom+"px,0px)";
        
var obj=document.getElementById("data1");
        obj.style.clip
=clip;        
        
if(bottom==40){
            clipped
=true;
        }
else{
            setTimeout(
"clipItem()",100);    
        }
    }
    
function unClipItem(){
        bottom 
+=20;
        
var clip="rect(0px,200px,"+bottom+"px,0px)";
        
var obj=document.getElementById("data1");
        obj.style.clip
=clip;
        
if(bottom==200){
            clipped
=false;
        }
else{
            setTimeout(
"unClipItem()",100);    
        }
    }
</script>
</head>
<body>
<div id="data1">
<p>this is the contained within the div block.</p>
</div>
</body>
</html>

 

posted @ 2010-06-21 14:14  Fskjb  阅读(256)  评论(0编辑  收藏  举报
年年行好运