更多>
最新下载
24小时阅读排行榜
- 1 豆包AI免费写作工具入口 豆包AI写作助手app登录官网
- 2 VSCode Emmet快捷键使用技巧
- 3 苹果手机如何恢复Safari书签
- 4 现代JavaScript模块化开发实践与演进
- 5 Python代码如何进行数据可视化 Python代码使用Matplotlib库的实战指南
- 6 如何查看mysql的日志
- 7 html语言如何列表_HTML列表（ul/ol/dl）创建与样式设置方法
- 8 京东外卖商家装修怎么操作？京东如何装修店铺
- 9 夸克AI搜索简体中文官网地址 夸克最新设置与入口指南
- 10 c++怎么用asan, tsan, ubsan进行运行时检查_C++三大运行时检测工具使用指南
- 11 mongodb如何查询不包含某个字符串
- 12 vscode如何同步工作区设置_vscode工作区设置同步方法与技巧
- 13 Java正则表达式：灵活控制字母、数字与特定分隔符的组合验证
- 14 Golang如何在并发场景下优化内存分配
- 15 vscode全局替换如何避免覆盖重要内容_vscode重要内容保护与全局替换技巧
更多>
最新教程
-
- Node.js 教程
- 7220 2025-08-28
-
- CSS3 教程
- 1022249 2025-08-27
-
- Rust 教程
- 11472 2025-08-27
-
- Vue 教程
- 13701 2025-08-22
-
- PostgreSQL 教程
- 10527 2025-08-21
-
- Git 教程
- 5088 2025-08-21
H5的图片整张或局部放大特效
<!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中文网。
<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中文网。
本站所有资源都是由网友投搞发布，或转载各大下载站，请自行检测软件的完整性！本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架，联系方式：admin@php.cn
相关推荐
jQuery图片局部放大特效
jQuery图片局部放大特效是一款图片局部放大效果，鼠标移到产品图片上可局部放大，点击图片可浏览完整产品大图，鼠标移动到左侧箭头可上下滚动缩略图，兼容主流浏览器。
放大镜效果
2017-04-12
jQuery流布局伸缩放大特效
jQuery流布局伸缩放大特效，当鼠标放在图片上，图片有个放大的效果，用来展示商品或者展示个人相册，效果相当酷炫。php中文网推荐下载！
瀑布流特效
2017-01-21
产品图片局部放大效果js特效代码
JS产品图片局部放大效果，鼠标移到产品图片上可局部放大，点击图片可浏览完整产品大图，鼠标移动到左侧箭头可上下滚动缩略图，兼容主流浏览器。
使用方法：
1. head区域引用文件 mzp-packed.js，lrtk.css，magiczoomplus.css
2. 在你的文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码
3. lrtk.js
图片特效
2017-03-11
热门下载
canvas音谱可视化mp3音乐播放器代码
html5 canvas通过AudioContext对获取audio标签播放的音域和音高，调用js绘制相应高度的矩形或线条。
播放器特效
2021-03-10
