效果图:

===>==>

里面还与很多属性设置: 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. MATLAB菜鸟入门笔记【函数章】

    一.用捷径表达式赋值 1.first:incr:last   first代表数组的每一个值,incr代表步增量,last代表这个数组的最后一个值. Ep:>>x=1:2:10        ...

  2. ssl 证书配置

    方式1: 1:找见域名列表 2: 主机记录 *,@,www 2:证书申请并下载 3: 4:宝塔网站ssl 参考博客: https://developer.aliyun.com/article/7714 ...

  3. 路由的query参数(传参)

    路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...

  4. 如何创建一个 Cocoapods 插件

    原文链接 前言 我们在使用 Cocoapods 过程中,如果发现它未能满足我们的要求该怎么办呢? 最简单的粗暴的办法就是 fork 一份 Cocoapods 源码,然后自己公司内部或者个人直接针对源码 ...

  5. 最详尽教程完整介绍-Windows 的 Linux 子系统-WSL1&WSL2

    安装 WSL 1. 开启WSL 必须启用"适用于 Linux 的 Windows 子系统"可选功能并重启,然后才能在 Windows 上运行 Linux 发行版. 以管理员运行Po ...

  6. springWeb——Servlet

    6.1.Servlet简介 servlet是sun公司开发动态web的一门技术 sum在这些API中提供了一个接口叫做:Servlet.开发的两个步骤: 编写一个类,实现Servlet接口 把开发好的 ...

  7. pthread_once函数

    http://blog.csdn.net/lmh12506/article/details/8452659 pthread_once()函数详解 在多线程环境中,有些事仅需要执行一次.通常当初始化应用 ...

  8. python爬取网络中的QQ号码

    import urllib.request import ssl import re import os #博客地址:https://blog.csdn.net/qq_36374896 def wri ...

  9. 通过webgoat-xxe、jwt学习Java代码审计

    WebGoat-JWT JWT Tokens 01 概念 本课程将介绍如何使用JSON Web Token(JWT)进行身份验证,以及在使用JWT时需要注意的常见陷阱. 目标 教授如何安全地实现令牌的 ...

  10. requests库获取响应流进行转发

    遇到了一个问题,使用requests进行转发 requests响应流的时候,出现各种问题,问题的描述没有记录,不过Debug以下终于解决了问题.......下面简单的描述解决方案 response = ...