zoukankan      html  css  js  c++  java
  • DOM学习控件定位和案例

    Dom中有多种定位属性,下面是一个简单案例

     1 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例-->
     2 <head>
     3     <title>document practise</title>
     4     <script type="text/javascript">
     5         //document.onclick=function(){alert("点击网页了!");}
     6         function increWidth() {
     7             var oldwidth = document.getElementById("1").style.width;
     8             oldwidth = parseInt(oldwidth) + 50;
     9             document.getElementById("1").style.width = oldwidth.toString() + "px";
    10         }
    11         document.onmousemove = function () {
    12             var x = window.event.clientX;
    13             var y = window.event.clientY;
    14             var divfly = document.getElementById("fly");
    15             //if (!divfly) return;
    16             divfly.style.left = x.toString()+"px";
    17             divfly.style.top= y.toString()+"px";
    18         }
    19        
    20     </script>
    21 </head>
    22 <body>
    23     <input type="button" value="单位" id="1" style="50%" /><br />
    24     <input type="button" value="获取单位长度" onclick="alert(document.getElementById('1').style.width)" /><br />
    25     <input type="button" value="设置单位长度" onclick="document.getElementById('1').style.width='50px'" />
    26     <input type="button" value="加宽50" onclick="increWidth()" />
    27     <input type="button" value="定位" style="position:fixed;bottom:200px;right:200px;" />
    28     <div id="fly" style="position:absolute">
    29         <img src="../images/front.jpg" width="100" height="120" />
    30         </div>
    31 </body>
    32 </html>
  • 相关阅读:
    vue 图片切换动态绑定
    弹窗居中,不会随页面滚动变化,直接固定在屏幕中央
    GC优化策略官篇2
    UI优化策略网格重建
    GC优化策略官篇1
    Graphics优化策略官篇3
    GC优化策略官篇3
    Scripts优化策略官篇2
    UI优化策略高级技巧
    Scripts优化策略官篇1
  • 原文地址:https://www.cnblogs.com/sytu/p/4090650.html
Copyright © 2011-2022 走看看