JavaScript图片的放大缩小及拖拽

实现效果如下:

实现代码:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}
        div img{position:absolute;height:100%;width:auto;cursor:move;}
    </style>
</head>
<body>
<div id="div" onmousewheel="return bbimg(this)"><img id="img" border="0" src="img/zs.jpg" /></div>
<script language="javascript">
    var params = {
        zoomVal:1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    //图片缩放
    function bbimg(o){
        var o=o.getElementsByTagName("img")[0];
        params.zoomVal+=event.wheelDelta/1200;
        if (params.zoomVal >= 0.2) {
            o.style.transform="scale("+params.zoomVal+")";
        } else {
            params.zoomVal=0.2;
            o.style.transform="scale("+params.zoomVal+")";
            return false;
        }
    }
    //获取相关CSS属性
    var getCss = function(o,key){
        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
    };
    //拖拽的实现
    var startDrag = function(bar, target, callback){
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
        //o是移动对象
        bar.onmousedown = function(event){
            params.flag = true;
            if(!event){
                event = window.event;
                //防止IE文字选中
                bar.onselectstart = function(){
                    return false;
                }
            }
            var e = event;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        document.onmouseup = function(){
            params.flag = false;
            if(getCss(target, "left") !== "auto"){
                params.left = getCss(target, "left");
            }
            if(getCss(target, "top") !== "auto"){
                params.top = getCss(target, "top");
            }
        };
        document.onmousemove = function(event){
            var e = event ? event: window.event;

            if(params.flag){
                var nowX = e.clientX, nowY = e.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX+ "px";
                target.style.top = parseInt(params.top) + disY+ "px";

                if (typeof callback == "function") {
                    callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                }

                if (event.preventDefault) {
                    event.preventDefault();
                }
                return false;
            }


        }
    };
    startDrag(document.getElementById("img"),document.getElementById("img"))
</script>
</body>
</html>

 

  • 6
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辣姐什么鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值