• js浮漂


    Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。

    获取画布宽度的方式如下

    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidt

    获取窗口的高度与宽度(不包含工具条与滚动条):

    var w=window.innerWidth;
    var h=window.innerHeight;

     

    clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变

     1 <html>  
     2 <head>  
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
     4     <title>test</title>  
     5     <style type="text/css">   
     6         #All{ width: 100%; height: 3000px;}  
     7     </style>  
     8 </head>  
     9 <body>    
    10     <div id="All">   
    11         <div id="img" style="position: absolute; z-index:99;">   
    12             <a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0"  style="cursor: pointer;" style="cursor: pointer;" /></a>   
    13             <script language="JavaScript">  
    14     <!--Begin  
    15                 var xPos = document.body.clientWidth - 20;  
    16                 var yPos = document.body.clientHeight / 2;  
    17                 var step = 1;  
    18                 var delay = 10;  
    19                 var height = 0;  
    20                 var Hoffset = 0;  
    21                 var Woffset = 0;  
    22                 var yon = 0;  
    23                 var xon = 0;  
    24                 var pause = true;  
    25                 var interval;  
    26                 img.style.top = yPos;  
    27                 function changePos() {  
    28                     width = document.body.clientWidth;  
    29                     height = document.body.clientHeight;  
    30                     Hoffset = img.offsetHeight;  
    31                     Woffset = img.offsetWidth;  
    32                     img.style.left = xPos + document.body.scrollLeft;  
    33                     img.style.top = yPos + document.body.scrollTop;  
    34                     if (yon) {  
    35                         yPos = yPos + step;  
    36                     } else {  
    37                         yPos = yPos - step;  
    38                     }    
    39                     if (yPos < 0) {  
    40                         yon = 1;  
    41                         yPos = 0;  
    42                     }  
    43                     if (yPos >= (height - Hoffset)) {  
    44                         yon = 0;  
    45                         yPos = (height - Hoffset);  
    46                     }  
    47                     if (xon) {  
    48                         xPos = xPos + step;  
    49                     } else {  
    50                         xPos = xPos - step;  
    51                     }  
    52                     if (xPos < 0) {  
    53                         xon = 1;  
    54                         xPos = 0;  
    55                     }  
    56                     if (xPos >= (width - Woffset)) {  
    57                         xon = 0;  
    58                         xPos = (width - Woffset);  
    59                     }  
    60                 }   
    61                 function start() {  
    62                     img.visibility = "visible";  
    63                     interval = setInterval('changePos()', delay);  
    64                 }  
    65                 function pause_resume() {  
    66                     if (pause) {  
    67                         clearInterval(interval);  
    68                         pause = false;  
    69                     } else {  
    70                         interval = setInterval('changePos()', delay);  
    71                         pause = true;  
    72                     }  
    73                 }   
    74                 start();  
    75     //  End -->  
    76             </script>  
    77         </div>  
    78     </div>  
    79 </body>  
    80 </html>
  • 相关阅读:
    Redisson 实现分布式锁原理分析
    redis如何避免释放锁时把别人的锁释放掉
    记一次org.springframework.transaction.UnexpectedRollbackException: Transaction rolled back because it has been marked as rollback-only异常
    1.编译chromium
    Win10更新后wireshark无法获取网络接口
    ASIO库使用注意事项
    使用gdb添加断点的几种方式
    select、poll、epoll的比较
    CMakeLists.txt编写常用命令
    Ubuntu下使用linuxdeployqt打包Qt程序
  • 原文地址:https://www.cnblogs.com/zzq-229/p/9577309.html
Copyright © 2020-2023  润新知