文章詳情頁

js實現盒子拖拽動畫效果

瀏覽：77日期：2024-04-25 15:30:23

本文實例為大家分享了js實現盒子拖拽動畫的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <title>Document</title> <script src='http://www.aoyou183.cn/bcjs/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> tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom tom <div class='wrap'> <div class='head'> 試著拖拽我 【關閉】 </div> </div> <script> let wrap = document.querySelector(’.wrap’); let close = document.getElementById(’close’); let head = document.querySelector(’.head’); head.onmousedown = function (e) { // 獲得鼠標在 head 中的坐標 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; // 設置邊界限制 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>

實現效果：

js實現盒子拖拽動畫效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

JavaScript

上一條：js實現計算器功能下一條：js實現盒子移動動畫效果

相關文章：

1. CentOS郵件服務器搭建系列—— POP / IMAP 服務器的構建（ Dovecot ）2. HTTP協議常用的請求頭和響應頭響應詳解說明（學習）3. ASP.NET MVC通過勾選checkbox更改select的內容4. .NET SkiaSharp 生成二維碼驗證碼及指定區域截取方法實現5. IntelliJ IDEA創建web項目的方法6. Django使用HTTP協議向服務器傳參方式小結7. 原生JS實現記憶翻牌游戲8. .NET 6實現滑動驗證碼的示例詳解9. django創建css文件夾的具體方法10. ASP中實現字符部位類似.NET里String對象的PadLeft和PadRight函數

排行榜

					
					.NET SkiaSharp 生成二維碼驗證碼及指定區域截取方法實現
HTTP協議常用的請求頭和響應頭響應詳解說明（學習）
IntelliJ IDEA創建web項目的方法
Django使用HTTP協議向服務器傳參方式小結
CentOS郵件服務器搭建系列—— POP / IMAP 服務器的構建（ Dovecot ）
ASP.NET MVC通過勾選checkbox更改select的內容
idea設置提示不區分大小寫的方法
IntelliJ IDEA導入項目的方法
docker容器調用yum報錯的解決辦法
django創建css文件夾的具體方法
ASP中實現字符部位類似.NET里String對象的PadLeft和PadRight函數
				