1000字范文 > js实现页面图片滚动放大预览拖动旋转

js实现页面图片滚动放大预览拖动旋转

时间：2020-05-28 21:43:32

相关推荐

js实现页面图片滚动放大预览拖动旋转

demo源码地址：/download/zwl18210851801/10958698

1.html内容

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>imgZoom</title><style type="text/css">.imgZoom{width:300px;cursor: pointer;}</style></head><body><div id="dpLTE" class="container-fluid" v-cloak><img src="images/img1.jpg" class='imgZoom' ><img src="images/img2.jpg" class='imgZoom'><script type="text/javascript" src="javascripts/jquery.min.js"></script><script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script><script type="text/javascript" src="javascripts/jquery.imgZoom.js"></script><script type="text/javascript" src="javascripts/jquery.drag.js"></script><script type="text/javascript">$(".imgZoom").imgZoom();</script></div></body></html>

2.jquery.mousewheel.js

/*! Copyright (c) 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 Browserifymodule.exports = factory;} else {// Browser globalsfactory(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 deltaif ( '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 eventif ( '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 compatabilitiydelta = 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 furtherif ( 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 pagesif ( 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 valuesabsDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );if ( !lowestDelta || absDelta < lowestDelta ) {lowestDelta = absDelta;// Adjust older deltas if necessaryif ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {lowestDelta /= 40;}}// Adjust older deltas if necessaryif ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {// Divide all the things by 40!delta /= 40;deltaX /= 40;deltaY /= 40;}// Get a whole, normalized value for the deltasdelta = 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 objectevent.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 argumentsargs.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 = 120if (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

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();}});}});

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

js实现页面图片滚动放大预览 拖动 旋转

js实现页面图片滚动放大预览拖动旋转