好好总结下前端页面中经常会用到的一些效果，到时候用的时候就省事很多的。
现在弄一个图片放大的效果，在展示产品的时候经常用到。就算是展示自己的图片，也能展示的完美，这叫合理
利用空间。
思想内容是：当鼠标移动到小图片的列表区域中，将选中的图片克隆，然后将克隆的图片变大,鼠标移开，去掉克隆的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插件脚本引用，即可实现对该插件的调用。
(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页面通过智能提示显示出来。页面中调用的代码如下：