简单的移动端图片预览包含放大缩小以及对各种手势的判定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <style>
　　　　 *{
　　　　　　 margin: 0;
　　　　　　 padding: 0;
　　　　 }
        body, html {
            width: 100%;
            height: 100%;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: #23C6C8;
            margin-bottom: 40px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            vertical-align: middle;
            text-indent: 2em;
        }
        .main {
            width: 98%;
            margin-left: 2%;
        }
        .each-div {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 90px;
            vertical-align: middle;
            float: left;
        }
        .main img {
            height: 40px;
        }
        .preview {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0,0,0,0.8);
        }
        .preview-content {
            position: relative;
            top: 50px;
            left: 0;
            overflow: auto;
        }
        .preview img {
            position: absolute;
        }
    </style>
</head>
<body>
    <header>图片预览测试</header>
    <div class="main">
        <div class="each-div"><img src="images/icon_00.png"/></div>
        <div class="each-div"><img src="images/icon_01.png"/></div>
        <div class="each-div"><img src="images/icon_02.png"/></div>
        <div class="each-div"><img src="images/icon_03.png"/></div>
        <div class="each-div"><img src="images/icon_04.png"/></div>
        <div class="each-div"><img src="images/icon_05.png"/></div>
        <div class="each-div"><img src="images/icon_06.png"/></div>
        <div class="each-div"><img src="images/icon_07.png"/></div>
        <div class="each-div"><img src="images/icon_08.png"/></div>
        <div class="each-div"><img src="images/icon_09.png"/></div>
        <div class="each-div"><img src="images/icon_10.png"/></div>
        <div class="each-div"><img src="images/icon_11.png"/></div>
        <div class="each-div"><img src="images/icon_12.png"/></div>
        <div class="each-div"><img src="images/icon_13.png"/></div>
        <div class="each-div"><img src="images/icon_14.png"/></div>
        <div class="each-div"><img src="images/icon_15.png"/></div>
        <div class="each-div"><img src="images/icon_16.png"/></div>
        <div class="each-div"><img src="images/icon_17.png"/></div>
        <div class="each-div"><img src="images/icon_18.png"/></div>
        <div class="each-div"><img src="images/icon_19.png"/></div>
        <div class="each-div"><img src="images/icon_20.png"/></div>
        <div class="each-div"><img src="images/icon_21.png"/></div>
    </div>
</body>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
    var which;
    var isPress = 0;
    var isBiger = false;
    var thisPicWidth, thisPicHeight;
    var theSpaceSite;

    $(‘.main‘).on(‘click‘, ‘.each-div‘, function() {
        thisPicHeight = 0;
        thisPicWidth = 0;
        var mySrc = $(this).find(‘img‘).attr(‘src‘);
        addPreview( $(this).find(‘img‘).attr(‘src‘) );
    });

    $(‘body‘).on(‘click‘, ‘.preview‘, function() {
        isBiger = false;
        $(‘.preview‘).remove();
    });

    $(‘body‘).on(‘click‘, ‘.preview img‘, function(e) {
        e.stopPropagation();
    });

    function addPreview(src) {
        var node = $(‘<div class="preview" id="preview"><div class="preview-content"><img src="‘ + src + ‘"/></div></div>‘);
        $(‘body‘).append( node );
        changeSize();
        setClick();
    };

    function changeSize() {
        var bodyHeight = $(document).height();
        var bodyWidth = $(document).width();
        var imgHeightBefore = $(‘.preview‘).find(‘img‘).height();
        var imgWidthBefore = $(‘.preview‘).find(‘img‘).width();
        var contentHeight = bodyHeight - 100;
        var contentWidth = bodyWidth;
        $(‘.preview-content‘).width( contentWidth );
        $(‘.preview-content‘).height( contentHeight );
        var contentRatio = contentHeight / contentWidth;
        var imageRatio = imgHeightBefore / imgWidthBefore;
        if( contentRatio >= imageRatio ) {
            thisPicWidth = contentWidth;
            thisPicHeight =  Math.round( contentWidth * imageRatio );
            $(‘.preview‘).find(‘img‘).width( thisPicWidth );
            $(‘.preview‘).find(‘img‘).height( thisPicHeight );
        } else {
            thisPicHeight = contentHeight;
            thisPicWidth =  Math.round( contentHeight / imageRatio );
            $(‘.preview‘).find(‘img‘).width( thisPicWidth );
            $(‘.preview‘).find(‘img‘).height( thisPicHeight );
        };
        $(‘.preview‘).find(‘img‘).css( ‘top‘, ( contentHeight - thisPicHeight ) / 2 );
        $(‘.preview‘).find(‘img‘).css( ‘left‘, ( contentWidth - thisPicWidth ) / 2 );
    };

    function setClick() {
        var preview = document.getElementById(‘preview‘);
        preview.ontouchstart = function(event) {
            event.preventDefault();
            var e = window.event || event;
            if( isPress == 0 ) {
                isPress = 1;
                which = ‘singleFinger‘;
            } else {
                if (e.touches[1]) {
                    which = ‘doubleFinger‘;
                    var x1 = e.touches[1].clientX - this.offsetLeft,
                        x2 = e.touches[0].clientX - this.offsetLeft,
                        y1 = e.touches[1].clientY - this.offsetTop,
                        y2 = e.touches[0].clientY - this.offsetTop;
                    theSpaceSite = [{ ‘x‘: x2 , ‘y‘: y2 } , { ‘x‘: x1 , ‘y‘: y1 }];
                } else {
                    which = ‘doubleClick‘;
                    var x = e.touches[0].clientX - this.offsetLeft;
                    var y = e.touches[0].clientY - this.offsetTop;
                    doubleClick(x, y);
                };
            };
            setTimeout( yanChi , 500 );
        };

        preview.ontouchmove = function(event) {
            var e = window.event || event;
            if (e.touches[1]) {
                event.preventDefault();
                isBiger = true;
                var thisImageSite = { ‘width‘: $(‘.preview img‘).width() , ‘height‘: $(‘.preview img‘).height() };
                var thisImageScroll = { ‘left‘: $(‘.preview-content‘).scrollLeft() , ‘top‘: $(‘.preview-content‘).scrollTop() };
                var x0 = e.touches[0].clientX - this.offsetLeft,
                    x1 = e.touches[1].clientX - this.offsetLeft,
                    y0 = e.touches[0].clientY - this.offsetTop,
                    y1 = e.touches[1].clientY - this.offsetTop;
                var thisDoubleMove = [{ ‘left‘: x0 - theSpaceSite[0].x , ‘top‘: y0 - theSpaceSite[0].y }, { ‘left‘: x1 - theSpaceSite[1].x , ‘top‘: y1 - theSpaceSite[1].y }];
                if( x0 >= x1 ) {
                    var bigerNumber = 0;
                } else {
                    var bigerNumber = 1;
                }
                var midSitePlace = { ‘x‘: Math.abs(( x0 + x1 ) * 0.5) , ‘y‘: Math.abs(( y0 + y1 ) * 0.5) };
                changeImageSize( thisImageSite, thisImageScroll, thisDoubleMove, bigerNumber, midSitePlace );
                theSpaceSite = [{ ‘x‘: x0 , ‘y‘: y0 } , { ‘x‘: x1 , ‘y‘: y1 }];
            };
        };
    };

    function yanChi() {
        isPress = 0;
    };

    function doubleClick(x, y) {
        if( isBiger == false ) {
            //将图像放大到两倍大小
            isBiger = true;
            $(‘.preview‘).find(‘img‘).height( thisPicHeight * 2 );
            $(‘.preview‘).find(‘img‘).width( thisPicWidth *2 );

            //将图像放大后放到自己想要的位置上
            var contentHeight = $(‘.preview-content‘).height();
            var contentWidth = $(‘.preview-content‘).width();
            if( contentHeight == thisPicHeight ) {
                $(‘.preview-content‘).scrollTop( y );
                if( contentWidth < 2 * thisPicWidth ) {
                    var scrollX = x - ( contentWidth - thisPicWidth ) / 2;
                    $(‘.preview-content‘).scrollLeft( scrollX );
                };
            } else if( contentWidth == thisPicWidth ) {
                $(‘.preview-content‘).scrollLeft( x );
                if( contentHeight < 2 * thisPicHeight ) {
                    var scrollY = y - ( contentHeight - thisPicHeight ) / 2;
                    $(‘.preview-content‘).scrollTop( scrollY );
                };
            } else {
                alert(‘出了一个问题‘);
            };
        } else {
            isBiger = false;
            $(‘.preview‘).find(‘img‘).height( thisPicHeight );
            $(‘.preview‘).find(‘img‘).width( thisPicWidth );
        };
    };

    function changeImageSize( thisImageSite, thisImageScroll, thisDoubleMove, bigerNumber, midSitePlace ) {
        var finalMove;
        var leftTotalMove = Math.abs(thisDoubleMove[0].left) + Math.abs(thisDoubleMove[1].left),
            topTotalMove = Math.abs(thisDoubleMove[0].top) + Math.abs(thisDoubleMove[1].top);
        if( leftTotalMove >= topTotalMove ) {
            finalMove = leftTotalMove;
        } else {
            finalMove = topTotalMove;
        };
        var leftMultiple = thisDoubleMove[0].left * thisDoubleMove[1].left,
            topMultiple = thisDoubleMove[0].top * thisDoubleMove[1].top;
        if( leftMultiple <= 0 && topMultiple <= 0 ){
            if( ( thisDoubleMove[0].left >= 0 && bigerNumber == 0 ) || ( thisDoubleMove[0].left < 0 && bigerNumber == 1 ) ){
                $(‘.preview img‘).width( thisImageSite.width + finalMove );
                $(‘.preview img‘).height( thisImageSite.height + ( finalMove * thisImageSite.width / thisImageSite.height ) );
                $(‘.preview-content‘).scrollLeft( thisImageScroll.left + finalMove / 2 );
                $(‘.preview-content‘).scrollTop( thisImageScroll.top + ( finalMove * thisImageSite.width / thisImageSite.height ) / 2 );
            } else if( ( thisDoubleMove[0].left >= 0 && bigerNumber == 1 ) || ( thisDoubleMove[0].left < 0 && bigerNumber == 0 ) ) {
                if( thisImageSite.width > thisPicWidth && thisImageSite.height > thisPicHeight ) {
                    $(‘.preview img‘).width( thisImageSite.width - finalMove );
                    $(‘.preview img‘).height( thisImageSite.height - ( finalMove * thisImageSite.width / thisImageSite.height ) );
                    $(‘.preview-content‘).scrollLeft( thisImageScroll.left - finalMove / 2 );
                    $(‘.preview-content‘).scrollTop( thisImageScroll.top - ( finalMove * thisImageSite.width / thisImageSite.height ) / 2 );
                };
            };
        };
    };
</script>
</html>

时间： 2024-10-18 03:40:42

简单的移动端图片预览包含放大缩小以及对各种手势的判定的相关文章

js实现移动端图片预览：手势缩放，手势拖动，双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

html css 图片居中(水平居中和垂直居中)，移动端图片预览

做网站的时候,经常会遇到因图片宽高比率不一致导致图片显示方式有问题. 1.在图片宽高未知的情况下,图片上下左右居中我以前的博客文章有写过,就不再重复了.博客地址,效果预览地址(欢迎copy) 上面的虽然没问题,但是在图片列表里,图片上下左右不对齐,造成图片列表排版很难看,产品要求宽高定死,也就是下面的第二种方法. 2.在图片宽高未知的情况下,img标签宽高固定显示(图片会变形) 效果预览地址(欢迎copy) 因为第二种方法,宽高定死,导致图片变形了,反而不美. 产品说:我要图片不失真,又

jq移动端图片预览 (fly-zomm-img.js)

效果图: ===>==> 里面还与很多属性设置: index 关闭按钮等等代码: //html----------------------- <div class="headerPic" id="headerPic"> <img src="https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_1.jpg" alt=""&

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料还有就是发掘到的比较牛逼的一篇博客:http:/

前端图片预览

网站后台页面有一个功能,管理员上传图片的时候实现预览,这个功能想到两种实现方法: 1.每次添加图片服务端处理图片,ajax传回缩略图,在页面展示. 2.前端实现预览,只有当提交表单的时候才跟服务器交互. 前端预览的好处显而易见,减少跟服务器的请求次数.百度了下,前端完全能实现这个功能,这个功能也就转化成了前端读取本机文件.考虑到网站是给内部人员用的,不用考虑浏览器兼容的问题,实现起来就简单多了. 没什么好说的,上传图片用这个标签<input type="file">,这个标

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前

前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能, 比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览, 很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消上传,弃用这次的上传), 这整个过程都白费了.我们希望能够在图片上传之前就能进行图片的预览,这样就避免了不必要的网络请求和时间等待. 在IE中有如下方式 var url; var file

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性获得文件属性的js代码如下: <script type

文件上传之图片预览

一.业界现状分析有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现方式一:window.URL (1).

简单的移动端图片预览 包含放大缩小以及对各种手势的判定

简单的移动端图片预览 包含放大缩小以及对各种手势的判定的相关文章

简单的移动端图片预览包含放大缩小以及对各种手势的判定

简单的移动端图片预览包含放大缩小以及对各种手势的判定的相关文章