溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
在我們使用百度相關的功能網頁的時候，我們要去登錄賬號。但是小伙伴們有沒有關注過百度的登錄窗口的拖拽效果呢？下面分享仿百度登錄拖拽效果的源碼
代碼
<!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>
總結
上面的代碼就是仿百度登錄窗口效果的實現，小伙伴們把代碼復制到編譯器上面看效果。希望對學習前端開發的小伙們有幫助。
以上就是本文的全部內容，希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
