登录  /  注册

当前位置: 首页  >  下载站  >  js特效  >  html5特效  >  H5的图片整张或局部放大特效

H5的图片整张或局部放大特效

H5的图片整张或局部放大特效

H5的图片整张或局部放大特效
分类:   js特效 / html5特效 发布时间:  2017-12-22 访问量:  1883
下载量:  44
点击下载 预览效果
更多>

最新下载

jQuery企业留言表单联系代码

jQuery企业留言表单联系代码是一款简洁实用的企业留言表单和联系我们介绍页面代码。
8 2024-02-29

HTML5 MP3音乐盒播放特效

HTML5 MP3音乐盒播放特效是一款基于html5+css3制作可爱的音乐盒表情,点击开关按钮mp3音乐播放器。
9 2024-02-29

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。
13 2024-02-29

jQuery可视化表单拖拽编辑代码

jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。
7 2024-02-29

VUE.JS仿酷狗音乐播放器代码

VUE.JS仿酷狗音乐播放器代码是一款基于js跟css3实现的仿酷狗网页音乐播放器特效。
4 2024-02-29

经典html5推箱子小游戏

经典html5推箱子小游戏总共有100关,移动方式有上下左右按键。
6 2024-02-29
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"><!--
-->&lt;div mag-thumb=&quot;inner&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; /&gt;
&lt;/div&gt;
&lt;div mag-zoom=&quot;inner&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;inner&quot;]');
$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"><!--
-->&lt;div mag-thumb=&quot;inner-inline&quot; mag-flow=&quot;inline&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; style=&quot;width: 400px; max-width:100%;&quot; /&gt;
&lt;/div&gt;
&lt;div mag-zoom=&quot;inner-inline&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;inner-inline&quot;]');
$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"><!--
-->&lt;div mag-thumb=&quot;outer&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; /&gt;
&lt;/div&gt;
&lt;div style=&quot;width: 300px; height: 300px;&quot;&gt;
&lt;div mag-zoom=&quot;outer&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;outer&quot;]');
$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"><!--
-->&lt;div mag-thumb=&quot;outer-drag&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; /&gt;
&lt;/div&gt;
&lt;div mag-zoom=&quot;outer-drag&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;
<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;outer-drag&quot;]');
$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"><!--
-->&lt;div mag-thumb=&quot;drag&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; /&gt;
&lt;/div&gt;
&lt;div mag-zoom=&quot;drag&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;drag&quot;]');
$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">&lt;</button>
 <button class="mag-eg-ctrl-move-right" mag-ctrl-move-by-x="0.5">&gt;</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"><!--
-->&lt;script src="src/js/mag-control.js"&gt;&lt;/script&gt;

&lt;div mag-thumb=&quot;controls&quot;&gt;
&lt;img src=&quot;img/alley/500x300.jpg&quot; /&gt;
&lt;/div&gt;
&lt;div mag-zoom=&quot;controls&quot;&gt;
&lt;img src=&quot;img/alley/1000x600.jpg&quot; /&gt;
&lt;/div&gt;

&lt;div mag-ctrl=&quot;controls&quot;&gt;
&lt;button mag-ctrl-zoom-by=&quot;-0.5&quot;&gt;-&lt;/button&gt;
&lt;button mag-ctrl-zoom-by=&quot;0.5&quot;&gt;+&lt;/button&gt;
&lt;button mag-ctrl-move-by-y=&quot;-0.5&quot;&gt;^&lt;/button&gt;
&lt;button mag-ctrl-move-by-y=&quot;0.5&quot;&gt;v&lt;/button&gt;
&lt;button mag-ctrl-move-by-x=&quot;-0.5&quot;&gt;&lt;&lt;/button&gt;
&lt;button mag-ctrl-move-by-x=&quot;0.5&quot;&gt;&gt;&lt;/button&gt;
&lt;button mag-ctrl-fullscreen&gt;[ ]&lt;/button&gt;
&lt;button mag-ctrl-destroy&gt;destroy&lt;/button&gt;
&lt;/div&gt;<!--
 --></code></pre>
 <pre><code class="lang-js"><!--
-->$host = $('[mag-thumb=&quot;controls&quot;]');
$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

相关推荐

H5的图片整张或局部放大特效

H5的图片整张或局部放大特效
html5特效
2017-12-22

jQuery图片整张或局部放大代码

jQuery图片整张或局部放大代码
jQuery特效
2017-12-06

jQuery图片放大镜插件鼠标悬停图片缩放代码

jQuery图片放大镜插件支持整张图片和局部图片放大查看,通过鼠标滚动控制图片缩放效果代码。(不兼容IE6,7,8)
放大镜效果
2019-03-27

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

jQuery组织结构图表插件OrgChart

jQuery组织结构图表插件OrgChart
jQuery特效
2018-01-12

jQuery图片绘制动画过程插件imagedrawer

jQuery图片绘制动画过程插件imagedrawer
jQuery特效
2018-01-12

热门下载

jQuery+Html5实现唯美表白动画代码

jQuery+Html5实现唯美表白动画代码,动画效果很棒,程序员表白必备!
其它特效
2017-02-14

情侣浪漫表白js特效代码

情侣浪漫表白js特效代码,这样的特效,可以用在婚纱摄影的网站上,也可以放在个人网站中,也还一个不错的特效,php中文网推荐下载!
其它特效
2017-02-08

H5熊猫弹跳小游戏源码

html5手机熊猫也疯狂小游戏源代码。游戏说明:长按屏幕调整熊猫弹簧的强度,跳到石柱上。掉到河里游戏结束。
html5特效
2019-08-22

炫酷的系统登录页

炫酷的系统登录页
jQuery特效
2019-12-30

H5 3D滚球游戏源码

html5酷炫3D彩球滚动手机游戏代码下载。游戏介绍:一个彩色圆球滚动,通过鼠标或手机触屏拖动来控制彩球的运行当前线路轨迹。这是一款简单易操作的手机小游戏源码。
html5特效
2019-08-26

HTML5 canvas射击鸭子小游戏

HTML5 canvas射击鸭子小游戏
html5特效
2017-11-24

简单js恋爱表白神器

简单原生js恋爱表白神器
其它特效
2017-02-14

碉堡的html5粒子动画表白特效

碉堡的html5粒子动画表白特效代码,动画特效文字可以在代码里面进行更改,大家可以做个页面,大家可以自定义文字的输入是应该是非常受欢迎的,此HTML5特效非常美的。
其它特效
2017-02-14
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号