【PC端】jQuery zoom仿微博简约贴图片缩小放大查看支持图片旋转查看

效果图为：从图一变为图二

图二为：

其中加载了jquery.artZoom.js这个插件；

JS代码为：

jQuery(function ($) {
  $('.artZoom').artZoom({
    path: './images', // 设置artZoom图片文件夹路径
    preload: true,    // 设置是否提前缓存视野内的大图片
    blur: true,     // 设置加载大图是否有模糊变清晰的效果
    
    // 语言设置
    left: '左旋转',    // 左旋转按钮文字
    right: '右旋转',   // 右旋转按钮文字
    source: '看原图'   // 查看原图按钮文字
  });
});

文件下载路径为：baiduyunguanjia-javascript实例-20151029-jQuery zoom仿微博简约贴图片缩小放大查看支持图片旋转查看

网址访问：http://www.17sucai.com/pins/3704.html

第二个例子：jquery图片放大点击小图放大查看大图效果

效果图为：

图一：为图二：

HTML代码为：

<div class="zoombox">
     <div class="tit">“如果真有那种一拍即合的爱情就好了，不需要暧昧的你来我往，不需要花太多时间去培养，我已经没有力气去玩猜测的游戏，因为我怕会受伤害。” 我们想要的，大概就是那种，你看一眼就知道，是这个人，没错了。”——舒淇</div>
     <span class="photoBox">
           <div class="loadingBox"><span class="loading"></span></div>
           <img src="images/1326m.jpg" class="zoom" onclick="zoom_image($(this).parent());">
     </span>
     <!--photoBox end-->
     <div class="photoArea" style="display:none;">
          <div><img src="about:blank" class="minifier" onclick="zoom_image($(this).parent().parent());"></div>
          <p class="toolBar gc"><span><a class="green" href="javascript:void(0)" onclick="zoom_image($(this).parent().parent().parent());">收起</a></span>|<span class="view"><a class="green" href="images/1326l.jpg" target="_blank">查看原图</a></span></p>
     </div>
     <!--photoArea end-->   
</div>

CSS代码为：

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.zoom{zoom:1;position:relative;}
.zoombox{width:530px;margin:20px auto 0 auto;}
.zoombox .tit{font-size:12px;color:#5e5e5e;line-height:20px;margin:0 0 10px 0;}
.zoombox .photoBox{background:#fff;padding:2px;border:1px solid #E5E5E5;display:inline-block;margin:10px 20px 0 0;position:relative;}
.zoombox .photoBox img{display:block;}
.zoombox .photoBox .loadingBox{background:#fff;opacity:.3;*filter:alpha(opacity=30);z-index:1;text-align:center;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;display:none;}
.zoombox .photoBox .loading{background:url(images/loading_16.gif) no-repeat 0 0;width:16px;height:16px;display:inline-block;}
.zoombox .zoom{cursor:url(images/big.cur),default;}
.zoombox .photoArea{background:#F7F7F7;border:1px solid #EBEBEB;padding:10px 0;text-align:center;zoom:1;}
.zoombox .minifier{cursor:url(images/small.cur),default;}
.zoombox .photoArea .toolBar{padding:7px 0 0 0;text-align:right;font-size:12px;}
.zoombox .photoArea .toolBar a{color:#3366cc;text-decoration:none;}
.zoombox .photoArea .toolBar .view{padding-left:15px;background:url(images/array.gif) no-repeat;line-height:14px;margin-left:8px;}

JS代码为;

function zoom_image(obj){
 if(obj.hasClass('photoBox')){
    var load=obj.find('.loadingBox');
    load.show();
    var img=obj.next().find('img');
    if(img.attr('src') == 'about:blank'){
      img.attr('src',obj.find('img').attr('src').replace('m.','l.'));
      img.load(function(){
        obj.hide();
        obj.next().show();
      });
    }else{
       obj.hide();
       obj.next().show();
    }
 }else{
  obj.hide();
  obj.prev().show();
  obj.prev().find('.loadingBox').hide();
 }
}

 文件下载路径为：baiduyunguanjia-javascript实例-20151029-jQuery zoom仿微博简约贴图片缩小放大查看支持图片旋转查看

网址访问：http://www.17sucai.com/pins/417.html