图片放大缩小拖动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="http://www.h5al.cn/js/preview.css">
<style type="text/css">
.mask-layer-imgbox{
    width:400px;
    height:400px;
    border: 1px solid #ff9900;
}
.layer-img-box{
    width:100%;
    height:400px;
    overflow: hidden;
}
</style>
<body>

<div id="app">
    <img src="http://www.h5al.cn/js/img/shuaxin.png" width="30" height="30" style="cursor: pointer;margin-left:10px;margin-bottom: 4px;" onclick="boxReset()"/>
    <div class="mask-layer-imgbox">
        <div class="layer-img-box"><img id="vinpic"></div>
    </div>
</div>

</body>
<script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
$(function(){
    $("#vinpic").attr('src','http://www.h5al.cn/img/1.jpg')
    imgInit()
});

//看图用
var spin_n = 0; //旋转角度
var zoom_n = 1;//缩放 放大
/*图片操作方法*/
var imgInit = function imgInit() {
    zoom_n = 1;//重置缩放比例
    /*图片拖拽*/
    var $div_img = $(".layer-img-box img");
    //绑定鼠标左键按住事件
    $div_img.bind("mousedown", function(event) {
        event.preventDefault && event.preventDefault(); //去掉图片拖动响应
        //获取需要拖动节点的坐标
        var offset_x = $(this)[0].offsetLeft; //x坐标
        var offset_y = $(this)[0].offsetTop; //y坐标
        //获取当前鼠标的坐标
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        //绑定拖动事件
        //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
        $(".layer-img-box").bind("mousemove", function(ev) {
            // 计算鼠标移动了的位置
            var _x = ev.pageX - mouse_x;
            var _y = ev.pageY - mouse_y;
            //设置移动后的元素坐标
            var now_x = (offset_x + _x) + "px";
            var now_y = (offset_y + _y) + "px";
            //改变目标元素的位置
            $div_img.css({
                top: now_y,
                left: now_x
            });
        });
        //当鼠标左键松开，接触事件绑定
        $(".layer-img-box").bind("mouseup", function() {
            $(".layer-img-box").unbind("mousemove");
        });
    });
    //绑定鼠标滚轮缩放图片
    $div_img.bind("mousewheel DOMMouseScroll", function(e) {
        e = e || window.event;
        var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
        var dir = delta > 0 ? 'down' : 'up';
        zoomImg(this, dir,e);
        return false;
    });

    //鼠标滚轮缩放图片
    function zoomImg(o, delta,e) {
        // console.log(e);//鼠标位置放大该出定位换算太麻烦
        if(delta == 'up') {
            zoom_n -= 0.2;
            zoom_n = zoom_n <= 0.8 ? 0.8 : zoom_n;
        } else {
            zoom_n += 0.2;
        }
        // console.log(zoom_n);
        $(".mask-layer-imgbox img").css({
            "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
            "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
            "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
            "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
            "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
        });
    }
}
/*复位*/
function boxReset() {
    spin_n = 0;
    zoom_n = 1;
    $("#vinpic").attr("style","");
}
</script>
</html>

 

posted @ 2023-10-16 14:19  石头记1  阅读(28)  评论(0)    收藏  举报