H5 picture full or partial enlargement effect
H5 picture full or partial enlargement effect
<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>使用鼠標(biāo)滾輪可以對內(nèi)部圖片進(jìn)行縮放。</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>使用鼠標(biāo)滾輪可以對外部圖片進(jìn)行縮放。</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>使用鼠標(biāo)滾輪可以對外部圖片進(jìn)行縮放。</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>使用鼠標(biāo)滾輪可以對圖片進(jìn)行縮放。</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>
這是一個(gè)H5的圖片整張或局部放大特效，需要的朋友可以直接下載使用，更多特效代碼盡在PHP中文網(wǎng)。
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
Csgo special effects blockbuster movies HD viewing entrance to watch Csgo high-definition special effects blockbuster movies directly
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) is a first-person shooter that is loved by players around the world. Its exciting competitions and high-quality special effects videos have always been topics to talk about by players. Whether it is the thrilling professional leagues or the friendly match between ordinary players, it can show amazing special effects and strategies in the game. This article will introduce you in detail how to find and watch CSGO special effects blockbusters in detail to ensure that you can experience the best visual enjoyment.
10 jQuery Cool Menu Effect Plugins
01 Mar 2025
10 cool jQuery menu special effects plug-ins to improve website user experience! We have shared many jQuery navigation menu plugins, and now we bring you 10 more amazing jQuery menu effects plugins. Enjoy it! Related readings: - 10 dazzling jQuery navigation menus - 15 excellent jQuery navigation menus Right-click menu This plugin is very easy to use and compact, allowing you to create right-click menus. Source Code Demo 2. jQuery Multi-level Menu – FX CSS Menu with Submenu 100% CSS menu, visual effects provided by jQuery. Only use Javascript to implement special effects. Fully compatible with cross-browser, package
Blue Prince: All Items & What They do
12 Apr 2025
There are two types of items in Blue Prince: Common and Special. Common items are easier to find and usually tied to specific room types. Special items are rarer, but they offer powerful effects or let you reach areas you couldn’t access otherwise.Co
05 Apr 2025
CSS style problem: Implement white edges in text and add shadow effects. In CSS style design, special processing of text is often required, such as adding white edges...
Steps to create videos in deepseek - How to create videos in deepseek
12 Mar 2025
Master DeepSeek video creation skills and easily make wonderful videos! This article will gradually guide you through the entire process of DeepSeek video production, from importing materials to final export, allowing you to get started quickly. Preparation Please make sure that DeepSeek software is installed and familiar with its basic operating interface. Material Import Launch DeepSeek, click the "Import" option under the "File" menu to add your video, audio and image materials. Video editing drags the material to the timeline, uses the editing tool to crop, adjust clips, and adds transition effects to make the video connection smooth and natural. Special effects and subtitles Add visual effects to videos using DeepSeek built-in special effects library and add subtitles to enhance the expression of video content.
How to achieve outstanding effect in the middle of the progress bar through CSS?
05 Apr 2025
Methods to achieve intermediate outstanding effects in CSS In daily front-end development, we often encounter some special design needs, such as how to be in the middle of the progress bar...
10 Crazy HTML5 and JS Experiment Showcase
28 Feb 2025
Explore a captivating collection of HTML5 and JavaScript experiments showcasing the framework's impressive ability to render diverse and engaging interactive effects. While many demos run smoothly on Google Chrome and Firefox, full HTML5 support in
How to use pure CSS to achieve the effect of alternating element colors by n%3?
05 Apr 2025
The technique of using pure CSS to realize the alternating effect of element colors by n%3. In front-end development, sometimes we need to implement some special visual effects, such as based on elements...
RimWorld Odyssey Weapons Guide
14 Jul 2025
Written by Andrew Hammelbrowse all RimWorld The upcoming RimWorld Odyssey DLC introduces a variety of exclusive weapons featuring random effects, special modifications, and personalized names. These can’t be crafted—you must discover them via quests,
Hot Tools
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.
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
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
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.