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的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
随机推荐
- laravel8安装步骤
网址: https://learnku.com/docs/laravel/8.x/installation/9354 安装: # 安装laravel composer create-project - ...
- PhpStrom 好用的代码小地图插件
类似SublimeText的Mini Map插件 ,废话不多直接上 安装 打开File -> Settings -> Plugins -> 搜索CodeGlance -> in ...
- Java学习笔记:01面向对象-继承
01面向对象-继承 一.java中的数据类型 1.基本数据类型:四类 八种 byte(1) boolean(1) short(2) char(2) int(4) float(4) long(8) do ...
- ActiveMQ代码-01
p2p模式 生产者 package com.activemq.activemqdemo.p2p; import org.apache.activemq.ActiveMQConnectionFactor ...
- Linux下使用Google Authenticator配置SSH登录动态验证码
1.一般ssh登录服务器,只需要输入账号和密码.2.本教程的目的:在账号和密码之间再增加一个验证码,只有输入正确的验证码之后,再输入密码才能登录.这样就增强了ssh登录的安全性.3.账号.验证码.密码 ...
- UIautomatorviewer连接设备报错Unexpected error while obtaining UI hierarchy
先来看下现象哈,点击sdk/tools下uiautomatorviever.bat,点击连接设备的图标,本以为就这么简单,那你就错了: 是不是看到这个瞬间心情就不好了,那么我们该怎么解决这个问题呢,归 ...
- 绕过CDN找到⽬标站点真实IP
一.判断目标网站是否使用CDN 在渗透测试中,如果连真实 IP 都没有找到的话,相当于连门都没有找到.所以,如何验证目标网站是否使用了 CDN 呢? 1.多地 ping 法(一般情况下使用多地 pin ...
- luoguP6620 [省选联考 2020 A 卷] 组合数问题(斯特林数)
luoguP6620 [省选联考 2020 A 卷] 组合数问题(斯特林数) Luogu 题外话: LN切这题的人比切T1的多. 我都想到了组合意义乱搞也想到可能用斯特林数为啥还是没做出来... 我怕 ...
- 【ASP.NET Core】MVC模型绑定:非规范正文内容的处理
本篇老周就和老伙伴们分享一下,对于客户端提交的不规范 Body 如何做模型绑定.不必多说,这种情况下,只能自定义 ModelBinder 了.而且最佳方案是不要注册为全局 Binder--毕竟这种特殊 ...
- Vue指令02——v-on指令和v-show的使用
Vue指令02--v-on指令和v-show的使用 v-on指令 格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...