zoukankan      html  css  js  c++  java
  • 修剪矩形

    代码
    <!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>
  • 相关阅读:
    【转】PowerManager 与 WakeLock
    【转】设计模式总结之模式分类
    【转】一篇文章,教你学会Git
    【转】Iconfont
    【转】码云source tree 提交超过100m 为什么大文件推不上去
    各 Android 平台版本支持的 API 级别
    【转】Android进程机制
    【转】数据库CRUD操作
    【转】数据库--视图的基本概念以及作用
    动态规划的两种形式
  • 原文地址:https://www.cnblogs.com/Fskjb/p/1761932.html
Copyright © 2011-2022 走看看