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

更新時間：2020年03月19日 12:39:01 作者：裕博

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)百度登錄窗口拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

在我們使用百度相關(guān)的功能網(wǎng)頁的時候，我們要去登錄賬號。但是小伙伴們有沒有關(guā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")
  // 鼠標(biāo)按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 緊接著需要馬上去移動鼠標(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)抬起時不要移動
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>

總結(jié)

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

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

您可能感興趣的文章:

相關(guān)文章

Typescript定義多個接口類型聲明的方式小結(jié)
這篇文章主要介紹了Typescript定義多個接口類型聲明的方式小結(jié),在 TypeScript 中,您可以使用交叉類型(&)或聯(lián)合類型(|)來組合多個接口,從而實(shí)現(xiàn)多個接口類型的混合,文中通過代碼講解的非常詳細(xì),需要的朋友可以參考下
2025-01-01
xml分頁+ajax請求數(shù)據(jù)源+dom取結(jié)果實(shí)例代碼
最近做的一個項(xiàng)目里的某個小功能,主要是為了方便選擇數(shù)據(jù) 演示地址:由于有惡意程序，所以去掉地址
2008-10-10
javascript createAdder函數(shù)功能與使用說明
createAdder（x）是一個函數(shù)，返回一個函數(shù)。在JavaScript中，函數(shù)是第一類對象：另外它們可以被傳遞到其他函數(shù)作為參數(shù)和函數(shù)返回。在這種情況下，函數(shù)返回本身就是一個函數(shù)接受一個參數(shù)，并增加了一些東西。
2010-06-06
js和canvas繪制圓形金屬質(zhì)感特效
在JavaScript中,可以使用HTML5提供的Canvas元素來進(jìn)行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實(shí)現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級排版特效
2024-09-09
瀏覽器的JavaScript引擎的識別方法
識別瀏覽器的JavaScript引擎的方法對PC瀏覽器和移動瀏覽器都可用，其實(shí)實(shí)現(xiàn)原理就是下面的這段js，感興趣的朋友可以參考下
2013-10-10
JavaScript實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)
條碼是一種以機(jī)器可讀的可視形式表示數(shù)據(jù)的方法,我們可以從條碼獲取二進(jìn)制數(shù)據(jù),并通過不同方法去讀碼,下面我們就來看看如何實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)吧
2024-03-03
echart在微信小程序的使用簡單示例
最近公司的項(xiàng)目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于echart在微信小程序的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
bootstrap基礎(chǔ)知識學(xué)習(xí)筆記
這篇文章主要針對bootstrap基礎(chǔ)知識為大家整理了詳細(xì)的學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解http訪問解析流程原理
這篇文章主要介紹了詳解http訪問解析流程原理的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
2017-10-10
在微信小程序中使用iconfont的最新圖文教程
由于微信小程序線上的資源限制了各種接口安全域名,所以在小程序里如果想使用iconfont字體圖標(biāo)就會稍有不同,下面這篇文章主要給大家介紹了關(guān)于在微信小程序中使用iconfont的相關(guān)資料,需要的朋友可以參考下
2022-08-08