zoukankan      html  css  js  c++  java
  • 圈选效果

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style>
        v\:* {
                behavior:url(#default#VML)
        }
    </style>
    <script language="javascript">
        var s_x = 0, s_y = 0, _object;

        with (document) {
              onmouseup = function() {
                   _object.style.display = 'none';
              }

              onmousedown = function() {
                   s_x = event.x;
                   s_y = event.y;              
                
                   with (_object) {
                         style.width = 0;
                         style.height = 0;
                         style.display = 'inline';
                   }               
              }

              onmousemove = function() {
                   var e_x = event.x;
                   var e_y = event.y;

                   if (e_x - s_x > 0) {
                       _object.style.left = s_x;
                       _object.style.width = e_x - s_x;
                   } else {
                       _object.style.left = e_x;
                       _object.style.width = s_x - e_x;
                   }
                   if (e_y - s_y > 0) {
                       _object.style.top = s_y;
                       _object.style.height = e_y - s_y;
                   } else {
                       _object.style.top = e_y;
                       _object.style.height = s_y - e_y;
                   }       
              }
        }

        onload = new Function('_object = self.oOval;');

        function doShape(arg) {
              _object = eval('self.' + arg);
        }
    </script>
    </head>
    <body>
       <select id="oShape" onchange="doShape(options[selectedIndex].value);">
           <option value="oOval">圆形</option>
           <option value="oRect">矩形</option>
           <option value="oRoundRect">圆距</option>
       </select>
       <v:oval id="oOval" style="display: none;position: absolute;">
           <v:stroke color="red" dashstyle="Dot" />
       </v:oval>
       <v:rect id="oRect" style="display: none;position: absolute;">
           <v:stroke color="red" dashstyle="Dot" />
       </v:rect>
       <v:roundrect id="oRoundRect" style="display: none;position: absolute;">
           <v:stroke color="red" dashstyle="Dot" />
       </v:roundrect>
    </body>
    </html>

  • 相关阅读:
    系统吞吐量(TPS)、用户并发量、性能测试概念和公式
    javascript 匿名函数和闭包
    构建高可扩Web架构和分布式系统实战
    Javascript prototype 的作用
    myeclipse下载地址
    tomacat7.0配置(windows)
    IEEE802.11
    C#(多态)
    C#(泛型集合的使用)
    C#(对象引用)
  • 原文地址:https://www.cnblogs.com/benzhang/p/1458792.html
Copyright © 2011-2022 走看看