• 圈选效果


    <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>

  • 相关阅读:
    浏览器基础知识点及常考面试题
    java设计模式之综述
    maven的基本原理和使用
    maven的介绍和安装
    Spring整合Struts2的方法
    Spring整合Hibernate的方法
    Spring中的事务管理
    Spring中的JDBC操作
    基于XML配置的Sping AOP详解
    基于注解的Sping AOP详解
  • 原文地址:https://www.cnblogs.com/benzhang/p/1458792.html
Copyright © 2020-2023  润新知