事件对象案例（鼠标跟随，放大镜，拖拽）

• 鼠标跟随（鼠标☞在元素的中心，缓动动画慢慢移动）
  开始位置 var leaderX = pic.offsetLeft;//水平方向的当前位置
  目标位置 var targetX = pageX - pic.offsetWidth / 2

• 拖拽（盒子的位置设置为，鼠标位置-鼠标在盒子里面位置）
  d_box.style.left = pageX - boxX + "px";
  d_box.style.top = pageY - boxY + "px";

 $(".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");
       
        })
    })

         
注册信息 (可以拖拽)【关闭】