当前位置：首页 > 网页特效 > 图片特效

ImageViewer-仿谷歌图片缩放和平移图片预览jQuery插件

分类：图片特效日期：2024-05-14 点击(2) 评论(0)

简介

使用该图片查看插件需要引入jQuery和imageviewer.min.js以及imageviewer.css文件。

```html
<link rel="stylesheet" href="js/imageviewer.css">
<script src="js/jquery.min.js"></script>
<script src="js/imageviewer.min.js"></script>   
```           
#####  全屏模式
全屏模式的HTML结构如下：

```html
<div id="image-gallery-1" class="cf">
    <img src="assets/images/image_viewer/1.jpg"
         data-high-res-src="assets/images/image_viewer/1_big.jpg" alt="" class="gallery-items">
    <img src="assets/images/image_viewer/2.jpg"
         data-high-res-src="assets/images/image_viewer/2_big.jpg" alt="" class="gallery-items">
    <img src="assets/images/image_viewer/3.jpg"
         data-high-res-src="assets/images/image_viewer/3_big.jpg" alt="" class="gallery-items">
    <img src="assets/images/image_viewer/4.jpg"
         data-high-res-src="assets/images/image_viewer/4_big.jpg" alt="" class="gallery-items">
</div>                
```
##### 初始化方法：

```html
$(function () {
    var viewer = ImageViewer();
    $('.gallery-items').click(function () {
        var imgSrc = this.src,
            highResolutionImage = $(this).data('high-res-img');
 
        viewer.show(imgSrc, highResolutionImage);
    });
});        
```        
#####  容器模式
```html
<div id="image-gallery-2">
    <div class="image-container"></div>
    <img src="assets/images/left.svg" class="prev"/>
    <img src="assets/images/right.svg"  class="next"/>
    <div class="footer-info">
        <span class="current"></span>/<span class="total"></span>
    </div>
</div>       
```         
##### 初始化方法：

```html
$(function () {
    var images = [{
        small : 'assets/images/image_viewer/1.jpg',
        big : 'assets/images/image_viewer/1_big.jpg'
    },{
        small : 'assets/images/image_viewer/2.jpg',
        big : 'assets/images/image_viewer/2_big.jpg'
    },{
        small : 'assets/images/image_viewer/3.jpg',
        big : 'assets/images/image_viewer/3_big.jpg'
    },{
        small : 'assets/images/image_viewer/4.jpg',
        big : 'assets/images/image_viewer/4_big.jpg'
    }];
 
    var curImageIdx = 1,
        total = images.length;
    var wrapper = $('#image-gallery-2'),
        curSpan = wrapper.find('.current');
    var viewer = ImageViewer(wrapper.find('.image-container'));
 
    //display total count
    wrapper.find('.total').html(total);
 
    function showImage(){
        var imgObj = images[curImageIdx - 1];
        viewer.load(imgObj.small, imgObj.big);
        curSpan.html(curImageIdx);
    }
 
    wrapper.find('.next').click(function(){
         curImageIdx++;
        if(curImageIdx > total) curImageIdx = 1;
        showImage();
    });
 
    wrapper.find('.prev').click(function(){
         curImageIdx--;
        if(curImageIdx < 0) curImageIdx = total;
        showImage();
    });
 
    //initially show image
    showImage();
});            
```    
#####  图片模式
```html
<div id="image-gallery-3" class="cf">
    <img src="assets/images/image_viewer/1.jpg"
              data-high-res-src="assets/images/image_viewer/1_big.jpg" alt="" class="pannable-image">
    <img src="assets/images/image_viewer/2.jpg"
              data-high-res-src="assets/images/image_viewer/2_big.jpg" alt="" class="pannable-image">
</div>        
```         
##### 初始化方法：

```html
$(function () {
    $('.pannable-image').ImageViewer();
});    
```            
#####  配置参数
ImageViewer函数：

```html
// container 和 options都是可选参数
var viewer = ImageViewer(container, options);   
```             
container可以是选择器字符串，jQuery对象或DOM对象。ImageViewer会返回一个viewer实例对象，可以使用它来调用方法。

传入参数的格式为：

```html
var viewer = ImageViewer('#container',{
    maxZoom : 400
});   
```            
可用的配置参数有：

| 参数  |  允许值 | 默认值  | 描述  |
| ------------ | ------------ | ------------ | ------------ |
|zoomValue|百分比值|100|定义图片初始化是的百分比值|
|maxZoom|百分比值|500|图片最大可以缩放的百分比值|
|snapView|boolean|true|是否显示snap视图|
|refreshOnResize|boolean|true|在浏览器窗口大小改变的时候是否刷新viewer|

#####  方法
zoom(zoomValue,point)：通过代码来缩放图片。
- zoomValue：缩放的百分比值。
- point：缩放中心的点坐标{x,y}。如果没有定义使用容器的中心作为缩放的中心。
```html
viewer.zoom(300, {x:500, y: 500});  
```
resetZoom()：根据参数(Options)中给定的值来重置缩放值。
```html
viewer.resetZoom(); 
```
refresh()：刷新viewer。
```html
viewer.refresh(); 
```
show(imgSrc, highResImg)：显示全屏模式的图片预览。（只有插件使用全屏模式来初始化时才有效）
- imgSrc：小图的URL地址。
- highResImg：同一张图片的高质量版本。
```html
viewer.show('image1.png','hi-res-image1.png'); 
```
hide()：隐藏全屏模式viewer。（只有插件使用全屏模式来初始化时才有效）
```html
viewer.hide(); 
```
load(imgSrc, highResImg)：在viewer中加载一张图片。在全屏模式和容器模式中都有效。
- imgSrc：小图的URL地址。
- highResImg：同一张图片的高质量版本。
```html
viewer.load('image1.png','hi-res-image1.png'); 
```
destroy()：销毁实例以及绑定的事件。
```html
viewer = viewer.destroy();
```

web299.com

ImageViewer-仿谷歌图片缩放和平移图片预览jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果