<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery-图片的放大镜显示效果</title> <style type="text/css"> img { max-width: none; } .thumbnail-list { display: inline-block; width: 1.2em; height: 1.1em; text-align: center; font-size: 128px; } .thumbnail-list img.thumbnail { padding: 3px; border: 1px solid #cccccc; background: white; vertical-align: middle; position: relative; } .thumbnail-list:hover, .thumbnail-list:hover img.thumbnail { border-color: #ff3300; } .magnify { width: 200px; height: 200px; padding: 3px; background: white; border: 1px solid #cccccc; text-align: center; position: absolute; z-index: 1000; left: 0; top: 0; overflow: hidden; } .thumbnail { width: 1em; height: 1em; } </style> </head> <body> <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" class="thumbnail-list"> <img class="thumbnail" src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" /> </a> <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" class="thumbnail-list"> <img class="thumbnail" src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" /> </a> <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" class="thumbnail-list"> <img class="thumbnail" src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" /> </a> <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" class="thumbnail-list"> <img class="thumbnail" src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" /> </a> </body> <!-- <script type="text/javascript" src="https://cs.m.xczhihui.com/xcview/html/demo/js/jquery.js"></script> --> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript"> // jQuery.noConflict(); jQuery(document).ready(function() { $("img.thumbnail").jqueryzoom(); }); </script> <script> (function($) { $.fn.jqueryzoom = function(options) { var settings = { xzoom: 200, yzoom: 200, offset: 10, position: "right" }; if (options) { $.extend(settings, options); } $(this).hover(function() { var imageLeft = $(this).get(0).offsetLeft; var imageRight = $(this).get(0).offsetRight; var imageTop = $(this).get(0).offsetTop; var imageWidth = $(this).get(0).offsetWidth; var imageHeight = $(this).get(0).offsetHeight; var bigimage = $(this).parent().attr("href"); if ($("span.magnify").get().length == 0) { $(this).after("<span class='magnify'><img class='bigimg' src='" + bigimage + "'/></span>"); } if (settings.position == "right") { leftpos = imageLeft + imageWidth + settings.offset; } else { leftpos = imageLeft - settings.xzoom - settings.offset; } $("span.magnify").css({ top: imageTop, left: leftpos }); $("span.magnify").width(settings.xzoom); $("span.magnify").height(settings.yzoom); $("span.magnify").show(); $(document.body).mousemove(function(e) { var bigwidth = $(".bigimg").get(0).offsetWidth; var bigheight = $(".bigimg").get(0).offsetHeight; var scaley = 'x'; var scalex = 'y'; if (isNaN(scalex) | isNaN(scaley)) { var scalex = Math.round(bigwidth / imageWidth); var scaley = Math.round(bigheight / imageHeight); } mouse = new MouseEvent(e); scrolly = mouse.y - imageTop - ($("span.magnify").height() * 1 / scaley) / 2; $("span.magnify").get(0).scrollTop = scrolly * scaley; scrollx = mouse.x - imageLeft - ($("span.magnify").width() * 1 / scalex) / 2; $("span.magnify").get(0).scrollLeft = (scrollx) * scalex; }); }, function() { $("span.magnify").hide(); $(document.body).unbind("mousemove"); $(".lenszoom").remove(); $("span.magnify").remove(); }); } })(jQuery); function MouseEvent(e) { this.x = e.pageX this.y = e.pageY } </script> </html>
