效果图:

===>==>

里面还与很多属性设置: 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. 微信小程序文件上传至七牛云(laravel7)

    1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...

  2. C++中vector::data()使用心得和对自定义类型指针运算符的默认重载

    一.C++ vector::data()函数 返回值类型:vector的基类 返回值:Returns a pointer such that [data(), data() + size()] is ...

  3. spring——通过注解显式的完成自动装配

    构建bean文件: public class People { private String name = "小明"; } 编写配置类: @Configuration @Impor ...

  4. JDK API文档_1.6.0 中文版

    链接:https://pan.baidu.com/s/1b0inUgYvEfjeusa3z_2p-g  密码:f8jk

  5. Sealer - 把 Kubernetes 看成操作系统集群维度的 Docker

    作者 | 中弈 写在开头 身为一名技术人员,总是喜欢把自己的作品打造成理想状态呈现给别人,我非常荣幸能把集群镜像这样一个卓越的想法变成现实, 也非常开心用户使用我们的作品时对我们的高度认可. Seal ...

  6. 【网鼎杯】jocker--部分代码加壳逆向处理

    Main函数,用户输入flag,长度为24位 Wrong函数进行了简单的异或操作 Omg函数进行异或操作,根据提示来看应该是假check Encrypt无法生成伪代码 发现有加壳以及自修改,下断点动调 ...

  7. Oracle 11G DBMS包和类型参考

    参阅:https://docs.oracle.com/cd/E11882_01/appdev.112/e40758/d_lob.htm#ARPLS66712

  8. 解释AOP?

    面向切面的编程,或AOP, 是一种编程技术,允许程序模块化横向切割关注点,或横切典型的责任划分,如日志和事务管理.

  9. 什么是 Spring Cloud Bus?我们需要它吗?

    考虑以下情况:我们有多个应用程序使用 Spr ng Cloud Config 读取属性,而S ring Cloud Config 从GIT 读取这些属性. 下面的例子中多个员工生产者模块从 Employe ...

  10. Files的常用方法都有哪些?

    Files. exists():检测文件路径是否存在.Files. createFile():创建文件.Files. createDirectory():创建文件夹.Files. delete():删 ...