jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover
下载: zoom-master
项目地址: https://github.com/jackmoore/zoom
Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+.
Install via NPM
npm install jquery-zoom
Instructions
Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>
, <span>
, <li>
, <div>
, etc. This excludes <img>
elements (see below).
// Example: $(document).ready(function(){$('a.photo').zoom({url: 'photo-big.jpg'}); });// Using Colorbox with Zoom $(document).ready(function(){$('a.photo').zoom({url: 'photo-big.jpg', callback: function(){$(this).colorbox({href: this.src});}}); });
To use zoom with img
elements, they will need to be wrapped with another element. It is impossible to read some layout related CSS styles from JavaScript (percent-based width and height, margins set to auto, etc.) so the safe thing to do is to defer this change to individual site owners. The following is all that is needed in some cases:
$(document).ready(function(){$('img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom(); });
Removing Zoom
Trigger the zoom.destroy
event to remove zoom from an element:
$('#example').zoom(); // add zoom $('#example').trigger('zoom.destroy'); // remove zoom
Settings
Property | Default | Description |
---|---|---|
url | false | The url of the large photo to be displayed. If no url is provided, zoom uses the src of the first child IMG element inside the element it is assigned to. |
on | 'mouseover' |
The type of event that triggers zooming. Choose from mouseover , grab , click , or toggle .
|
duration | 120 | The fadeIn/fadeOut speed of the large image. |
target | false | A selector or DOM element that should be used as the parent container for the zoomed image. |
touch | true | Enables interaction via touch events. |
magnify | 1 | This value is multiplied against the full size of the zoomed image. The default value is 1, meaning the zoomed image should be at 100% of its natural width and height. |
callback | false | A function to be called when the image has loaded. Inside the function, `this` references the image element. |
onZoomIn | false | A function to be called when the image has zoomed in. Inside the function, `this` references the image element. |
onZoomOut | false | A function to be called when the image has zoomed out. Inside the function, `this` references the image element. |
原文: http://www.jacklmoore.com/zoom/
本文: jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover
jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover相关推荐
- 图片浏览(点击放大缩小支持多张图片浏览)
大神写的,我就参考参考啦! 从主布局开始了 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- Lightbox相册,图片滚动和点击放大
演示地址:http://www.corange.cn/demo/3740/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jQuery实现图片点击放大缩小(小案例)
我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图 ...
- 前端jquery实现图片点击放大缩小
利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度 ...
- jQuery点击放大缩小图片尺寸的方法
一.尺寸方法 a).获取方法 .height( ) 获取到高度 .width( )获取到宽度 b).设置方法 .height('值' ) 设置高度 .width('值' )设置宽度 二.放大图片尺寸 ...
- html响应式布局平移,jQuery图片内部缩放和平移插件jquery.zoom.js
插件描述:jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件.该插件可以鼠标滑过图片,点击图片或移动手机上触摸图片时,将图片进行放大或平移操作. 简要教程 jquery.z ...
- html图片上传阅览并且点击放大
关闭 qq_31540195的博客 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书:ES6.虚拟现实.物联网(评论送书) htm ...
- JQuery,图片的放大和缩小
JQuery支持图片放大.缩小: 一.JQuery支持图片放大.缩小: 今天在"懒人之家"看到JQuery支持图片放大和缩小这个效果,顿时觉得非常神奇,就学习一下的. 二.下载源码 ...
- 图片点击放大,并显示浮层
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
最新文章
- “请给我一个五彩斑斓的黑”,只需一行命令就能让AI画画,OpenAI的Dall-E被大神复现...
- [POJ](3268)Silver Cow Party ---最短路径(图)
- python接口自动化(十四)--session关联接口(详解)
- Delphi - 对象构造浅析后续
- 【参会指南】神策 2020 数据驱动用户大会,10 月 13 日将重磅开幕!
- 程序路径查找 找到指定程序所在的目录
- 联想拯救者y空间_ThinkPad X1 Nano上市;联想拯救者R9000X、Y9000X发布
- php 基础系列之 php快速入门
- Linux检查当前运行级别
- 成大事必备9种能力.9种手段.9种心态
- 字典工具类 DictUtils 源码及分析
- 零基础入门学习汇编语言~基础知识~机器语言与汇编语言的产生及组成
- HTML5 input类型 range滑动条 介绍与使用
- k近邻(kNN)算法的Python实现(基于欧氏距离)
- word图片靠右_word设置图片边缘透明的方法步骤
- Android Automotive车载嵌入式系统
- 多项式定理【OI Pharos 6.2.2】
- Java学习----二维数组排序
- win10 电脑中模块initpki.dll加载失败提示0x80004005错误代码如何解决
- 防红直连php,全新网址缩短防封 QQ/微信防红 短网址生成系统PHP源码
热门文章
- 逆波兰表达式(信息学奥赛一本通-T1198)
- 再求f(x,n)(信息学奥赛一本通-T1167)
- 字符菱形(信息学奥赛一本通-T1028)
- 3 MM配置-企业结构-定义-定义库存地点
- 一起学习C语言:初步进入编程世界(三)
- GhostNet网络
- 4-1 AlexNet神经网络
- CSS3 :nth-child() ,nth-of-type(),nth-last-child() ,nth-last-of-type()
- [Unity] AnimationEvent 因 Animator Controller 中 Transition 设置问题而不触发的快速解决办法:重新拖入 Animator 创建新 State
- 华图砖题库php文件怎么打印_事业单位招聘考试《工会基础知识》试题库及答案1380题...