• 圈选效果


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

  • 相关阅读:
    BUAA2020个人博客作业小结
    BUAA2020软工热身作业小结
    个人博客作业----总结
    个人阅读作业7
    超链接按钮点击变色,原来的链接恢复原色
    setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
    自定义网站404页面
    jQuery实现的上下滚动公告栏详细讲解
    K先生的博客
    Bootstrap4响应式布局之栅格系统
  • 原文地址:https://www.cnblogs.com/benzhang/p/1458792.html
Copyright © 2020-2023  润新知