亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

前言

在我們使用百度相關(guān)的功能網(wǎng)頁(yè)的時(shí)候，我們要去登錄賬號(hào)。但是小伙伴們有沒(méi)有關(guān)注過(guò)百度的登錄窗口的拖拽效果呢？下面分享仿百度登錄拖拽效果的源碼

代碼

<!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")
  // 鼠標(biāo)按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 緊接著需要馬上去移動(dòng)鼠標(biāo)
  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"
  }
  // 當(dāng)鼠標(biāo)抬起時(shí)不要移動(dòng)
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>

總結(jié)

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

以上就是本文的全部?jī)?nèi)容，希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論