当前位置:jQuery学习 > jQuery > jQuery实现图片预览

jQuery实现图片预览

时间:2010-08-12QQ群:116983258

本篇内容为实现图片预览。当鼠标移动到指定图片上时,显示图片原图,实现预览功能,此效果可能大家已经见过了,今天主要说明一下实现的原理。

jQuery图片预览

首先看看简单的html,显示原始图片。

<li><a><img alt="安以轩" src="http://www.jquery001.com/images/demo/35624390.jpg" /></a></li>
<li><a><img alt="安以轩" src="http://www.jquery001.com/images/demo/35624390.jpg" /></a></li>

下边,我们着重看一下jQuery实现图片预览的主要过程。首先,先看看hover()事件。

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

可以看出程序首先找到id为imglist中的图片,光标移动到某个图片上时,将此图片的原始图片添加到body中,将id命名为imgshow。imgshow图片开始是不可见的,.css()为图片指定了位置,.fadeIn()最终显示原始图片。当光标离开图片时,将添加的预览图片移除,用到了remove()方法。可见,整个步骤并不复杂。

最后,当鼠标在图片上移动时,应该将图片预览也进行移动,用到了mousemove()方法,代码如下:

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

这样我们就实现了我们所想要的功能。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-image-preview.html

大家说了些什么

  1. 1. guegest 2010-12-22 15:55

    好文章啊 学习了!

  2. 2. 流水 2011-11-24 09:55

    这个效果挺好用。不过当图片太大,并且在浏览器底部的时候,发现有一部分被浏览器遮挡了。无法显示在可视范围内。这个怎么调整嗯?

  3. 3. Zzz 2011-12-31 14:08

    当然了,你图片过大肯定会了! 这不错简单明了实用!

  4. 4. 学习 2012-03-06 23:54

    学习了很多,谢谢!

所有话题