Magic Zoom 使用说明

原创 admin  2015-12-14 22:38  阅读 567 次

引入主要文件

<link type="text/css" rel="stylesheet" href="magiczoom.css"/>
<script type="text/javascript" src="magiczoom.js"></script>

结构

单图片结构(中图+大图)
<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>
(其中class="MagicZoom"为关键项)

多图片结构(小图+中图+大图)
主图:<a href="dbig.jpg" class="MagicZoom" id="rabbit"><img src="small.jpg"></a>
附加图:<a href="addimg_big.jpg" rel="zoom-id:rabbit" rev="addimg_mid.jpg"><img src="addimg_small.jpg"/></a>
<a href="addimg2_big.jpg" rel="zoom-id:rabbit" rev="addimg2_mid.jpg"><img src="addimg2_small.jpg"/></a>
(为主图添加id属性,附加图添加rev指向中图,通过rel="zoom-id:rabbit"确立联系)

参数设置

为rel属性设置参数列表,如
<a href="big.jpg" class="MagicZoom" rel="zoom-width:118px; zoom-height:118px"><img src="small.jpg"/></a>

特例:自定义显示框位置
<a href="big.jpg" class="MagicZoom" id="elephant" rel="zoom-position: custom><img src="small.jpg"/></a>
<div id="elephant-big"></div>

样式设置

在magiczoom.css添加自定义样式

设置显示框样式
.MagicZoomBigImageCont {
border: none;
}
设置抓图区样式
.MagicZoomPup {
border: 2px solid #658EC2;
background: #658EC2 url(dotted.png);
cursor: move;
}

参数列表

Parameter Default Options Description
Geometry
zoom-width 300 Width of zoom window (px)
zoom-height 300 Height of zoom window (px)
zoom-position right left / right / top / bottom / inner /custom Position of zoom window
zoom-distance 15 Distance from small image to zoom window (px)
User experience
opacity 50 0-100 Opacity of hovered area
opacity-reverse false true / false Add opacity outside mouse box
smoothing true true / false Enable smooth zoom movement
smoothing-speed 40 1-99 Speed of smoothing
fps 25 Frames per second for zoom effect
show-title top top / bottom / false Show the title of the image in the zoom window
zoom-fade false true / false Zoom window fade effect
zoom-fade-in-speed 400 Zoom window fade-in speed (ms)
zoom-fade-out-speed 200 Zoom window fade-out speed (ms)
Multiple images
thumb-change click click / mouseover Multiple images change on click/mouseover
selectors-mouseover-delay 200 Delay before switching thumbnails (ms)
selectors-effect dissolve dissolve / fade / false Dissolve or cross fade thumbnails
selectors-effect-speed 400 Speed of dissolve/fade effect (ms)
preload-selectors-small true true / false Multiple images, preload small images
preload-selectors-big false true / false Multiple images, preload large images
Initialization
click-to-initialize false true / false Click to fetch the large image
click-to-activate false true / false Click to show the zoom
show-loading true true / false Loading message
loading-msg Loading zoom... Loading message text
loading-opacity 75 0-100 Loading message opacity
loading-position-x -1 Loading message X-axis position, -1 is center
loading-position-y -1 Loading message Y-axis position, -1 is center
Zoom mode
drag-mode false true / false Click and drag to move the zoom
move-on-click true true / false Click to move the zoom (in drag mode)
preserve-position false true / false Remember position of zoom for multiple images and drag mode
x -1 Initial X-axis position for drag mode, -1 is center
y -1 Initial Y-axis position for drag mode, -1 is center
always-show-zoom false true / false Make zoom window always visible. (Automatically true in drag-mode.)
fit-zoom-window true true / false Resize zoom window if big image is smaller than zoom window
entire-image false true / false Show the entire large image on hover

 

本文地址:http://www.z1988.com/1278.html
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情