欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓你的網(wǎng)頁(yè)動(dòng)起來(lái):Javascript+CSS拖曳盒子指南

 更新時(shí)間：2024年03月19日 08:37:45   作者：遠(yuǎn)近高低各不同  
想讓你的網(wǎng)頁(yè)動(dòng)起來(lái)嗎?這份Javascript+CSS拖曳盒子指南將帶你進(jìn)入網(wǎng)頁(yè)交互設(shè)計(jì)的奇妙世界,跟著我們的步驟,你很快就能創(chuàng)建出令人眼前一亮的動(dòng)態(tài)網(wǎng)頁(yè)效果,準(zhǔn)備好開(kāi)啟一段有趣的編程探索之旅吧!

讓我為大家?guī)?lái)一個(gè)小案例吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1 {
                width: 100px;
                height: 100px;
                background-color: black;
                margin-bottom: 10px;
                position: relative;
                left: 0;
                top: 0;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: pink;
                margin-bottom: 10px;
                margin-left: 200px;
            }
            .box3 {
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-top: 120px;
                margin-left: 200px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
    <script>
        //獲取要移動(dòng)的盒子
         var div = document.querySelector(".box1")
        //獲取其他2個(gè)盒子
        var div1=document.querySelector(".box2")
        var div2=document.querySelector(".box3")
        div.onmousedown = function(e){
            //獲取盒子距離頁(yè)面多少
            var divX =div.offsetLeft
            var divY =div.offsetTop
            //獲取盒子點(diǎn)擊的xy坐標(biāo)
            var downX =e.clientX
            var downY =e.clientY
            document.onmousemove=function(e){
            console.log(e);
            // if(div.offsetLeft<1){
            //     alert("超出")
            // }
            //獲取盒子點(diǎn)擊的地方距離document點(diǎn)擊的坐標(biāo)的差
            var moveX =e.clientX - downX
            var moveY =e.clientY - downY
            //獲取移動(dòng)鼠標(biāo)想放哪放哪
            // div.style.left =divX+moveX+"px"
            // div.style.top =divY+moveY+"px"
            //這個(gè)的中心點(diǎn)在中間
            div.style.left =e.clientX - div.offsetWidth/2+"px"
            div.style.top =e.clientY - div.offsetHeight/2+"px"
            //拿他們的寬高去判斷坐標(biāo)
            if(e.clientX<div1.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div1.offsetTop/2&&e.clientY<div1.offsetTop*2+40){
                console.log(div1.offsetTop);
                div1.style.backgroundColor="green"
                }else{
                    div1.style.backgroundColor="pink"
                }
                //拿他們的距離去判斷
             if(e.clientX<div2.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div2.offsetTop-div.offsetHeight/2&&e.clientY<div2.offsetTop+div.offsetHeight+div.offsetHeight/2){
                div2.style.backgroundColor="blue"
                }else {
                    div2.style.backgroundColor="orange"
                }
            }
        }
        //如果按起就不動(dòng)
        div.onmouseup = function(){
            document.onmousemove = null
        }
    </script>
</html>

效果圖：

到此這篇關(guān)于讓你的網(wǎng)頁(yè)動(dòng)起來(lái):Javascript+CSS拖曳盒子指南的文章就介紹到這了,更多相關(guān) Javascript+CSS拖曳盒子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論