6种放大模式图片放大镜jQuery插件

PetitQ 图片/图形 2020-6-29 2.33K 0 0

这是一款支持 6 种放大模式的 jQuery 图片放大镜插件。该图片放大镜支持 ie8，内置 6 种炫酷的图片放大效果，可以满足各种网站的图片放大效果需求。

使用方法

在页面中引入下面的文件。

也想出现在这里？联系我们吧

<script src="assets/js/jquery.min.js"></script>

<script src="assets/js/zoomsl.min.js"></script>

HTML 结构

<img src="product.jpg" alt="Image To Zoom" class="example">

可以通过 data-large 属性来设置大图。

<img src="product.jpg" data-large="full.jpg" alt="Image To Zoom" class="example">

还可以设置放大图片的描述信息。

```
<img src="product.jpg"
```
```
     data-large="full.jpg"
```
```
     data-title="tooltip Title"
```
```
     data-help="help Text"
```
```
     data-text-bottom="Bottom Text"
```
```
     alt="Image To Zoom"
```
```
     class="example"
```
```
>
```

初始化插件

```
$(function(){
```
```
  $(".example").imagezoomsl();
```
```
});
```

在图片加载时显示 loading。

```
$(".example").imagezoomsl({
```
```
 
```
```
  // loading spinner
```
```
  loadinggif: 'loading.gif',
```
```
 
```
```
  // opacity
```
```
  loadopacity: 0.1,
```
```
 
```
```
  // background color
```
```
  loadbackground: '#878787'
```
```
 
```
```
});
```

自定义描述文本样式。

```
$(".example").imagezoomsl({
```
```
 
```
```
  showstatus: true,
```
```
  showstatustime: 2000,
```
```
  statusdivborder: '1px solid black',
```
```
  statusdivbackground: '#C0C0C0',
```
```
  statusdivpadding: '4px',
```
```
  statusdivfont: 'bold 13px Arial',
```
```
  statusdivopacity: 0.8,
```
```
  textdnbackground: '#fff',
```
```
  textdnpadding: '10px',
```
```
  textdnfont: '13px/20px cursive'
```
```
 
```
```
});
```

自定义放大图片动画。

```
$(".example").imagezoomsl({
```
```
 
```
```
  scrollspeedanimate: 5 , 
```
```
  zoomspeedanimate: 7,
```
```
  loopspeedanimate: 2.5,   
```
```
  magnifierspeedanimate: 350
```
```
 
```
```
});
```

自定义 CSS 选择器。

```
$(".example").imagezoomsl({
```
```
 
```
```
  classmagnifier: "magnifier",
```
```
  classcursorshade: "cursorshade",
```
```
  classstatusdiv: "statusdiv",
```
```
  classtextdn: "textdn",
```
```
  classtracker: "tracker"
```
```
 
```
```
});
```

配置参数

```
$(".example").imagezoomsl({
```
```
 
```

  // shows the magnifying glass container

```
  cursorshade: true,
```
```
 
```
```
  // cursor type
```
```
  magnifycursor: 'crosshair',
```
```
 
```

  // background color of the magnifying glass container

```
  cursorshadecolor: '#fff', 
```
```
 
```

  // opacity of the magnifying glass container

```
  cursorshadeopacity: 0.3,
```
```
 
```
```
  // border styles
```
```
  cursorshadeborder: '1px solid black',
```
```
 
```
```
  // z-index property
```
```
  zindex: '', 
```
```
 
```
```
  // zoom step
```
```
  stepzoom: 0.5,
```
```
 
```
```
  // zoom range  
```
```
  zoomrange: [2, 2], 
```
```
 
```
```
  // start zoom level
```
```
  zoomstart: 2,
```
```
 
```

  // disables the scrolling of the document with the mouse wheel when the cursor is over the image

```
  disablewheel: true
```
```
 
```
```
});
```

Github 网址：https://github.com/mtvphnx/zoomsl

6 种放大模式图片放大镜 jQuery 插件

已有 584 人购买

永久更新：
演示数据：
提取码：eb22

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

6种放大模式图片放大镜jQuery插件

使用方法

HTML 结构

配置参数

6 种放大模式图片放大镜 jQuery 插件

相关文章

基于threejs的交互例子动画特效

CSS3带动画特效的创意用户帮助界面

图片放大缩小水平滚动条拖动图片滚动展示

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

配置参数

6 种放大模式图片放大镜 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复