js实现页面图片滚动放大预览，拖动、旋转
demo源码地址：https://download.csdn.net/download/zwl18210851801/10958698
1.html内容
imgZoom
2.jquery.mousewheel.js
/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
* Licensed under the MIT License (LICENSE.txt).
*
* Version: 3.1.9
*
* Requires: jQuery 1.2.2+
*/
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
slice = Array.prototype.slice,
nullLowestDeltaTimeout, lowestDelta;
if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
var special = $.event.special.mousewheel = {
version: '3.1.9',
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
// Store the line height and page height for this particular element
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
},
getLineHeight: function(elem) {
return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
},
getPageHeight: function(elem) {
return $(elem).height();
},
settings: {
adjustOldDeltas: true
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
},
unmousewheel: function(fn) {
return this.unbind('mousewheel', fn);
}
});
function handler(event) {
var orgEvent = event || window.event,
args = slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';
// Old school scrollwheel delta
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaX = deltaY * -1;
deltaY = 0;
}
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
delta = deltaY === 0 ? deltaX : deltaY;
// New school wheel delta (wheel event)
if ( 'deltaY' in orgEvent ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( 'deltaX' in orgEvent ) {
deltaX = orgEvent.deltaX;
if ( deltaY === 0 ) { delta = deltaX * -1; }
}
// No change actually happened, no reason to go any further
if ( deltaY === 0 && deltaX === 0 ) { return; }
// Need to convert lines and pages to pixels if we aren't already in pixels
// There are three delta modes:
// * deltaMode 0 is by pixels, nothing to do
// * deltaMode 1 is by lines
// * deltaMode 2 is by pages
if ( orgEvent.deltaMode === 1 ) {
var lineHeight = $.data(this, 'mousewheel-line-height');
delta *= lineHeight;
deltaY *= lineHeight;
deltaX *= lineHeight;
} else if ( orgEvent.deltaMode === 2 ) {
var pageHeight = $.data(this, 'mousewheel-page-height');
delta *= pageHeight;
deltaY *= pageHeight;
deltaX *= pageHeight;
}
// Store lowest absolute delta to normalize the delta values
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
if ( !lowestDelta || absDelta < lowestDelta ) {
lowestDelta = absDelta;
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
lowestDelta /= 40;
}
}
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
// Divide all the things by 40!
delta /= 40;
deltaX /= 40;
deltaY /= 40;
}
// Get a whole, normalized value for the deltas
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
// Add information to the event object
event.deltaX = deltaX;
event.deltaY = deltaY;
event.deltaFactor = lowestDelta;
// Go ahead and set deltaMode to 0 since we converted to pixels
// Although this is a little odd since we overwrite the deltaX/Y
// properties with normalized deltas.
event.deltaMode = 0;
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
// Clearout lowestDelta after sometime to better
// handle multiple device types that give different
// a different lowestDelta
// Ex: trackpad = 3 and mouse wheel = 120
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
function nullLowestDelta() {
lowestDelta = null;
}
function shouldAdjustOldDeltas(orgEvent, absDelta) {
// If this is an older event and the delta is divisable by 120,
// then we are assuming that the browser is treating this as an
// older mouse wheel event and that we should divide the deltas
// by 40 to try and get a more usable deltaFactor.
// Side note, this actually impacts the reported scroll distance
// in older browsers and can cause scrolling to be slower than native.
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
}
}));3.jquery.imgZoom.js
(function ($) {
$.fn.imgZoom = function () {
var mask =
"旋转\n" +
""+
"";
$("html").append(mask);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(window).resize(function () {
windowWidth = $(window).width();
windowHeight = $(window).height();
});
/*this.each(function () {
$(".imgZoom").click(function () {
});
});*/
$(document).on("click", ".imgZoom", function () {
$("#imgZoomMask").show();
var src = $(this).data("src") == undefined ? $(this).attr("src") : $(this).data("src");
var img = new Image();
img.src = src;
img.onload = function() {
var dom = "";
var displayWidth = 0;
var displayHeight = 0;
var style = "";
if (img.width > img.height) {
displayWidth = windowWidth / 2;
displayHeight = img.height * displayWidth / img.width;
style = "z-index:6666;position:absolute;top:" +
windowHeight / 2 +
"px;margin-top:-" +
displayHeight / 2 +
"px;left:" +
windowWidth / 2 +
"px;margin-left:-" +
displayWidth / 2 +
"px;cursor:pointer;";
dom = "![](" +
src +
")
";
} else {
displayHeight = windowHeight / 2;
displayWidth = displayHeight * img.width / img.height;
style = "z-index:6666;position:absolute;top:" +
windowHeight / 2 +
"px;margin-top:-" +
displayHeight / 2 +
"px;left:" +
windowWidth / 2 +
"px;margin-left:-" +
displayWidth / 2 +
"px;cursor:pointer;";
dom = "";
}
$("body").append(dom);
$("#imgZoomImg").dragging({
move: "both", //拖动方向，x y both
randomPosition: false //初始位置是否随机
});
}
});
var rotateNum = 0;
$(document).on("click", ".rotate", function () {
if(rotateNum===0){
$("#imgZoomImg").css("transform","rotate(90deg)");
rotateNum=90;
}else if(rotateNum===90){
$("#imgZoomImg").css("transform","rotate(180deg)");
rotateNum=180;
}else if(rotateNum===180){
$("#imgZoomImg").css("transform","rotate(270deg)");
rotateNum=270;
}else if(rotateNum===270){
$("#imgZoomImg").css("transform","rotate(0deg)");
rotateNum=0;
}
});
$(document).on("click", "#imgZoomMask", function () {
$("#imgZoomMask").hide();
$("#imgZoomImg").fadeOut().remove();
});
$(document).on("mousewheel",function(e,d) {
//d 1 上 -1 下
if (d === 1) {
var width = $("#imgZoomImg").width();
var height = $("#imgZoomImg").height();
$("#imgZoomImg").css({ "width": width * 1.2, "height": height * 1.2 });
}
if (d === -1) {
var width = $("#imgZoomImg").width();
var height = $("#imgZoomImg").height();
$("#imgZoomImg").css({ "width": width / 1.2, "height": height / 1.2 });
}
});
}
})(window.jQuery)4.jquery.drag.js
$.fn.extend({
//---元素拖动插件
dragging:function(data){
var $this = $(this);
var xPage;
var yPage;
var X;//
var Y;//
var xRand = 0;//
var yRand = 0;//
var father = $this.parent();
var defaults = {
move : 'both',
randomPosition : true ,
hander:1
}
var opt = $.extend({},defaults,data);
var movePosition = opt.move;
var random = opt.randomPosition;
var hander = opt.hander;
if(hander === 1){
hander = $this;
}else{
hander = $this.find(opt.hander);
}
//---初始化
father.css({"position":"relative","overflow":"hidden"});
$this.css({"position":"absolute"});
hander.css({"cursor":"move"});
var faWidth = father.width();
var faHeight = father.height();
var thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
var thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));
var mDown = false;//
var positionX;
var positionY;
var moveX ;
var moveY ;
if(random){
$thisRandom();
}
function $thisRandom(){ //随机函数
$this.each(function(index){
var randY = parseInt(Math.random()*(faHeight-thisHeight));///
var randX = parseInt(Math.random()*(faWidth-thisWidth));///
if(movePosition.toLowerCase() == 'x'){
$(this).css({
left:randX
});
}else if(movePosition.toLowerCase() == 'y'){
$(this).css({
top:randY
});
}else if(movePosition.toLowerCase() == 'both'){
$(this).css({
top:randY,
left:randX
});
}
});
}
hander.mousedown(function(e){
father.children().css({"zIndex":"0"});
$this.css({"zIndex":"6666"});
mDown = true;
X = e.pageX;
Y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
$(document).mouseup(function(e){
mDown = false;
});
$(document).mousemove(function(e){
xPage = e.pageX;//--
moveX = positionX+xPage-X;
yPage = e.pageY;//--
moveY = positionY+yPage-Y;
function thisXMove(){ //x轴移动
if(mDown == true){
$this.css({"left":moveX});
}else{
return;
}
if(moveX < 0){
$this.css({"left":"0"});
}
if(moveX > (faWidth-thisWidth)){
$this.css({"left":faWidth-thisWidth});
}
return moveX;
}
function thisYMove(){ //y轴移动
if(mDown == true){
$this.css({"top":moveY});
}else{
return;
}
if(moveY < 0){
$this.css({"top":"0"});
}
if(moveY > (faHeight-thisHeight)){
$this.css({"top":faHeight-thisHeight});
}
return moveY;
}
function thisAllMove(){ //全部移动
if(mDown == true){
$this.css({"left":moveX,"top":moveY});
}else{
return;
}
if(moveX < 0){
$this.css({"left":"0"});
}
if(moveY < 0){
$this.css({"top":"0"});
}
}
if(movePosition.toLowerCase() == "x"){
thisXMove();
}else if(movePosition.toLowerCase() == "y"){
thisYMove();
}else if(movePosition.toLowerCase() == 'both'){
thisAllMove();
}
});
}
});