Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home JS special effects html5 special effects H5 picture full or partial enlargement effect

H5 picture full or partial enlargement effect

H5 picture full or partial enlargement effect

H5 picture full or partial enlargement effect

Download Now Preview
<!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" href="css/index.css" />

<style type="text/css">
.controls-btns button{
color: #333;
}
.mt50{margin-top: 50px;}
</style>

</head>
<body>

<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 mag-ctrl-zoom-by="0.5"> </button>
<button mag-ctrl-move-by-y="-0.5">^</button>
<button mag-ctrl-move-by-y="0.5">v</button>
<button mag-ctrl-move-by-x="-0.5"><</button>
<button mag-ctrl-move-by-x="0.5">></button>
<button mag-ctrl-fullscreen>[ ]</button>
<button mag-ctrl-destroy>destroy</button>
</div><!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb="controls"]');
$host.mag(
toggle: false,
position: false
);

$controls = $('[mag-ctrl="controls"]');
$controls.magCtrl({
mag: $host
});<!--
--></code></pre>
</div>
 </div>
</div>


  </main>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.bridget.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.event.drag.js"></script>
<script src="js/screenfull.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/PreventGhostClick.js"></script>
<script src="src/js/mag-analytics.js"></script>
<script src="src/js/mag.js"></script>
<script src="src/js/mag-jquery.js"></script>
<script src="src/js/mag-control.js"></script>
<script src="js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 
</div>
</body>
</html>

这是一个H5的图片整张或局部放大特效，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。
Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Related Article

css special effects_html/css_WEB-ITnose css special effects_html/css_WEB-ITnose

24 Jun 2016

css special effects

HTML&css&j special effects_html/css_WEB-ITnose HTML&css&j special effects_html/css_WEB-ITnose

24 Jun 2016

HTML&css&j special effects

61 web page special effects, very fashionable and with good visual effects_html/css_WEB-ITnose 61 web page special effects, very fashionable and with good visual effects_html/css_WEB-ITnose

24 Jun 2016

61 web page special effects that are very fashionable and have great visual effects

Animated loading effects implemented in pure css3_html/css_WEB-ITnose Animated loading effects implemented in pure css3_html/css_WEB-ITnose

24 Jun 2016

Animation loading special effects implemented in pure css3

jquery waterfall flow LightBox picture box special effects jquery waterfall flow LightBox picture box special effects

06 Jul 2016

jquery waterfall flow LightBox picture box special effects

A batch of hover effects implemented by CSS3_html/css_WEB-ITnose A batch of hover effects implemented by CSS3_html/css_WEB-ITnose

24 Jun 2016

A batch of hover special effects implemented by CSS3

Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose

24 Jun 2016

Revealing the special effects in Tencent’s Burberry event page

CSS3 mouse slides over animated line border special effects CSS3 mouse slides over animated line border special effects

06 Jul 2016

CSS3 mouse slides over animated line border special effects

Based on css3 cool page loading animation special effects code_html/css_WEB-ITnose Based on css3 cool page loading animation special effects code_html/css_WEB-ITnose

24 Jun 2016

Based on css3 cool page loading animation special effects code

See all articles See all articles

Hot tools Tags

PHP editors
Development tools
PHP IDE
PHP framework
PHP debugging tools
PHP extensions

Hot Tools

HTML5 Canvas heart fluttering animation special effects

HTML5 Canvas heart fluttering animation special effects

HTML5 Canvas heart fluttering animation special effect is a generated animation that can be directly opened with a browser to see a heart.

Valentine's Day love balloon confession animation special effects

Valentine's Day love balloon confession animation special effects

H5 panda bouncing game source code

H5 panda bouncing game source code

HTML5 Mobile Panda is also a crazy game source code. Game description: Press and hold the screen to adjust the strength of the panda spring and jump to the stone pillar. The game ends if you fall into the river.

HTML5 Valentine's Day box animation special effects

HTML5 Valentine's Day box animation special effects

Based on svg, draw animations of opening love box gifts on Valentine's Day, and special effects of love box animation.

H5 3D rolling ball game source code

H5 3D rolling ball game source code

HTML5 cool 3D ball rolling mobile game code download. Game introduction: A colored ball rolls, and the current track of the colored ball is controlled by dragging it with the mouse or the touch screen of the mobile phone. This is a simple and easy-to-operate mobile game source code.

Show More

Hot Article

Lost Records: Bloom & Rage - Corey And Dylan's Lock Combination
19 Feb 2025 Mobile Game Guide
Hello Kitty Island Adventure: Reboot The Robots Quest Walkthrough
16 Feb 2025 Mobile Game Guide
Lost Records: Bloom & Rage - Achievement/Trophy Guide
19 Feb 2025 Mobile Game Guide
Tips to Optimize Your Laravel Application Performance
25 Jan 2025 PHP Tutorial
Announcing the 2025 PHP Landscape Survey
24 Jan 2025 PHP Tutorial
Show More