<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>EasyZoom图片缩放jQuery插件 - 网页模板</title>
<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="css/pygments.css" />
<link rel="stylesheet" href="css/easyzoom.css" />
</head>
<body>
<div class="container">
<!-- Example -->
<section id="example">
<h1>
Examples
</h1>
<p>
Use your mouse cursor or finger to zoom and pan the images below.
</p>
<h2>
Overlay
</h2>
<div class="easyzoom easyzoom--overlay">
<a href="example-images/1_zoom.jpg">
<img src="example-images/1_standard.jpg" alt="" width="640" height="360" />
</a>
</div>
<p>
<h2>
Adjacent
</h2>
<!-- Placeholder for demo purposes only -->
<div style="float: right; width: 310px; height: 400px; background: #EEE;"></div>
<div class="easyzoom easyzoom--adjacent">
<a href="example-images/2_zoom.jpg">
<img src="example-images/2_standard.jpg" alt="" width="310" height="400" />
</a>
</div>
</section>
<hr />
<!-- Setup -->
<section id="setup">
<h1>
Setup
</h1>
<h2>
HTML
</h2>
<p>
EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target
element (<code><div class="easyzoom"></code>) only contains a link to the large image and the
smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements
that are positioned absolutely.
</p>
<figure>
<pre class="highlight"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"easyzoom"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/zoom.jpg"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/standard.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></div></span></pre>
</figure>
<h2>
CSS
</h2>
<p>
The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by
<a href="http://www.w3.org/TR/CSS2/visudet.html#shrink-to-fit-float">floating</a> it or by displaying
it as an <a href="http://www.w3.org/TR/CSS2/visudet.html#inlineblock-width">inline block</a>. Extra
white space below the image (usually caused by the
<a href="http://www.w3.org/TR/CSS2/visuren.html#line-box">line box</a> the image sits within) can be
removed either by displaying it at block level or changing its position within the line box.
</p>
<p>
Take a look at the included <code>easyzoom.css</code> for more information on styling EasyZoom.
</p>
<figure>
<pre class="highlight"><span class="c">/* Shrink wrap strategy 1 */</span>
<span class="nc">.easyzoom</span> <span class="p">{</span>
<span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.easyzoom</span> <span class="nt">img</span> <span class="p">{</span>
<span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Shrink wrap strategy 2 */</span>
<span class="nc">.easyzoom</span> <span class="p">{</span>
<span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.easyzoom</span> <span class="nt">img</span> <span class="p">{</span>
<span class="k">vertical-align</span><span class="o">:</span> <span class="k">bottom</span><span class="p">;</span>
<span class="p">}</span></pre>
</figure>
<h2>
JavaScript
</h2>
<p>
The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via
element data. EasyZoom is also AMD and CommonJS compatible.
</p>
<figure>
<pre class="highlight"><span class="c1">// Instantiate EasyZoom plugin</span>
<span class="kd">var</span> <span class="nx">$easyzoom</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.easyzoom'</span><span class="p">).</span><span class="nx">easyZoom</span><span class="p">();</span>
<span class="c1">// Get the instance API</span>
<span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="nx">$easyzoom</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'easyZoom'</span><span class="p">);</span></pre>
</figure>
</section>
<hr />
<!-- Options -->
<section id="options">
<h1>
Options
</h1>
<p>
Global options can be specified via the standard jQuery plugin interface.
</p>
<dl>
<dt>
<var>loadingNotice</var>
</dt>
<dd>
The text to display within the notice box while loading the zoom image. Default: <code>"Loading image"</code>.
</dd>
<dt>
<var>errorNotice</var>
</dt>
<dd>
The text to display within the notice box if an error occurs loading the zoom image. Default:
<code>"The image could not be loaded"</code>.
</dd>
<dt>
<var>preventClicks</var>
</dt>
<dd>
Prevent clicks on the zoom image link. Default: <code>true</code>.
</dd>
<dt>
<var>onShow</var>
</dt>
<dd>
Callback function to execute when the flyout is displayed. Default: <code>undefined</code>
</dd>
<dt>
<var>onHide</var>
</dt>
<dd>
Callback function to execute when the flyout is removed. Default: <code>undefined</code>
</dd>
</dl>
</section>
<hr />
<!-- API -->
<section id="api">
<h1>
API
</h1>
<dl>
<dt>
<code>.show(<var>[MouseEvent|TouchEvent]</var>)</code>
</dt>
<dd>
Displays the zoom image flyout. Optionally takes an instance of a
<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">mouse</a> or
<a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent">touch event</a>.
</dd>
<dt>
<code>.hide()</code>
</dt>
<dd>
Removes the zoom image flyout.
</dd>
<dt>
<code>.teardown()</code>
</dt>
<dd>
Removes all events and elements created and attached by EasyZoom.
</dd>
</dl>
</section>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="dist/easyzoom.js"></script>
<script>
// Instantiate EasyZoom plugin
var $easyzoom = $('.easyzoom').easyZoom();
// Get the instance API
var api = $easyzoom.data('easyZoom');
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
EasyZoom图片缩放jQuery插件.zip
版权申诉
60 浏览量
2022-11-17
21:19:41
上传
评论
收藏 865KB ZIP 举报
EasyZoom图片缩放jQuery插件.zip （20个子文件） 
EasyZoom图片缩放jQuery插件 
EasyZoom图片缩放jQuery插件.jpg 176KB jiaoben1623 css 
pygments.css 4KB easyzoom.css 890B example.css 1KB package.json 169B test 
runner.html 906B spec easyzoom.js 3KB lib jquery-1.10.2.min.js 91KB qunit-1.12.0.css 5KB qunit-1.12.0.js 57KB index.html 7KB dist easyzoom.js 3KB Gruntfile.js 1KB src easyzoom.js 6KB example-images 2_standard.jpg 53KB 1_standard.jpg 83KB 1_zoom.jpg 293KB 2_zoom.jpg 203KB Thumbs.db 8KB image-zoom.jquery.json 800B资源评论
