zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [轉]SQLServer : EXEC和sp_executesql的区别
    CSS 中文字体
    [转]71种 menu css源码
    DataTable做為數據源手動分頁
    [轉]9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架
    [轉]10 Tools to help you select a Web 2.0 Color Palette
    [轉]ASP模拟POST提交请求上传文件
    Web配色資源
    [轉]sqlhelper 下载 使用指南
    [轉]查看SQL Server数据库连接
  • 原文地址:https://www.cnblogs.com/zzq-229/p/9577309.html
Copyright © 2011-2022 走看看