<!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>
