zoukankan      html  css  js  c++  java
  • js实现手机端图片双指缩放变大变小插件

    对于手机上图片的缩放通常有两种:

    介绍第一种情况的插件,pinchzoom.js,用法很简单,只需要修改img的路径,在引用pinchzoom.js以及你平时用的jquery就可以。

    pinchzoom.js下载链接

    链接: https://pan.baidu.com/s/1niv1Eb2pZFqbNjUcwhg8Yw 提取码: 8hcb

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>图片缩放</title>
        <style>
            .pinch-zoom,.pinch-zoom img{
                width: 100%;
                -webkit-user-drag: none;
                -moz-user-drag: none;
                -ms-user-drag: none;
                user-drag: none;
            }
        </style>
    </head>
    <body>
    <div class="page" style="display:block">
        <div class="pinch-zoom">
            <img src="images/timg.jpg"/>
        </div>
    </div>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/pinchzoom.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>
    </body>
    </html>

    第二种缩放情况插件,scale.js,img一定要放在list的div里面,除了引用scale.js外还需要引用scale.css,贴出完整代码:

    scale下载地址

    链接: https://pan.baidu.com/s/1NUtYPJer_zvvPM5w6w_u8w 提取码: 4qhp

    <!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>图片缩放</title>
        <link rel="stylesheet" href="themes/scale.css" type="text/css" />
    </head>
    <body>
        <div class="list">
             <img src="themes/images/2.jpg" />
        </div>
        <section class="imgzoom_pack">
            <div class="imgzoom_x">X</div>
            <div class="imgzoom_img"><img src="" /></div>
        </section>
        <script src="js/scale.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function(event){
                ImagesZoom.init({
                    "elem": ".list"
                });
            }, false);
        </script>
    </body>
    </html>

    转载自:https://blog.csdn.net/gl0ry/article/details/56055414

  • 相关阅读:
    OAccflow集成sql
    集成备注
    CCflow与基础框架组织机构整合
    Jeecg_Jflow整合记录
    Problem opening .cshtml files
    The document cannot be opened. It has been renamed, deleted or moved.
    js中!和!!的区别及用法
    hdu 4757 Tree(可持久化字典树)
    Tomcat 学习进阶历程之Tomcat架构与核心类分析
    BZOJ 3000(Big Number-Stirling公式求n!近似值)
  • 原文地址:https://www.cnblogs.com/lhj-blog/p/13962913.html
Copyright © 2011-2022 走看看