点击查看大图滑动预览touchTouch app放大缩小pinchzoom

最新推荐文章于 2023-03-01 10:09:14 发布
最新推荐文章于 2023-03-01 10:09:14 发布
阅读量480 收藏
点赞数
分类专栏： JavaScript 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/103418736
版权

https://pan.baidu.com/s/1_BCUSss8_3i3yiSATyc89w 提取码: h436

图片404处理

// touchTouch.jquery.js loadImage(src, callback){} 函数内部
// 添加错误图片处理
var img = $('<img>')
img.on('load', function(){
	callback.call(img);
});
var stu = true
img.on("error", function () {
  	if(!stu){
		callback.call($("<span>").text("图片找不到了"))
	}else{
		$(this).attr("src", "./img/error.png"); //备用错误图片
		stu = false
	}
})
img.attr('src',src);

在这里插入图片描述

*{ touch-action: none; }

解决这个错误
在这里插入图片描述
代码示例


<!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,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />

　　　　<title>测试</title>
　　　　<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch/touchTouch.css" />
　　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
　　　　<script type="text/javascript" src="touchTouch/touchTouch/touchTouch.jquery.js" ></script>
　　　　<style>
　　　　		*{ touch-action: none; }
            .img-container{
                overflow: hidden;
            }
            .img-container a{
                float: left;
                width: 100px;
                height: 200px;
                overflow: hidden;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
       </style>
　　</head>
　　<body>

　　　　<div class="img-container" id="thumbs">
　　　　　　<a href="./img/01.png" style="background-image: url(./img/01.png);"></a>
　　　　　　<a href="./img/02.png" style="background-image: url(./img/02.png);"></a>
　　　　　　<a href="./img/03.png" style="background-image: url(./img/03.png);"></a>
　　　　</div>



		<div class="img-container" id="thumbs2">
　　　　　　<a href="./img/01.png" style="background-image: url(./img/01.png);"></a>
　　　　　　<a href="./img/02.png" style="background-image: url(./img/02.png);"></a>
　　　　　　<a href="./img/03.png" style="background-image: url(./img/03.png);"></a>
　　　　</div>
　　　　<script>
　　　　　　$(function(){
　　　　　　　　$('#thumbs a').touchTouch();
			   $('#thumbs2 a').touchTouch();
　　　　　　})
　　　　</script>
　　</body>
</html>

App放大缩小处理 pinchzoom.js

https://github.com/manuelstofer/pinchzoom/blob/master/src/pinch-zoom.js
或
https://download.csdn.net/download/weixin_42448623/12024185
单独使用示例

<!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="../img/01.png"/>
    </div>
</div>
<!-- <script src="js/jquery-1.7.2.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./pinchzoom.js"></script>
<script type="text/javascript">
    $(function () {
        $('div.pinch-zoom').each(function () {
            new RTP.PinchZoom($(this), {});
        });
    })
</script>
</body>
</html>

配合使用

修改 touchTouch.jquery.js

items.on('click', function(e){
	 ......
	 
	// 最后
	$('.placeholder').each(function () {
         new RTP.PinchZoom($(this), {});
    });
}

代码


<!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,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />

　　　　<title>测试</title>
　　　　<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch/touchTouch.css" />
　　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<!-- <script src="https://hammerjs.github.io/dist/hammer.js"></script> -->
		<script src="./pinchzoom.js"></script>
　　　　<script type="text/javascript" src="touchTouch/touchTouch/touchTouch.jquery.js" ></script>

　　　　<style>
			*{ touch-action: none; }
            .img-container{
                overflow: hidden;
            }
            .img-container a,.img-container img{
                float: left;
                width: 100px;
                height: 200px;
                overflow: hidden;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
            .pinch-zoom-container{
            	width:100%;
            	height:100%; 
            	display: inline-block;
            }
       </style>
　　</head>
　　<body>

　　　　<div class="img-container" id="thumbs">
			<a href="./img/01.png" style="background-image: url(./img/01.png);">3</a>
			<a href="./img/02.png" style="background-image: url(./img/02.png);">3</a>
			<a href="./img/03.png" style="background-image: url(./img/03.png);">3</a>
		</div>



	
　　　　<script>
　　　　　　$(function(){
　　　　　　　　$('#thumbs a').touchTouch();
　　　　　　})
	 		
　　　　</script>
　　</body>
</html>

一个页面多处使用 互不影响


<!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,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    　　<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch/touchTouch.css" />
　　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="pinchzoom.js" ></script>
　　　　<script type="text/javascript" src="touch.js" ></script>
　　　　<title>测试</title>

　　　　<style>
            .img-container{
                overflow: hidden;
            }
            .img-container img{
                float: left;
                width: 200px;
                height: 200px;
                overflow: hidden;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
       </style>
　　</head>
　　<body>

　　　　<div class="img-container" id="thumbs">
　　　　　　<img data-index="0" href="http://pic.netbian.com/uploads/allimg/181116/174424-15423614646d06.jpg" >
　　　　　　<img data-index="1" href="http://pic.netbian.com/uploads/allimg/181115/114126-154225328668ce.jpg">
　　　　　　<img data-index="2"href="http://pic.netbian.com/uploads/allimg/181101/195002-1541073002d4f0.jpg" >
　　　　</div>

        <div class="img-container" id="thumbs3">
            <img data-index="0" href="http://pic.netbian.com/uploads/allimg/181115/114126-154225328668ce.jpg" >
            <img data-index="1" href="http://pic.netbian.com/uploads/allimg/181101/195002-1541073002d4f0.jpg" >
            <img data-index="2" href="http://pic.netbian.com/uploads/allimg/181116/174424-15423614646d06.jpg" >
　　　　</div>
　　　　<script>
            $(document).ready(function(){
                var imrArr = [
                    "http://pic.netbian.com/uploads/allimg/181116/174424-15423614646d06.jpg",
                    "http://pic.netbian.com/uploads/allimg/181115/114126-154225328668ce.jpg",
                    "http://pic.netbian.com/uploads/allimg/181101/195002-1541073002d4f0.jpg"
                ]
                var imrArr2 = [
                    "http://pic.netbian.com/uploads/allimg/181115/114126-154225328668ce.jpg",
                    "http://pic.netbian.com/uploads/allimg/181101/195002-1541073002d4f0.jpg",
                    "http://pic.netbian.com/uploads/allimg/181116/174424-15423614646d06.jpg"
                ]

                $("#thumbs img").touchTouch(imrArr)
                $("#thumbs3 img").touchTouch(imrArr2)
            })
            
　　　　</script>
　　</body>
</html>

(function(){
	
    var touchArr = []
	$.fn.touchTouch = function(imgurl){
        
        function Touch(imgParent,items,imgurl){
            this.parent = imgParent;
            this.placeholders = $([]);
			this.index = 0;
            this.zooms = [];
            this.items = items;
            this.imgurl = imgurl
        }
        Touch.prototype.init = function(){
            this.created();

            // 将标记附加到页面
            this.overlay.hide().appendTo(this.parent)
            this.closeBtn.appendTo(this.overlay);
            this.slider.appendTo(this.overlay,this.closeBtn);
            this.overlay.append(this.prevArrow).append(this.nextArrow);

            var _this = this;
            // 为每个图像创建占位符
            this.items.each(function(){
                _this.placeholders = _this.placeholders.add($('<div class="placeholder">'));
            });
            this.slider.append(this.placeholders);

            this.event()
        }
       
        Touch.prototype.created = function(){
            this.overlay = $('<div class="galleryOverlay">');
            this.slider = $('<div class="gallerySlider">');
            this.prevArrow = $('<a class="prevArrow"></a>');
            this.nextArrow = $('<a class="nextArrow"></a>');
            this.closeBtn = $('<span class="closeBtn"></span>');
            this.overlayVisible = false;
        }
        
        Touch.prototype.hideOverlay = function(){
            window.localStorage.setItem("windowReceiverAPP_img", "")
            if(!this.overlayVisible){
                return false;
            }
            
            this.overlay.hide().removeClass('visible');
            this.overlayVisible = false;
        }

        Touch.prototype.showOverlay = function(){
            window.localStorage.setItem("windowReceiverAPP_img", "1")
            var _this = this;
			if (this.overlayVisible){
				return false;
			}
			this.overlay.show();
			setTimeout(function(){
				_this.overlay.addClass('visible');
			}, 100);
	
			this.offsetSlider(this.index);
			
			this.overlayVisible = true;
        }

        Touch.prototype.event = function(){
            var _this = this;
            this.closeBtn.click(function(e){
                if(!$(e.target).is('img')){
                    _this.hideOverlay();
                }
            })

            this.overlay.on('touchstart', '.gallerySlider .placeholder', function(e){
                var touch = e.originalEvent,
                    startX = touch.changedTouches[0].pageX;
        
                _this.slider.on('touchmove',function(e){
                    e.preventDefault();
                    touch = e.originalEvent.touches[0] ||
                            e.originalEvent.changedTouches[0];
                    
                    // 左滑动
                    if(touch.pageX - startX > 10){
                        _this.slider.off('touchmove');
                        _this.showPrevious();
                    }
                    // 右滑动
                    else if (touch.pageX - startX < -10){
                        _this.slider.off('touchmove');
                        _this.showNext();
                    }
                });
    
                return false;
                
            }).on('touchend',function(){
                _this.slider.off('touchmove');
            });

            this.items.on('click', function(e){
                e.preventDefault();              
               
                _this.index = parseInt($(this).attr("data-index"))//items.index(this);
                console.log("index:",_this.index)
                _this.showOverlay(_this.index);
                _this.showImage(_this.index);
                
                // 预加载之后
                _this.preload(_this.index+1);
                // 预加载之前
                _this.preload(_this.index-1); 
                
                // $('.placeholder').each(function () {
                //     	new RTP.PinchZoom($(this), {});
                //     // var zoom = new pinchzoom($(this), {
                //     //     tapZoomFactor:1, //双击放大倍数 默认2
                //     // })
                //     // zooms.push(zoom)
                //     //zoom.zoomOutAnimation() //缩放到原来的位置
    
                // });
                
            });
			
			this.prevArrow.click(function(e){
				e.preventDefault();
				_this.showPrevious();
			});
			
			this.nextArrow.click(function(e){
				e.preventDefault();
				_this.showNext();
			});
        }

        Touch.prototype.offsetSlider  = function(index){
            this.slider.css('left',(-index*100)+'%');
        }

        Touch.prototype.showImage = function(index){
            if(index < 0 || index >= this.items.length){
				return false;
			}
            var _this = this;
			this.loadImage(this.imgurl[index], function(){
				_this.placeholders.eq(index).html(this);
            });
        }

        Touch.prototype.loadImage = function(src, callback){
            var img = $('<img>')
			img.on('load', function(){
				callback.call(img);
			});
			var stu = true
			img.on("error", function () {
				if(!stu){
					var span = $("<span>").text("图片找不到了").css("color","white")
					callback.call(span)
				}else{
					$(this).attr("src", "./img/01.png"); //备用错误图片
				}
			})
			img.attr('src',src);
        }

        Touch.prototype.preload = function(index){
            var _this = this;
            setTimeout(function(){
				_this.showImage(index);
			}, 1000);
        }
        
        Touch.prototype.showNext = function(index){
            var _this = this;
            if(this.index+1 < this.imgurl.length){
				this.index++;
				this.offsetSlider(this.index);
				this.preload(this.index+1);
			}
			else{
				this.slider.addClass('rightSpring');
				setTimeout(function(){
					_this.slider.removeClass('rightSpring');
				},500);
			}
        }

        Touch.prototype.showPrevious = function(index){
            var _this = this;
            if(this.index>0){
				this.index--;
				this.offsetSlider(this.index);
				this.preload(this.index-1);
			}
			else{
				this.slider.addClass('leftSpring');
				setTimeout(function(){
					_this.slider.removeClass('leftSpring');
				},500);
			}
        }

        Touch.prototype.closeBtnClick = function(){
            this.closeBtn.click()
        }

        Touch.prototype.close = function(){
            this.overlay.remove()
			$(window).unbind("PAGE_PAGE_APP_IMG_TOUCH")
        }

        var Touch = new Touch($(this).parent(),this,imgurl)
        Touch.init()
        touchArr.push(Touch)
		
		// 返回关闭图片预览
		$(window).on("APP_IMG_TOUCH",function(){
			console.log("返回关闭图片预览")
            closeTouch()
		})
		
		// 页面离开
		$(window).on("PAGE_APP_IMG_TOUCH",function(){
			console.log("页面离开 清理图片预览")
			removeTouch()
		})
        
        // 离开
        function removeTouch(){
            for(var i = 0; i < touchArr.length; i++){
                touchArr[i].closeBtnClick()
                touchArr[i].close()
            }
        }
        
        // 关闭
		function closeTouch(){
			for(var i = 0; i < touchArr.length; i++){
                touchArr[i].closeBtnClick()
            }
		}
	};
	
})(jQuery);
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
touch.js JQuery touch插件
06-22
综合改进了zepto和JQuery mobile的touch和swipe功能，下面是DEMO touch demo touch demo 相对已滑动：X:0|Y:0 滑动距离：0 $(function () { var $btn = $('button') $btn.on('tap dbltap longtap', function (e) { $('#event').html(e.type) }); $btn.swipe(function (e, data) { $('#event').html(e.type); $('#distanceobj').html("dist[X:" + data.X + "|Y:" + data.Y + "]") }); $btn.on('swipeleft swiperight swipeup swipedown', function (e, data) { $('#event').html(e.type); $('#distance').html(data) //滑动距离 }) })
如何实现移动端图片预览、缩放、拖动
weixin_35749786的博客
12-16 1003
要在移动端实现图片预览、缩放和拖动，你可以使用如下方法： 使用现有的 JavaScript 库，如 Swiper、PhotoSwipe 等。这些库已经封装了大部分的功能，使用起来非常方便。 使用 HTML5 的相关技术。例如，可以使用 HTML5 的 canvas 元素来实现图片的预览和缩放，使用 touch 事件来实现图片的拖动。 使用原生的移动端控件。例如，在 iOS 中可以使用 WKW...
PDF在线预览插件touchPDF.js：手机端预览
Mr_Van的博客
03-11 2438
接上一篇web端预览，博主找了一篇关于手机端的预览插件，丑是丑了点，但是能用，下面就来介绍一下吧！ PDF在线预览插件：手机端预览1、编辑界面的HTML代码2、第二步就没了3、既然这样那我们直接上预览图吧 项目相关： version : pdf.compatibility 上篇博客也说了，这段时间再开发一个功能Pdf在线预览，也介绍完了电脑端网页预览插件，但之前用的PDF-object并不支持手机网页端预览，因为需求需要，所以有研究了一下手机端的，这里就讲一下手机网页端预览的插件！ 博主也简单做了.
js 简单实现点击图片预览功能
Tianxiaoxixi的博客
03-01 2165
js 简单实现点击图片预览功能
移动端图片预览缩放-小技巧
qq_21476953的博客
11-12 885
移动端图片预览缩放-小聪明 移动端开发的html中一定会有这样一句: <mate name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 含义: <meta name="viewport" content="name=value,name=value"> - width...
jQuery实现朋友圈查看图片
10-14
这个功能主要包括点击图片显示大图，并且支持用户通过滑动或点击左右按钮来切换查看不同的图片。下面将详细介绍实现这一功能的关键步骤和技术。 首先，我们需要引入必要的资源。在HTML文件的`<head>`部分，可以看到...
touchTouch.zip
12-24
《深入理解"touch"命令：从"touchTouch.zip"看文件操作》 在信息技术领域，文件操作是日常工作中不可或缺的一部分。"touch"命令是Linux和Unix操作系统中的一个基础工具，用于更新文件或目录的访问和修改时间戳，...
蓝色个性大图个人相册模板网站_蓝色个性个人相册画廊图片html5.rar
最新发布
09-12
7. **touchTouch.css**：TouchTouch 可能是一个轻量级的JavaScript库，用于实现触摸设备上的图片查看和滑动效果。在移动设备上，它可以提供更好的用户体验，使用户能够轻松浏览和放大相册图片。 8. **reset.css**：...
简约生活个人家庭摄影企业网站模板_简约简单家庭摄影企业整站简洁线条设计工作室案例大图jquery.rar
09-12
6. **touchTouch.css**：touchTouch是一个触控友好的图片滑动插件的样式文件，它使得在移动设备上查看大图变得容易，用户可以通过轻扫或点击导航点来浏览相册。 7. **slider.css**：滑块组件是展示摄影作品或突出...
【js的dom操作之】js实现图片预览功能，手机端电脑端通用
gzyh_tech的博客
06-23 959
【本想做搬运工】前端用的layui，连个可连续预览图片的实现办法都没有，那么只得自己写代码了。 【思路】 实现的方式就是，传入一个图片路径数组和当前预览图片的id（或索引值），再预览加载图片，并可以切换预览图片。类型小程序的previewImage。那么，使用纯js写代码，就要设计到一些dom的操作了。 【代码结构】 想着方便，还是像layui一样，引入css样式代码和js代码就可以随意使用的好。那么就一个previewImg.css和一个previewImg.js。 css代码：主要是遮罩、左右
Pinchzoom.js插件实现手指触摸图片放大缩小
11-23
Pinchzoom.js插件实现手指触摸图片放大缩小
基于jQuery的轻量级touch事件库
08-09
基于jQuery的轻量级touch事件库 demo: photo-slide 支持移动端和pc端 touchstart touchmove touchend
jquery.touch
07-04
基于zepto.touch.js修改。作为jquery的插件，兼容PC端。支持tap、singleTap、doubleTap、longTap、swipe、swipeLeft、swipeRight、swipeUp、swipeDown
jquery.touch.js
07-04
基于zepto.touch.js修改。增加部分代码以兼容PC端。作为jQuery的插件进行调用。支持原生click，以及tap，singleTap，doubleTap，longTap，swipe，swipeLeft，swipeRight，swipeUp，swipeDown
模仿微信朋友圈 图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
jia2799897415的博客
05-07 677
首先引入一下两个js文件， <script src="dist/md5.js"></script> <script src="dist/previewImage.min.js"></script> 整个HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PreviewImage&l
js 移动端 图片放大预览+拖拽
defxg的博客
01-09 1294
用了其他插件放大都会出现失真的问题，于是直接手写了个半成品，优化没有做。只做了放大预览和拖拽，拖拽没有做边界判断，代码可以直接拿去用。
关于touchTouch.jquery.js浏览图片重复的问题
weixin_33806300的博客
08-30 205
2019独角兽企业重金招聘Python工程师标准>>> ...
手机端图片放大
weixin_46019220的博客
09-15 312
<div class="mg"> <img src="images/map-mg.png" > </div> .mg{ width: 300px; height: 300px; } .mg img{ width: 100%; } <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="zoom.j.
分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
weixin_34032792的博客
05-07 77
为什么80%的码农都做不了架构师？>>> ...
js移动端手势放大缩小移动图片（优化）
sjpeter的专栏
12-25 4419
#msgPopover img{ width: 100%; /*padding: .2rem .4rem;*/ overflow: auto; position: relative; } <div id="msgPopover" class="mui-popover"> <div class="msg-img"> <img id="msgPopoverImg" src=.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值