- 鼠标跟随（鼠标☞在元素的中心，缓动动画慢慢移动）
开始位置 var leaderX = pic.offsetLeft;//水平方向的当前位置
目标位置 var targetX = pageX - pic.offsetWidth / 2
<script>
var timer = null;
//找人
var pic = document.getElementById("pic");
//在页面上 点击的时候 获取鼠标在页面上的位置 让图片 渐渐到 到这个位置
document.onmousemove = function (event) {
clearInterval(timer);
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//让图片 渐渐到 到这个位置
timer = setInterval(function () {
//step = (target - leader) / 10
//leader = leader + step
//水平方向的目标，如果不减就是左上角，减了相当于targetX小了
var targetX = pageX - pic.offsetWidth / 2
var targetY = pageY - pic.offsetHeight / 2;//
var leaderX = pic.offsetLeft;//水平方向的当前位置
var leaderY = pic.offsetTop;//
var stepX = (targetX - leaderX) / 10;
var stepY = (targetY - leaderY) / 10;
stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
leaderX = leaderX + stepX;
leaderY = leaderY + stepY;
pic.style.left = leaderX + "px";//一定要记得加单位
pic.style.top = leaderY + "px";//一定要记得加单位
if (leaderX === targetX && leaderY === targetY) {
clearInterval(timer);
}
}, 1);
};
</script>
- 拖拽（盒子的位置设置为，鼠标位置-鼠标在盒子里面位置）
d_box.style.left = pageX - boxX + "px";
d_box.style.top = pageY - boxY + "px";
<script>
//找人
var d_box = document.getElementById("d_box");//盒子整体
var drop = document.getElementById("drop");//拖动条
//鼠标在盒子的头部按下 盒子整体跟着鼠标移动
//onmousedown 鼠标按下事件
drop.onmousedown = function (event) {
//鼠标按下之后 获取此刻 鼠标在d_box中的位置
var event = event || window.event;
//鼠标在页面中的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//鼠标在盒子中的位置
//注意 因为要对d_box进行移动 所以加了定位 所以就不能算 drop的offsetLeft
var boxX = pageX - d_box.offsetLeft;//鼠标在盒子中的水平位置
var boxY = pageY - d_box.offsetTop;//鼠标在盒子中的竖直位置
//按下后变为可拖动状态 鼠标移动后 让盒子跟着鼠标移动
document.onmousemove = function (event) {
//让盒子跟着鼠标走
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//根据鼠标位置设置盒子位置
d_box.style.left = pageX - boxX + "px";
d_box.style.top = pageY - boxY + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
};
}
document.onmouseup = function () {
document.onmousemove = null;
};
</script>
$(".hd").mousedown(function (event) {
//鼠标按下之后 获取此刻 鼠标在d_box中的位置
var event = event || window.event;
//鼠标在页面中的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//鼠标在盒子中的位置
//注意 因为要对d_box进行移动 所以加了定位 所以就不能算 drop的offsetLeft
var offset = $(".d-box").offset();
var boxX = pageX - offset.left;//鼠标在盒子中的水平位置
var boxY = pageY - offset.top;//鼠标在盒子中的竖直位置
// //按下后变为可拖动状态 鼠标移动后 让盒子跟着鼠标移动
$(document).mousemove(function (event) {
//让盒子跟着鼠标走
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var left1 = pageX - boxX;
var top1 = pageY - boxY;
//根据鼠标位置设置盒子位置
$(".d-box").css("left",left1)
$(".d-box").css("top",top1 )
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
});
$(document).mouseup(function(){
$(document).unbind("mousemove");
})
})
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)<span id="box_close">【关闭】</span> </div>
<div class="bd"></div>
</div>
