页面拖拽效果

来源：互联网发布：重庆交通大学网络教育编辑：程序博客网时间：2024/06/05 20:21

<head>    <meta charset="utf-8">    <title>百度一下，你就知道</title></head><style>    .back_img {        position: absolute;        width: 100%;        height: 100%;        /*border: 1px solid black;*/        background-color: black;        opacity: 0.3;        display: none;    }    .cont {        position: absolute;        width: 399px;        height: 500px;        border: 1px solid black;    }    .cont hr {        position: absolute;        color: black;        width: 399px;        margin-top: 50px;    }    .login_top {        position: absolute;        /*border: 1px solid black;*/        width: 399px;        height: 50px;    }    .login_top:hover{        cursor: move;    }    .login_top img {        position: absolute;        height: 50px;        margin-left: 10px;    }    .login_top font {        position: absolute;        margin-left: 56px;        margin-top: 22px;    }    .min{        position: absolute;        width: 25px; height: 25px;        border: 1px solid black;        margin-left: 350px;        margin-top: 10px;    }    .min strong{        position: absolute;        font-size: 35px;        line-height: 25px;        text-align: center;    }</style><script type="text/javascript" src="js/a.js"></script><script></script><body>    <!--背景覆盖图层-->    <div id="backimg" class="back_img"></div><!--    注册页面-->    <div id="mouse" class="cont" onmousedown="down()" onmouseup="up()" onmousemove="move()">        <hr />        <!--登录弹出框顶部拖拽部分-->            <div    class="login_top"    >                <img src="img/2017-09-25_145157.jpg" />                <font>登录百度账号</font>                <!--最小化按钮-->                <div class="min">                    <strong>×</strong>                </div>                <!--关闭按钮-->                <div class="close"></div>            </div>    </div>

这里写图片描述

以下为JS文件，请注意

var div_x, div_y; //获取div的坐标
var move_x, move_y; //获取鼠标按下时的时事坐标
var new_div_x, new_div_y, new_move_x, new_move_y; //获取鼠标移动后div与鼠标按下时的坐标
var move_div_x, move_div_y; //鼠标按下时，鼠标与div的偏移量

var isDown = false; //记录鼠标的事实状态
var move_div; //要操作的div对象

// 鼠标按下事件
function down() {
// 判断鼠标是否按下
move_div = document.getElementById(“mouse”);
isDown = true;

//获取div的坐标div_x = move_div.offsetLeft;div_y = move_div.offsetTop;//获取鼠标按下时的时事坐标move_x = event.clientX;move_y = event.clientY;//获取鼠标与div的偏移量move_div_x = move_x - div_x;move_div_y = move_y - div_y;

}

// 鼠标松开事件
function up() {
isDown = false;
}

// 鼠标移动事件
function move() {
move_div = document.getElementById(“mouse”);

//时事更新div的坐标div_x = move_div.offsetLeft;div_y = move_div.offsetTop;//获取鼠标移动后的事实坐标new_move_x = event.clientX;new_move_y = event.clientY;if(isDown) {    //获取新的div的坐标：鼠标时事坐标-鼠标与div的偏移量    new_div_x = new_move_x - move_div_x;    new_div_y = new_move_y - move_div_y;    //将新的div的坐标赋值给di对象    move_div.style.left = new_div_x + "px";    move_div.style.top = new_div_y + "px";}

}

阅读全文

0 0