js實現百度登入視窗拖拽效果
阿新 • • 發佈：2020-03-23
前言
在我們使用百度相關的功能網頁的時候，我們要去登入賬號。但是小夥伴們有沒有關注過百度的登入視窗的拖拽效果呢？下面分享仿百度登入拖拽效果的原始碼
程式碼
<!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>總結
上面的程式碼就是仿百度登入視窗效果的實現，小夥伴們把程式碼複製到編譯器上面看效果。希望對學習前端開發的小夥們有幫助。
以上就是本文的全部內容，希望大家多多支援我們。