js實(shí)現(xiàn)盒子拖拽動(dòng)畫效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)盒子拖拽動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <title>Document</title> <script src='http://www.piao2010.com/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> <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滾動(dòng)軸 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>
實(shí)現(xiàn)效果：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能2. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論3. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)4. 解析原生JS getComputedStyle5. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享6. 利用CSS3新特性創(chuàng)建透明邊框三角7. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享8. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐9. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)10. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)
網(wǎng)公網(wǎng)安備