当前位置：青柠资源网 > 网页素材 > 网页特效 > H5的图片整张或局部放大特效
  • 最近更新：2023年11月2日

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

91。
2023-11-02 青柠哥 已收录 已售次 关注91次
1青币 优惠信息:免费

关注公众号

演示地址 QQ咨询
  • 免费售后咨询
  • 免费安装指导
    •
  • 付费安装主题
  • 付费BUG修复
    •
  • 付费网站迁移
    •
  • 付费全包建站
    •

注册会员根据级别享有相关下载优惠，请仔细辨别。所有资源均收集于互联网仅供学习、参考和研究，请理解这个概念，所以不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵， 你下载的资源和程序源码组件因其特殊性均为可复制品，所以不支持任何理由的退款兑现，请认真阅读本站声明和相关条款后再点击支付下载。
  • 正文概述
  • 售后服务

    • <!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/500×300.jpg\” />
    </div>
    <div mag-zoom=\”inner\” class=\”mag-eg-el\”>
     <img src=\”img/alley/1000×600.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/500×300.jpg&quot; /&gt;
    &lt;/div&gt;
    &lt;div mag-zoom=&quot;inner&quot;&gt;
    &lt;img src=&quot;img/alley/1000×600.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/500×300.jpg\” style=\”width: 400px; max-width: 100%; height: auto\” />
    </div>
    <div mag-zoom=\”inner-inline\” class=\”mag-eg-el\”>
     <img src=\”img/alley/1000×600.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/500×300.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/1000×600.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/500×334.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/500×300.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/1000×600.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/500×334.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/500×300.jpg&quot; /&gt;
    &lt;/div&gt;
    &lt;div mag-zoom=&quot;outer-drag&quot;&gt;
    &lt;img src=&quot;img/alley/1000×600.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/500×334.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/500×300.jpg&quot; /&gt;
    &lt;/div&gt;
    &lt;div mag-zoom=&quot;drag&quot;&gt;
    &lt;img src=&quot;img/alley/1000×600.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/500×334.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/500×300.jpg&quot; /&gt;
    &lt;/div&gt;
    &lt;div mag-zoom=&quot;controls&quot;&gt;
    &lt;img src=&quot;img/alley/1000×600.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中文网。
    H5的图片整张或局部放大特效 网页特效 第1张

    青柠资源网专注于CMS网站模板,主流语言整站网站源码下载,网站建设相关教程分享,好用的软件素材整合下载,提供一站式便捷自助服务。
    1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
    2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
    3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
    4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
    5. 如有链接无法下载、失效或广告，请联系管理员处理！
    6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
    7. 如遇到加密压缩包，默认解压密码为"www.qnziyw.cn",如遇到无法解压的请联系管理员！


    青柠资源网 » H5的图片整张或局部放大特效

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们。
    找不到素材资源介绍文章里的示例图片？
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单
    青柠哥

    青柠哥 普通

    分享到：

    发表回复

    相关推荐

    青柠资源网 www.qnziyw.cn

    国内极具人气的网络源码资源交流学习平台
    下载源码文章，学软件教程，找灵感素材，尽在青柠资源网
    按Ctrl+D收藏本站

    青柠资源网共享中心

    www.qnziyw.cn