基于jquery实现图片放大功能

本文实例为大家分享了jquery实现图片放大功能的具体实现代码，供大家参考，具体内容如下

图片放大功能类似于淘宝上的商品的查看，如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码，会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js；只需要引入次类库，引用此类库，添加一些css代码即可实现此功能；
HTML框架如下：

注意，img中必须有jqimg属性，这个属性放的是大图的地址；

js代码如下：

用法：$(".jqzoom").jqueryzoom

如果只添加这么多代码效果会出来，但是不是那么的理想。为了更加美观，必须添加如下的css代码：

    .jqzoom{
      border:1px solid #BBB;
      float:left;
      position:relative;
      padding:0px;
      cursor:pointer;
    }
    
    
    div.zoomdiv {
      z-index:  999;
      position : absolute;
      top:0px;
      left:0px;
      width   : 200px;
      height  : 200px;
      background: #ffffff;
      border:1px solid #CCCCCC;
      display:none;
      text-align: center;
      overflow: hidden;
    }
    div.jqZoomPup {
      z-index  : 999;
      visibility: hidden;
      position : absolute;
      top:0px;
      left:0px;
      width   : 50px;
      height  : 50px;
      border: 1px solid #aaa;
      background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
    }
  

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。