基本信息
源码名称：Jquery 图片放大效果，类似淘宝商品放大显示 例子 付完整源码
源码大小：0.23M
文件格式：.zip
开发语言：js
更新时间：2013-06-15
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

调用方法如下：

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>便携式电子万年历 - 积分兑换 - 名吉管理处</title>
<style type="text/css">
#ShowPictureBox { width:300px; height:300px;overflow:hidden; }
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.JNMagnifier.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#ShowPictureBox").JNMagnifier({
            renderTo:"#ShowBigPictureBox"
        });
});
</script>
</head>
<body>

	    <div id="ShowPictureBox">
<img src="2011111614473078125001746.jpg" width="200" height="200">
	    </div>
	    <div id="ShowBigPictureBox" style=" position:absolute; top:20px; left:250px; overflow:hidden; display:none; border:3px solid #ccc; padding:5px; background-repeat:no-repeat; background-color:#fff; width:300px; height:300px;">
	    
	    </div>
	  

</body>
</html>

  



(function($){
    $.fn.JNMagnifier=function(setting){
    
        if(setting&&setting.renderTo){
            if(typeof(setting.renderTo)=="string"){
                setting.renderTo = $(setting.renderTo);
            }
        }else{
            return;
        }
        var _img_org_ = this.children("img");
        _img_org_.css("cursor","pointer");

        var __w = 0;
        var __h = 0;
        
        var __left = this.offset().left;
        var __top = this.offset().top;
        
        if(this.offsetParent())
        {
            __left =this.offsetParent().offset().left;
            __top =this.offsetParent().offset().top;
        }

        var _move_x = 0;
        var _move_y = 0;
        
        var _val_w = (setting.renderTo.width() / 2);
        var _val_h = (setting.renderTo.height() / 2);

        _img_org_.mouseover(function(){
            setting.renderTo.html('<img src="'   _img_org_.attr("src")   '" style="position:absolute;" id="JNMagnifierrenderToImg" />');
            setting.renderTo.show();
            var timer = setInterval(function(){
                __w = $("#JNMagnifierrenderToImg").width() / _img_org_.width();
                __h = $("#JNMagnifierrenderToImg").height() /_img_org_.height();
                if(__w>0){
                    clearInterval(timer);
                }
            },100);
        });
        
        _img_org_.mouseout(function(){
            setting.renderTo.hide();
        });
        
        _img_org_.mousemove(function(e){
            _move_x =0-Math.round((document.documentElement.scrollLeft e.clientX-__left) * __w - _val_w);
            _move_y =0-Math.round((document.documentElement.scrollTop e.clientY-__top) * __h - _val_h);
            $("#JNMagnifierrenderToImg").css({"left":_move_x   "px ","top":_move_y   "px"});
        });
    }
})(jQuery);