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