鼠标放图片上==放大镜显示效果

<!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="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" class="thumbnail-list">
        <img class="thumbnail" src="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" />
    </a>
    <a href="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" class="thumbnail-list">
        <img class="thumbnail" src="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" />
    </a>
    <a href="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" class="thumbnail-list">
        <img class="thumbnail" src="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" />
    </a>
    <a href="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" class="thumbnail-list">
        <img class="thumbnail" src="https://cs.m.xczhihui.com/xcview/images/anchor_entry.jpg" />
    </a>
</body>
<script type="text/javascript" src="https://cs.m.xczhihui.com/xcview/html/demo/js/jquery.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>
鼠标放上给图片添加一个放大镜效果
鼠标放图片上==放大镜显示效果

猜你喜欢
