jQuery实现的鼠标拖动画矩形框示例

本文实例讲述了jQuery实现的鼠标拖动画矩形框。分享给大家供大家参考，具体如下：

  
  
  
  
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0}
    html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical}
    #confirmingAppraisal {
      position: relative;
      left: 0;
      top: 0;
      margin: 0 auto;
      padding: 0;
      width: 800px;
      min-height: 800px;
      overflow: auto;
      height: 1000px;
      background-color: #e9e9e9;
    }
    .dashed-box {position: absolute;z-index: 9997; border: 1px dashed red; width: 0px; height: 0px;left: 0px; top: 0px; overflow: hidden;}
    #moving_box {background-color: #0A90DB;}
    .question-box {
      position: absolute;
      z-index: 9998;
      
      
      -webkit-opacity: 0.8;
      
      -moz-opacity: 0.8;
      
      -khtml-opacity: 0.8;
      
      opacity: .8;
      
      filter: alpha(opacity=80);
      
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    }
    .question-border {z-index: 9999;border: 2px dashed red;overflow: hidden; }
    .del-box {
      width: 17px;
      height: 17px;
      float: right;
      position: relative;
      margin-top: 1px;
      margin-right: 1px;
      z-index: 99999999999;
      background: url(del.png);
    }
  
  



  
    
  

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

在线HTML/CSS/Javascript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/Javascript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。