js實現(xiàn)盒子拖拽動畫效果
更新時間：2020年08月09日 14:26:06 作者：cnkeysky
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)盒子拖拽動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)盒子拖拽動畫的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 200px;
border: 1px solid #ccc;
border-right-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
box-sizing: border-box;
}
.wrap .head {
height: 40px;
padding-left: 4px;
padding-right: 4px;
background-color: #ccc;
box-sizing: border-box;
line-height: 40px;
user-select: none;
}
.head:hover {
cursor: move;
}
.head span {
float: left;
}
#close {
float: right;
}
#close:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<div class="wrap">
<div class="head">
<span>試著拖拽我</span>
<span id="close">【關(guān)閉】</span>
</div>
</div>
<script>
let wrap = document.querySelector('.wrap');
let close = document.getElementById('close');
let head = document.querySelector('.head');
head.onmousedown = function (e) {
// 獲得鼠標(biāo)在 head 中的坐標(biāo)
let x = e.pageX - wrap.offsetLeft;
let y = e.pageY - wrap.offsetTop;
console.log(x, y);
document.onmousemove = function (e) {
let xx = e.pageX - x;
let yy = e.pageY - y;
// 設(shè)置邊界限制
xx = xx < 0 ? 0 : xx;
yy = yy < 0 ? 0 : yy;
if (xx >= innerWidth - wrap.offsetWidth) {
document.documentElement.scrollLeft = 20;
} else {
document.documentElement.scrollLeft = 0;
}
xx = xx > innerWidth - wrap.offsetWidth ? innerWidth-wrap.offsetWidth : xx;
yy = yy > innerHeight - wrap.offsetHeight + document.documentElement.scrollTop ? innerHeight - wrap.offsetHeight + document.documentElement.scrollTop : yy;
wrap.style.left = xx + 'px';
wrap.style.top = yy + 'px';
// 禁止X滾動軸
document.body.style.overflowX = 'hidden';
wrap.style.marginLeft = 0;
wrap.style.marginTop = 0;
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
close.onclick = function () {
wrap.style.display = 'none';
};
</script>
</body>
</html>
實現(xiàn)效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript基礎(chǔ)知識及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的，通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié)，對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能,結(jié)合實例形式詳細(xì)分析了javascript事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)滑塊拖動功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
移動端（微信等使用vConsole調(diào)試console的方法
這篇文章主要介紹了移動端（微信等使用vConsole調(diào)試console的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
javascript中如何將字符串轉(zhuǎn)換成數(shù)字
這篇文章主要介紹了javascript中如何將字符串轉(zhuǎn)換成數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Express代理轉(zhuǎn)發(fā)服務(wù)器實現(xiàn)
這篇文章主要為大家介紹了Express代理轉(zhuǎn)發(fā)服務(wù)器實現(xiàn)技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
詳解cesium實現(xiàn)大批量POI點位聚合渲染優(yōu)化方案
這篇文章主要為大家介紹了cesium實現(xiàn)大批量POI點位聚合渲染優(yōu)化方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JS中mouseover和mouseout多次觸發(fā)問題如何解決
這篇文章主要介紹了JS中mouseover和mouseout多次觸發(fā)問題如何解決的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
js中document.getElementByid、document.all和document.layers區(qū)分介紹
document.getElementById 是公共標(biāo)準(zhǔn)，被目前的所有主流瀏覽器支持,document.all只有IE支持,document.layers是Netscape 4.x專有的屬性2011-12-12
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)視頻彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了ES6新增的數(shù)組知識,結(jié)合實例形式分析了ES6的數(shù)組新增知識點、使用技巧與相關(guān)注意事項,需要的朋友可以參考下2020-05-05