jQuery-实现图片的放大镜显示效果

这篇文章发布于 2009年08月30日,星期日,21:25,归类于 jQuery相关。 阅读 88420 次, 今日 5 次 6 条评论

 

网上购物日趋流行,商品的图片很重要,一个页面上信息量很大,商品图片必然大小有限,很流行的做法是鼠标移动到图片上,图片放大显示,例如:淘宝。

淘宝商品图片放大效果截图

然而,这里只是单纯的放大,如果能够实现移动放大,局部放大,那么效果会更上一层楼。这里,即将展示的就是类似于放大镜效果的图片局部放大效果。

先看效果截图:

图片放大镜效果截图

点击进入:效果演示页面(含文件打包下载)

使用的固定模式是<a>标签里面嵌套<img>标签,<a>标签href指向放大的图片路径。要想哪张图片放大镜显示,就直接调用哪张图片。例如:

jQuery.noConflict();
jQuery(document).ready(function(){
    $("img.zxx_zoom_image").jqueryzoom();
});

表示classzxx_zoom_image<img>将调用图片放大的js函数,如果其父标签为<a>标签,且href指向一个大图地址,则即可实现图片的放大镜效果。

本实例插件js已经被我稍微修改了一下。

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 庚午说道:

    很好,很强大!

  2. 流水说道:

    是啊,还有就是淘宝上鼠标放到图片上会有一个放大区域.这个又是怎么实现的嗯?

  3. 蜗牛说道:

    这个效果不错,不过有点不明白放大的算法,zxx可否图文详解一下? 🙂

    • 前端小白说道:

      不涉及到算法吧?

      • 特朗普的尴尬说道:

        准确来说,不是算法。就是计算鼠标当前离视口区域的x,y值,图片离视口区域的值,放大的区域的值=当前鼠标的区域值-鼠标离开的区域值

  4. 游客说道:

    之前很惊讶tb的那个效果,看完这个,才知道何为小屋大屋