记一次前端：预览图片 移动端

最新推荐文章于 2023-09-12 17:05:07 发布
最新推荐文章于 2023-09-12 17:05:07 发布
阅读量245 收藏
点赞数 1
文章标签： js css html javascript
原文链接：https://www.cnblogs.com/hai2018/p/9681784.html
版权

引用了hammer.min.js

 

js代码 img-app.js

 (function (doc, win) {//这段代码是做手机端rem适应的
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (clientWidth>640){
			   clientWidth=640 
			}
			if (!clientWidth) return;
			else{
				docEl.style.fontSize = clientWidth / 3.75 + 'px';
			}
		};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


$(function () {
//图片预览
    $(".imgflexible").click(function () {
        $(".box").css("display","flex");
        $(".box img").attr("src",$(".imgflexible").attr("src"))
    })
    $(".box").click(function () {
        $(".box").css("display","none");
        $(".box img").attr("src",'')
    })
    doToAll(document.getElementsByClassName('yulan'), function(element){
        var hammer = new Hammer(element)
        hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能
        hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能
        hammer.on("panstart", function(event) {
            var left = element.offsetLeft;
            var tp = element.offsetTop;
            hammer.on("panmove", function(event) {
                element.style.left = left + event.deltaX + 'px';
                element.style.top = tp + event.deltaY + 'px';
            });
        })
        hammer.on("pinchstart", function(e) {
            hammer.on("pinchout", function(e) {
                element.style.transition = "-webkit-transform 300ms ease-out";
                element.style.webkitTransform = "scale(2.5)";
            });
            hammer.on("pinchin", function(e) {
                element.style.transition = "-webkit-transform 300ms ease-out";
                element.style.webkitTransform = "scale(1)";
            });
        })

    })
})
//预览图片，获取节点方法
function doToAll(elems, fn){
    var len = elems.length
    while(--len > -1){
        fn(elems[len])
    }
}

html+css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
            }
            html{
                height:100%;
            }
            body{
                height:100%;
            }
           
            .box {
                width: 3.75rem;
                height:100%;
                background: #333;
                position: absolute;
                top:0px;
                left:0px;
                margin: 0 auto;
                align-items: center; /*定义body的元素垂直居中*/
                justify-content: center; /*定义body的里的元素水平居中*/
                display: none;
                overflow: hidden
            }
            .box img{
                width:100%;
                position: absolute;               
            }
        </style>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="img-app.js" ></script>
    </head>
 
    <body>
		<img class="imgflexible" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545628346247&di=f2fcd4f88291e0f60d6599602ee8ab20&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3304533311%2C1137740692%26fm%3D214%26gp%3D0.jpg"/>
		<div class="box">
			<img src="" />
		</div>
    </body>
</html>

不是专业前端，所以样式不太好看，PC端的体验不是很好，只是简单放大，移动。移动端可以双指拉伸，缩放功能，不是非常完美。

文章引用：http://www.voidcn.com/article/p-qylsnsnv-bxw.html

文章引用2：https://blog.csdn.net/weixin_43099985/article/details/85233931

 

程序小兵1024
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端-移动端滑动图片-原生简单版
weixin_45843676的博客
04-22 1850
移动端滑动图片(原生js实现)
前端上传图片预览
mvpzx的博客
09-09 2879
前端上传图片预览此文将介绍两种方法来实现前端上传图片预览。方法1：FileReader FileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自一个HTMLC
在电脑上开发手机端，如何用手机实时预览
02-17 311
1、cmd ipconfig，获取无线局域网里面的ip地址 把localhost改成当前电脑的IP 把ip:8080/#/goods复制到草料二维码里面（地址：http://cli.im/），生成二维码，然后用手机微信扫描，手机和电脑必须是同一个局域网 转载于:https://www.cnblogs.com/zhaobao1830/p/6411770.html...
移动端+PC端图片预览+手势缩放等功能合集
最新发布
m0_69429961的博客
09-12 301
window.onload = function() { //点击图片进入预览 var $Dom = document.querySelector(".preview"); $Dom.onclick = function() { var temp = this.src; var objE = document.createElement("div"); objE.innerHTML = '' +
如何实现移动端图片预览、缩放、拖动
weixin_35749786的博客
12-16 1029
要在移动端实现图片预览、缩放和拖动，你可以使用如下方法： 使用现有的 JavaScript 库，如 Swiper、PhotoSwipe 等。这些库已经封装了大部分的功能，使用起来非常方便。 使用 HTML5 的相关技术。例如，可以使用 HTML5 的 canvas 元素来实现图片的预览和缩放，使用 touch 事件来实现图片的拖动。 使用原生的移动端控件。例如，在 iOS 中可以使用 WKW...
移动端页面，点击img的图片，会变成预览模式
ruanhongbiao的专栏
06-28 7229
在公司H5项目发现中发现一个兼容性问题，就是在部分Android机自带的浏览器中点击img图片会新打开一个标签页预览图片。 有四种方式去解决这个问题，当然第一种是最简单的，加一条样式就好了。 1.img{ pointer-events: none; } 2.在img元素上添加 onclick="return false" <img src="a.png" onclick="retu...
前端图片预览与上传
wobushixiaobailian的博客
08-11 245
文章目录一、实现二、将存在数据库中的blob图片显示到前端总结参考文献 一、实现 <!DOCTYPE html> <html> <head> <title>图片预览</title> <!--引入jquery--> <script src="https://code.jquery.com/jqu...
前端H5图片预览，PC 手机端通用
07-12
在开发Web应用时，前端H5图片预览功能是一个常见的需求，无论是在PC端还是移动端。这个主题主要涉及如何在HTML5环境下实现图片的预览，确保在不同设备上具有良好的兼容性和用户体验。"viewer.js"是一个常用的轻量级...
jQuery实现移动端图片上传预览组件的方法分析
10-15
1. 创建一个包含文件选择控件的HTML表单，同时添加一个用于预览图片的`<canvas>`元素。 2. 使用jQuery监听文件选择控件的事件，当用户选择文件时，触发`change()`方法。 3. 在`change()`方法中，通过`FileList`获取...
一个移动端专用的Vue2图片预览插件
08-12
预览图片 <img-vuer :images="imageList" :options="previewOptions" ref="imgVuer"> import ImgVuer from 'img-vuer'; export default { components: { ImgVuer }, data() { return { imageList: [/*...
移动端图片浏览插件
08-03
简单粗暴的移动端图片浏览插件，无需额外引入css文件，一个js文件即可搞定。博客原文：https://blog.csdn.net/SundayAaron/article/details/81389464
html5移动端图片上传本地生成缩略图预览（单图上传）
11-19
html5移动端图片上传本地生成缩略图预览，单图上传
前端实现图片预览功能js jq
04-09
在前端开发中，图片预览是一项常见的需求，特别是在用户上传图片或者查看相册时。本文将详细介绍如何使用JavaScript（简称js）和jQuery（简称jq）来实现这一功能，并结合"Viewer.js"插件进行深入探讨。 一、...
Vue.js 2.0 移动端拍照压缩图片上传预览功能
10-20
4. 预览图片时使用previewImage方法，在一个隐藏的div中显示图片，提供了一个预览效果。 最后，开发人员在实现这一功能时应该注意的一些要点包括： - 兼容性问题：不同设备、浏览器对input[type=file]的capture属性...
移动端查看预览图片放大缩小
MtangEr的博客
03-23 5333
方法一 之前介绍过一款 移动端vue适用的插件大全。里边有一篇是查看图片放大缩小的 http://vue.ydui.org/docs/#/lightbox，自行去里边进行知识学习。 方法二 采用微信自带的点击查看预览图片，并且放大缩小 实现方法： 1.先在全局引入 微信的js <script type="text/JavaScript" src="http://res.wx.qq.com/...
手机端图片点击预览，双指放大，完整demo，引入hammer.js
weixin_43099985的博客
12-24 8068
代码凌乱，自己写的绝对能用！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
h5实现移动端图片预览器（一）
weixin_34087307的博客
01-26 2639
最近接触vue.js移动端开发。自己写一个类似微博的图片预览器来学习一下移动端手势的实现和css3的属性的使用。 目标分析 首先分析图片预览器的功能： 1.图片显示2.缩放(swipe)图片3.拖拽图片(drag)3.双击(doubleTap)放大/缩小4.单击(tap)隐藏图片5.左右滑到前一页或后一页 分析的手势有:单击(tap) 双...
前端移动html网页，怎么用手机预览效果
weixin_44668908的博客
11-26 4715
如果仅仅是想预览直接使用chrome开发者工具就好。 如果是想在手机端访问，可以在电脑端启动server服务。然后在手机上通过访问电脑端的 IP：端口 来访问。 顺带推荐下browsersync这个插仵 官网链接http://www.browsersync.cn/ （1.做好把文件改为index.html 2.命令行执行 browser-sync start --server --files ...
美团技术实践：前端与移动端框架、工具与安全
"这篇文档是美团精选的前端技术合辑，涵盖了从微信小程序开发到Android、iOS以及前端安全和性能优化等多个方面的实践和开源项目。其中重点介绍了使用Vue.js的mpvue框架进行微信小程序开发，Flutter的原理与实践，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值