效果图:

===>==>

里面还与很多属性设置: index  关闭按钮等等

代码:

//html-----------------------

<div class="headerPic" id="headerPic">
<img src="https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_1.jpg" alt="">
</div> //js-------------------------- $('#headerPic').FlyZommImg({
rollSpeed: 200,//切换速度
miscellaneous: false,//是否显示底部辅助按钮
closeBtn: true,//是否打开右上角关闭按钮
hideClass: 'hideImg',//不需要显示预览的 class
imgQuality: 'thumb',//图片质量类型 thumb 缩略图 original 默认原图
slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
setTimeout(function(){
// 为了一开始居中显示
$('.fly-zoom-box-img').css('width','100%').css('height','auto').css('top',0).css('bottom',0).css('margin','auto');
},300)
}
});

引入jq,  和fly-zomm-img.js====>  链接:https://github.com/Clearlovesky/-js-jq-/blob/master/fly-zomm-img.js

感谢 各位老板  小额打赏:   (有问题call俺)

jq移动端图片预览 (fly-zomm-img.js)的更多相关文章

  1. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  3. jQuery PC端图片预览,鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  5. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  6. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  7. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  8. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

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

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

随机推荐

  1. Flutter的强制自我审查

    在<如何做好 Code Review>中我论述过代码审查对于保证代码品质的重要性,最近开始采用Git Hooks的方式为Flutter项目增加提交前的强制自我审查.这样做的好处在于将机械化 ...

  2. tensorflow core 核心目标依赖图

    Tensorflow的核心代码在core模块中,56w行的代码量让人望而生畏,熟悉了bazel工具之后,发现BUILD文件是理清代码结构的很好的资源,但使用bazel query语法提取出来//ten ...

  3. 通信原理:基于MATLAB的AM调幅分析

    目的: 通过matlab仿真AM调制,通过图像分析来更好的了解AM调制的过程 1.为什么基带信号要加上一个直流分量. 2.所加直流分量为什么要大于基带信号的最大值. 3.时域中调制信号与载波和基带信号 ...

  4. 用 EXISTS 或 NOT EXISTS 用法

    项目中遇到这么个情况: t1表 和 t2表  都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...

  5. VUE3 之 状态动画 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:不用羡慕别人,每个人都有属于自己的人生道路,重要的是在前进道路上遇见阻碍时,如何去积极的面对并解决. 言归正传,今天我们来聊聊 VUE 的状态动画. 2. 状态动画 2.1 数 ...

  6. 获取ajax动态加载的多个a标签中的 点击的那个a标签对应的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. RESTful API设计规范总结

    RESTful 是目前最流行的 API 设计规范,用于 Web 数据接口的设计. 它的大原则容易把握,但是细节不容易做对.本文总结 RESTful 的设计细节,介绍如何设计出易于理解和使用的 API. ...

  8. 《手把手教你》系列基础篇(八十)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-番外篇(详解教程)

    1.简介 经过前边几篇知识点的介绍,今天宏哥就在实际测试中应用一下前边所学的依赖测试.这一篇主要介绍在TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用de ...

  9. Linux安装docker 配置Apache

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 要求: 安装docker yum install docker -y 将centos镜像导入云主机 将centos镜像导入docker docke ...

  10. Git指令小结

    一.初始化 git config --global user.name "username" 设置git用户名 git config --global user.email &qu ...