欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)百度登錄窗口拖拽效果

 更新時間：2020年03月19日 12:39:01   作者：裕博  
這篇文章主要為大家詳細介紹了js實現(xiàn)百度登錄窗口拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

在我們使用百度相關的功能網頁的時候，我們要去登錄賬號。但是小伙伴們有沒有關注過百度的登錄窗口的拖拽效果呢？下面分享仿百度登錄拖拽效果的源碼

代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
  }
 </style>
 </head>
 <body>
 <div id="box"></div>
 <script type="text/javascript">
  var oBox = document.getElementById("box")
  // 鼠標按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 緊接著需要馬上去移動鼠標
  oBox.onmousemove = function(ev){
   // 這里的ev和onmousedown里面的ev不一樣
   var ev = ev || event
   var oBox_left = ev.clientX - difX
   var oBox_top = ev.clientY - difY
   oBox.style.left = oBox_left + "px"
   oBox.style.top = oBox_top + "px"
  }
  // 當鼠標抬起時不要移動
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>

總結

上面的代碼就是仿百度登錄窗口效果的實現(xiàn)，小伙伴們把代碼復制到編譯器上面看效果。希望對學習前端開發(fā)的小伙們有幫助。

以上就是本文的全部內容，希望大家多多支持腳本之家。

相關文章

最新評論