整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 鼠標拖拽

          易拖拽

          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>無標題文檔</title>
          <style>
          #div1 {width:200px; height:200px; background:red; position:absolute;}
          </style>
          <script>
          window.onload=function ()
          {
          var oDiv=document.getElementById('div1');
          
          var disX=0;
          var disY=0;
          
          oDiv.onmousedown=function (ev)
          {
          var oEvent=ev||event;
          
          disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
          disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離
          
          oDiv.onmousemove=function (ev)
          {
          var oEvent=ev||event;
          
          oDiv.style.left=oEvent.clientX-disX+'px';
          oDiv.style.top=oEvent.clientY-disY+'px';
          };
          
          oDiv.onmouseup=function ()
          {
          oDiv.onmousemove=null;
          oDiv.onmouseup=null;
          };
          };
          };
          </script>
          </head>
          <body>
          <div id="div1"></div>
          </body>
          </html>

          程序問題:鼠標拖拽過快,鼠標指針與拖拽div對象脫離

          解決方法:直接給document加事件(因為div對象范圍太小,鼠標移動就與拖拽div對象脫離)

          將oDiv改成document對象

          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>無標題文檔</title>
          <style>
          #div1 {width:200px; height:200px; background:red; position:absolute;}
          </style>
          <script>
          window.onload=function ()
          {
          var oDiv=document.getElementById('div1');
          
          var disX=0;
          var disY=0;
          
          oDiv.onmousedown=function (ev)
          {
          var oEvent=ev||event;
          
          disX=oEvent.clientX-oDiv.offsetLeft;
          disY=oEvent.clientY-oDiv.offsetTop;
          
          document.onmousemove=function (ev)
          {
          var oEvent=ev||event;
          
          oDiv.style.left=oEvent.clientX-disX+'px';
          oDiv.style.top=oEvent.clientY-disY+'px';
          };
          
          document.onmouseup=function ()
          {
          document.onmousemove=null;
          document.onmouseup=null;
          };
          };
          };
          </script>
          </head>
          <body>
          <div id="div1"></div>
          </body>
          </html>

          程序問題: FF下,空Div拖拽Bug(殘影)

          解決方法: 阻止默認事件

          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>無標題文檔</title>
          <style>
          #div1 {width:200px; height:200px; background:red; position:absolute;}
          </style>
          <script>
          window.onload=function ()
          {
          var oDiv=document.getElementById('div1');
          
          var disX=0;
          var disY=0;
          
          oDiv.onmousedown=function (ev)
          {
          var oEvent=ev||event;
          
          disX=oEvent.clientX-oDiv.offsetLeft;
          disY=oEvent.clientY-oDiv.offsetTop;
          
          document.onmousemove=function (ev)
          {
          var oEvent=ev||event;
          
          oDiv.style.left=oEvent.clientX-disX+'px';
          oDiv.style.top=oEvent.clientY-disY+'px';
          };
          
          document.onmouseup=function ()
          {
          document.onmousemove=null;
          document.onmouseup=null;
          };
          
          return false; //阻止默認事件(拖動殘影)
          };
          };
          </script>
          </head>
          <body>
          <div id="div1"></div>
          </body>
          </html>

          防止拖出頁面

          用css3制作鼠標滑過內容上移特效,運用到CSS3的動畫過渡屬性

          前后對比圖!

          實現代碼:

          html中,我們經常會用到table布局;有時候需要實現指定單元格,當鼠標移動到上面的時候,該單元格背景變色,不是該行背景變色,也不是僅僅文字的背景變色;


          html的文件結構大家都是知道的了,總體分為head和body部分

          我們要實現變色,在head部分實現格式

          <style>

          .tablex {border-collapse: collapse;}

          .tablex tr {}

          .tablex tr td {text-align:center; line-height:30px;}

          .tablex tr td:hover { background-color:#f00; color:#fff;}

          </style>

          然后在body部分,使用table時候,注明class="tablex".這樣的話,就實現了我們所說的效果了。

          附上完整代碼:

          <html>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

          <title>測試鼠標移到到表格單元格背景顏色改變的</title>

          <style>

          .table1 {border-collapse: collapse;}

          .table1 tr {}

          .table1 tr td {text-align:center; line-height:30px;}

          .table1 tr td:hover { background-color:#006030; color:#006030;}

          </style>

          </head>

          <body>

          <table class="table1" width="70%" border="1">

          <tr>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          </tr>

          <tr>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          </tr>

          <tr>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          </tr>

          <tr>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          </tr>

          <tr>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          <td>測試</td>

          </tr>

          </table>

          </body>

          </html>

          在任何一個瀏覽器中運行,效果如下




          南大盛聯20年來一直致力于高端IT培訓--打造高級軟件人才實戰培訓專家,學生對我們的認可是我們一直前進的動力;項目團隊全球招聘,特聘來自海外的老師進行任教,采用100%商業項目進行實戰培訓,線上線下同步進行。

          課程全部緊隨市場需求進行設計,并且動態進行調整;7天免費試聽,0首付開始學習,學完后進行100%推薦就業,不滿意工作崗位2次推薦。

          選定一個平臺,認識一群志同道合的朋友,你的未來人生路必定不一樣。

          目前已經開設下面這些培訓項目

          Java培訓

          安卓培訓

          JavaWeb培訓

          Linux培訓

          云服務器布置培訓

          HTML5培訓

          SEO培訓

          視頻剪輯培訓

          UI培訓

          歡迎您們分享給自己愿意分享的朋友,大家一起來進步;相互轉告,咨詢,學習。

          南大盛聯培訓理念:我懂,我也能讓你懂。


          主站蜘蛛池模板: 无码人妻久久一区二区三区免费| 亚洲综合一区国产精品| 亚洲av无码一区二区三区在线播放| 精品国产一区二区麻豆| 无码av免费一区二区三区试看| 一本色道久久综合一区| 国产精品视频一区麻豆| 国产日韩一区二区三区在线观看| 国产aⅴ精品一区二区三区久久| 国产香蕉一区二区在线网站| 久久人妻内射无码一区三区 | 人妻少妇久久中文字幕一区二区| 一区二区三区在线看| 精品不卡一区中文字幕| 日本高清一区二区三区| 综合无码一区二区三区四区五区| 无码囯产精品一区二区免费| 精品一区二区在线观看| 国产成人精品一区二区三区无码| 国产精品小黄鸭一区二区三区| а天堂中文最新一区二区三区| 无码日韩人妻AV一区免费l | 国产美女av在线一区| 日韩精品一区二区午夜成人版| 日本精品一区二区三区四区| 国产精品亚洲一区二区三区久久 | 国产福利电影一区二区三区,亚洲国模精品一区 | 韩日午夜在线资源一区二区| 国产美女露脸口爆吞精一区二区| 久久国产高清一区二区三区| 波多野结衣免费一区视频 | 欧美av色香蕉一区二区蜜桃小说| 中文字幕乱码亚洲精品一区| 亚洲中文字幕久久久一区| 精品福利视频一区二区三区| 国产乱码精品一区二区三区麻豆| 国内精品一区二区三区最新| 无码欧精品亚洲日韩一区夜夜嗨| 中文字幕在线一区| 久久久久久人妻一区精品| 国产高清一区二区三区|