div容器中的图片拖动 俺的创作

<div id="div1" style="overflow:hidden; cursor:move; background-color:#CCCCCC; width:90%; height:90%;">
 <img src="Winter.jpg" style="position:absolute; left:0px; top:0px;" οnmοusemοve="return false;">
</div>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" defer="defer">
function Point(x,y){
    this.x=x;
    this.y=y;
    return this;
}
function getMouseXY(e){
 return new Point(Event.pointerX(e),Event.pointerY(e));
}
var dragStartPoint=null;
var dragStartLeft=null;
var dragStartTop=null;
var mapLayer = $("div1");
function dragStart(){
    Event.observe(mapLayer, "mousedown", setStartVar, false);
    Event.observe(document, "mousemove", movingMap, false);
    Event.observe(document, "mouseup", dargClear, false);
}
dragStart();
function setStartVar(){
    dragStartPoint = getMouseXY(window.event);
    with(mapLayer.firstChild){
        dragStartLeft = style.pixelLeft;
        dragStartTop = style.pixelTop;
    }
}
function movingMap(){    
    if(dragStartPoint==null&&dragStartLeft==null&&dragStartTop==null)
        return;
    var mousePoint = getMouseXY(window.event);
    with(mapLayer.firstChild){
        style.left = dragStartLeft + (mousePoint.x - dragStartPoint.x) + "px";
        style.top = dragStartTop + (mousePoint.y - dragStartPoint.y) + "px";
    }
}
function dargClear(){
     dragStartPoint=null;
  dragStartLeft=null;
  dragStartTop=null;
}
function dargEnd(){
    dargClear();
    Event.stopObserving(mapLayer, "mousedown", setStartVar, false);
    Event.stopObserving(document, "mousemove", movingMap, false);
    Event.stopObserving(document, "mouseup", dargClear, false);
}
</script>
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值