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

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

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

使用方法
在页面中引入下面的文件。

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

HTML结构

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

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

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

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

1
2
3
4
5
6
7
8
<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"
>

初始化插件

1
2
3
$(function(){
  $(".example").imagezoomsl();
});

在图片加载时显示loading。

1
2
3
4
5
6
7
8
9
10
11
12
$(".example").imagezoomsl({
 
  // loading spinner
  loadinggif: 'loading.gif',
 
  // opacity
  loadopacity: 0.1,
 
  // background color
  loadbackground: '#878787'
   
});

自定义描述文本样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".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'
 
});

自定义放大图片动画

1
2
3
4
5
6
7
8
$(".example").imagezoomsl({
 
  scrollspeedanimate: 5 ,
  zoomspeedanimate: 7,
  loopspeedanimate: 2.5,  
  magnifierspeedanimate: 350
 
});

自定义CSS选择器。

1
2
3
4
5
6
7
8
9
$(".example").imagezoomsl({
 
  classmagnifier: "magnifier",
  classcursorshade: "cursorshade",
  classstatusdiv: "statusdiv",
  classtextdn: "textdn",
  classtracker: "tracker"
 
});

配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(".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
 
});
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论