先看效果图:
JS文件:
//$(function ($) { $.fn.blowup = function (attributes,brother,beishu) { var $element = this; var $className = $element.attr("class"); var $class1,$brother //class 与 beother 变量 // If the target element is not an image if (!$element.is("img")) { console.log("%c Blowup.js Error: " + "%cTarget element is not an image.", "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;", "background: #FCEBB6; color: #F07818; font-size: 17px;"); return; } // Constants var $IMAGE_URL = $element.attr("src"); var $brotherSrc = $("."+brother).attr("src"); var $IMAGE_WIDTH = $element.width(); var $IMAGE_HEIGHT = $element.height(); var NATIVE_IMG = new Image(); NATIVE_IMG.src = $element.attr("src"); //NATIVE_IMG.width = "900"; //NATIVE_IMG.height = "900"; // Default attributes var defaults = { round : true, width : 200, height : 200, background : "#FFF", shadow : "0 8px 17px 0 rgba(0, 0, 0, 1)", border : "6px solid #FFF", cursor : true, zIndex : 999999 } // Update defaults with custom attributes var $options = $.extend(defaults, attributes); // Modify target image $element.on('dragstart', function (e) { e.preventDefault(); }); $element.css("cursor", $options.cursor ? "crosshair" : "none"); // Create magnification lens element var lens = document.createElement("div"); lens.id = ""+$className+"BlowupLens"; // Attack the element to the body $("body").append(lens); // Updates styles $blowupLens = $("#"+$className+"BlowupLens"); $blowupLens.css({ "position" : "absolute", "visibility" : "hidden", "pointer-events" : "none", "zIndex" : $options.zIndex, "width" : $options.width, "height" : $options.height, "border" : $options.border, "background" : $options.background, "border-radius" : $options.round ? "50%" : "none", "box-shadow" : $options.shadow, "background-repeat" : "no-repeat", }); // Show magnification lens $element.mouseenter(function () { $class1 = $element.attr("class"); $blowupLens = $("#"+$class1+"BlowupLens"); $blowupLens.css("visibility", "visible"); $brother = $("#"+brother+"BlowupLens"); $brother.css("visibility", "visible"); }) // Mouse motion on image $element.mousemove(function (e) { /*$blowupLens = $("#"+$class1+"BlowupLens"); $brother = $("#"+brother+"BlowupLens");*/ // Lens position coordinates var lensX = e.pageX - $options.width / 2; var lensY = e.pageY - $options.height / 2; // Relative coordinates of image var relX = e.offsetX; var relY = e.offsetY; // Zoomed image coordinates var zoomX = -Math.floor(relX / $element.width() * NATIVE_IMG.width - $options.width / 2); var zoomY = -Math.floor(relY / $element.height() * NATIVE_IMG.height - $options.height / 2); //console.log(relX+"/"+$element.width()+"*"+ NATIVE_IMG.width ); //console.log(zoomX); //console.log(zoomY); var bgSize; switch(beishu){ case 0.5: zoomX = zoomX+(zoomX*beishu); zoomY = zoomY+(zoomY*beishu); bgSize =400*2.5; break; case 1.5: zoomX = zoomX+(zoomX*beishu); zoomY = zoomY+(zoomY*beishu); bgSize =400*3.5; break; default: bgSize = NATIVE_IMG.width; } // Apply styles to lens $blowupLens.css({ left : lensX, top : lensY, "background-image" : "url(" + $IMAGE_URL + ")", "background-position" : zoomX + " " + zoomY, "background-size" : bgSize }); // 此处if else 待优化逻辑。↓ if(brother == "rightImg"){ $brother.css({ left : lensX + $element.parent().width(), top : lensY, "background-image" : "url(" + $brotherSrc + ")", "background-position" : zoomX + " " + zoomY, "background-size" : bgSize }); }else if(brother == "laftImg"){ $brother.css({ left : lensX - $element.parent().width(), top : lensY, "background-image" : "url(" + $brotherSrc + ")", "background-position" : zoomX + " " + zoomY, "background-size" : bgSize }); } }) // 鼠标移除 $element.mouseleave(function () { /*$blowupLens = $("#"+$class1+"BlowupLens");*/ $blowupLens.css("visibility", "hidden"); /*$brother = $("#"+brother+"BlowupLens");*/ $brother.css("visibility", "hidden"); }) } //})
HTML 文件
<!DOCTYPE html5> <html> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" type="text/css" href="demo.css"/>--> </head> <body> <div style="text-align: center;margin: 10px;"> <button οnclick="oneX()"> 一倍</button> <button οnclick="twoX()"> 二倍</button> <button οnclick="threeX()"> 三倍</button> </div> <div class="wrap" style="display: flex;justify-content: center;"> <div class="left" style="margin-right: 50px;"> <img src="http://static.sunday90.com/enlarge/images/03.jpg" width="400" class="laftImg" /> </div> <div class="right" > <img src="http://static.sunday90.com/enlarge/images/04.jpg" width="400" class="rightImg" /> </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="blowup.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $(".laftImg").blowup({},"rightImg",1); $(".rightImg").blowup({},"laftImg",1); }) function oneX(){ $(".laftImg").blowup({},"rightImg",1); $(".rightImg").blowup({},"laftImg",1); } function twoX(){ $(".laftImg").blowup({},"rightImg",0.5); $(".rightImg").blowup({},"laftImg",0.5); } function threeX(){ $(".laftImg").blowup({},"rightImg",1.5); $(".rightImg").blowup({},"laftImg",1.5); } </script> </html>