<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<title>jQuery支持局部缩放图片放大镜插件 - 网页模板</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="src/css/mag.css" />
<link rel="stylesheet" href="src/theme/default.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
.controls-btns button{
color: #333;
}
.mt50{margin-top: 50px;}
</style>
</head>
<body>
<div class="zzsc-container">
<div class="container mt50">
<main>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="inner" class="mag-eg-el">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner" class="mag-eg-el">
<img src="img/alley/1000x600.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Inner</h3>
<pre><code class="lang-html"><!--
--><div mag-thumb="inner">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pre>
<pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="inner"]');
$host.mag();<!--
--></code></pre>
<p>使用鼠标滚轮可以对内部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap">
<div class="img-thumbnail">
<div mag-thumb="inner-inline" mag-flow="inline" class="mag-eg-el">
<img src="img/alley/500x300.jpg" style="width: 400px; max-width: 100%; height: auto" />
</div>
<div mag-zoom="inner-inline" class="mag-eg-el">
<img src="img/alley/1000x600.jpg" />
</div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Inner Inline</h3>
<pre><code class="lang-html"><!--
--><div mag-thumb="inner-inline" mag-flow="inline">
<img src="img/alley/500x300.jpg" style="width: 400px; max-width:100%;" />
</div>
<div mag-zoom="inner-inline">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pre>
<pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="inner-inline"]');
$host.mag();<!--
--></code></pre>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="outer" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div class="mag-eg-el-wrap img-thumbnail" style="height:auto;width:auto">
<div style="height: 300px; width: 300px">
<div mag-zoom="outer" class="mag-eg-el" style="float: right;position:relative;overflow:hidden;">
<img src="img/rieti/full.jpg" />
</div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Outer</h3>
<pre><code class="lang-html"><!--
--><div mag-thumb="outer">
<img src="img/alley/500x300.jpg" />
</div>
<div style="width: 300px; height: 300px;">
<div mag-zoom="outer">
<img src="img/alley/1000x600.jpg" />
</div>
</div><!--
--></code></pre>
<pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="outer"]');
$host.mag({
mode: 'outer',
ratio: 1 / 1.6
});
</code></pre>
<p>使用鼠标滚轮可以对外部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="outer-drag" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-zoom="outer-drag" class="mag-eg-el" style="float: right;">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Outer Drag</h3>
<pre><code class="lang-html"><!--
--><div mag-thumb="outer-drag">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="outer-drag">
<img src="img/alley/1000x600.jpg" />
</div>
<!--
--></code></pre>
<pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="outer-drag"]');
$host.mag({
mode: 'outer',
position: 'drag',
toggle: false
});<!--
--></code></pre>
<p>使用鼠标滚轮可以对外部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="drag" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div mag-zoom="drag" class="mag-eg-el">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Drag</h3>
<pre><code class="lang-html"><!--
--><div mag-thumb="drag">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="drag">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pre>
<pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="drag"]');
$host.mag({
position: 'drag',
toggle: false
});<!--
--></code></pre>
<p>使用鼠标滚轮可以对图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row" id="controls">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="controls" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div mag-zoom="controls" class="mag-eg-el">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div mag-ctrl="controls" class="controls-btns">
<button class="mag-eg-ctrl-zoom-out" mag-ctrl-zoom-by="-0.5">-</button>
<button class="mag-eg-ctrl-zoom-in" mag-ctrl-zoom-by="0.5">+</button>
<button class="mag-eg-ctrl-move-up" mag-ctrl-move-by-y="-0.5">^</button>
<button class="mag-eg-ctrl-move-down" mag-ctrl-move-by-y="0.5">v</button>
<button class="mag-eg-ctrl-move-left" mag-ctrl-move-by-x="-0.5"><</button>
<button class="mag-eg-ctrl-move-right" mag-ctrl-move-by-x="0.5">></button>
<button class="mag-eg-ctrl-fullscreen" mag-ctrl-fullscreen>[ ]</button>
<button class="mag-eg-ctrl-destroy" mag-ctrl-destroy>destroy</button>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3><a href="#controls">Controls</a></h3>
<pre><code class="lang-html"><!--
--><script src="src/js/mag-control.js"></script>
<div mag-thumb="controls">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="controls">
<img src="img/alley/1000x600.jpg" />
</div>
<div mag-ctrl="controls">
<button mag-ctrl-zoom-by="-0.5">-</button>
<button
jQuery支持局部缩放图片放大镜插件.zip
版权申诉
115 浏览量
2022-11-24
12:30:33
上传
评论
收藏 401KB ZIP 举报
jQuery支持局部缩放图片放大镜插件.zip （23个子文件） 
jQuery支持局部缩放图片放大镜插件 
jQuery支持局部缩放图片放大镜插件.jpg 65KB jiaoben4276 css 
zzsc-demo.css 5KB bootstrap.min.css 118KB index.css 886B img alley 500x300.jpg 40KB 1000x600.jpg 86KB rieti full.jpg 120KB 500x334.jpg 18KB
index.html 9KB js PreventGhostClick.js 3KB index.js 1KB screenfull.js 3KB jquery.event.drag.js 13KB jquery.bridget.js 4KB jquery-1.11.0.min.js 94KB hammer.min.js 20KB jquery.mousewheel.min.js 3KB src css mag.css 1KB js mag-jquery.js 25KB mag.js 6KB mag-control.js 2KB mag-analytics.js 882B theme default.css 766B资源评论
