写一个图片放大的效果，图片放大的插件

好好总结下前端页面中经常会用到的一些效果，到时候用的时候就省事很多的。

现在弄一个图片放大的效果，在展示产品的时候经常用到。就算是展示自己的图片，也能展示的完美，这叫合理

利用空间。

思想内容是：当鼠标移动到小图片的列表区域中，将选中的图片克隆，然后将克隆的图片变大,鼠标移开，去掉克隆的html结构。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大</title>
<style>
 img{border:none;}
        ul,li{
            margin:0;
            padding:0;
        }
        li{
            list-style:none;
            float:left;
            display:inline;
            margin-right:10px;
        }
        #imglist img{width:150px;height:120px;}
        #imgshow{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:5px;
            color:#fff;
            display:none;
        }

</style>

</head>
<body>
<div>
    <ul class="cfix" id="imglist">
        <li><img src="http://www.jquery001.com/images/demo/35624390.jpg" width="80" height="80"/></li>
        <li><img src="http://www.jquery001.com/images/demo/35624390.jpg"  width="80" height="80" /></li>
    </ul>
</div>

</body>
</html>

重点的javascript来了

<script type="text/javascript">
var showImage = function(){
          var xOffset = 10;
          var yOffset = 30;
            $('#imglist').find("img").hover(
                function(e){
                    var _src = $(this).attr('src');    
                    
                    $("<img id='imgshow' src='" + _src + "' />").appendTo("body"); //将选中的图片克隆
                    $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                       .css("left", (e.pageX + yOffset) + "px") .fadeIn("fast");//选中的图片放大
                    
                },
                    function(){
                    $("#imgshow").remove(); 
            });    
              
    }
    $(function(){
            showImage(); 
    })
    
    
</script>

但是你会发现一个问题，放大的图片总会出现在一个地方，不会跟随鼠标的移动而移动。

这个就需要 mousemove事件

$('#imglist').find("img").mousemove(
                    function(e){
                    $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                       .css("left", (e.pageX + yOffset) + "px");
                    }
            );

接下你你就可以展示自己的图片放大效果。

jquery插件的三种写法：虽然我不是特别的董，但是我可以照猫画虎。

第一种：不要用在页面显式调用JQuery的方法，而是通过直接添加JQuery插件脚本引用，即可实现对该插件的调用。

一般，如果需要用到一些全局的JQuery插件，即：插件的方法不需要显式调用，而是引用脚本即可；同时，这种插件一般对整个Web页面起到全局配置或设置的作用，如：对<body></body>内部的内容进行整体布局，此时可以采用脚本引用的方式实现。

插件代码示例：

(function ($) {
        $.showImage = { set: function () {
               var xOffset = 10;
               var yOffset = 30;
                $('#imglist').find("img").hover(
                    function(e){
                        var _src = $(this).attr('src');    
                        
                        $("<img id='imgshow' src='" + _src + "' />").appendTo("body"); 
                        $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                        .css("left", (e.pageX + yOffset) + "px") .fadeIn("fast");
                        
                    },
                        function(){
                        $("#imgshow").remove(); 
                });    
                $('#imglist').find("img").mousemove(
                        function(e){
                        $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                        .css("left", (e.pageX + yOffset) + "px");
                        }
                );    
                
            }
        };
    //此处需要进行自调用
    $(function () {
        $.showImage.set();
    });
})(jQuery);

示例说明：如果上面这段代码在showImages.js文件中，那么，我们只需要在页面上添加对此脚本文件的引用即可，引用方式为：<script src="Scripts/showImages.js" type="text/javascript"></script> ，当然，在所有要用到JQuery的地方，需要首先添加对JQuery库脚本的引用。在引用型插件的代码中，最主要的就是在插件中要主动调用自己所写的插件方法，上面代码中有注释的地方。否则，我们写的插件代码将不会起作用。

2.对JQuery自身的扩展插件
顾名思义，这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
插件代码示例:

$.extend({
    showImages: function(imglist){
       var xOffset = 10;
       var yOffset = 30;
       var img = $("#"+imglist).find('img');
        $(img).hover(
            function(e){
                var _src = $(this).attr('src');    
                
                $("<img id='imgshow' src='" + _src + "' />").appendTo("body"); 
                $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                .css("left", (e.pageX + yOffset) + "px") .fadeIn("fast");
                
            },
                function(){
                $("#imgshow").remove(); 
        });    
        $(img).mousemove(
                function(e){
                $('#imgshow').css("top", (e.pageY - xOffset) + "px") 
                .css("left", (e.pageX + yOffset) + "px");
                }
        );    
    }
})

示例说明：当要对JQuery自身进行扩展的时候，需要采用$.extend();的形式进行开发，JQuery的extend()方法为我们提供了扩展 JQuery自身的方式，在extend()方法中，我们采用{...}的形式编写具体的方法体。其中，最重要的是要定义我们自己的扩展方法，如示例中的 showImages。定义的方式是：方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法，而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下：

$(document).ready(function () {

$.showImages("imglist");

});

</script>