下载:20130709125708248 原文:jquery ui仿腾讯web qq界面desktop酷炫特效
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/
更多参考:
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
jQuery 缩放 旋转 裁剪图片 Image Cropper
jquery 很赞的背景图片转换插件 Backstretch
5个响应式全屏背景图片变换插件 5 jQuery Responsive Fullscreen Background Image Plugins
jQuery:图片缓存 10 jQuery Image Cache Plugins and Scripts
本文: jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover