拖拽效果"/>
页面拖拽效果
<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";
}
}
更多推荐
页面拖拽效果
发布评论