jq移动端图片预览 (fly-zomm-img.js)
效果图:
===>
==>

里面还与很多属性设置: 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)的更多相关文章
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- jQuery PC端图片预览,鼠标移上去查看大图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
随机推荐
- ABP Framework 5.2 RC 发布及新增功能介绍
ABP Framework 5.2 RC 新增功能 目录 ABP Framework 5.2 RC 新增功能 单层解决方案模板 EF Core 数据库迁移 UI 和 数据库 选项 API 版本控制 源 ...
- quartz框架(六)-ThreadPool
ThreadPool 本篇博文,博主将介绍Quartz框架中ThreadPool线程池相关的内容.线程池顾名思义,就是一个可以帮助我们来进行线程资源管理的对象.在web开发中,常见的就有数据库连接池, ...
- 怎么样在手机调试js,jq,html,如何在手机上调试js,javascript
方法 直接在html中引入vconsole.js文件, 然后在js脚本中使用console.log('调试内容'); 即可看到如下效果,还可以在network里面看到ajax请求 我把js文件传到博客 ...
- tensorflow源码解析之framework拾遗
把framework中剩余的内容,按照文件名进行了简单解析.时间原因写的很仓促,算是占个坑,后面有了新的理解再来补充. allocation_description.proto 一个对单次内存分配结果 ...
- Applied-Social-Network-Analysis-in-Python 相关笔记4
模型数据越多,Average系数就越小. perferential attachment model 有比较小的平均路径长度,但有着小的cc. rewire:重新连接 如果仅看这个共同的邻居数的话,数 ...
- 29 面向对象编程 static 关键字
补充:static 代码 // static public class Student{ private static int age; // 静态的变量 多线程 private double sco ...
- LGP5795题解
首先 \(k\) 大容易让我们想到 主席树&树套树&整体二分,而异或又让我们想到 01-Trie. 所以就有一个很明显的二分,二分一个 mid 看有多少个数不大于 mid. 然后发现 ...
- VMware15安装 CentOS7 步骤
- javascript 实现富文本框选中对齐
需求: 一个可编辑(contenteditable=true)的div,对齐选中内容,左.中,右 ,其实质是:对选中的末梢节点,找到块属性的父元素,设置text-algin:center: MDN:t ...
- 从SpringBoot到SpringCloudAlibaba简明教程(一):初识SpringBoot及其基础项目构建
前言 Spring框架的大名想必大家早已如雷贯耳,我们来看一下springboot诞生的初衷,以及它在springframe的基础上解决了哪些痛点. 很久以前,J2EE还是java企业级应用的标准规范 ...