Home JS special effects Picture special effects jqzoom picture amplifier code

jqzoom picture amplifier code

jqzoom picture amplifier code

jqzoom image amplifier code, suitable for displaying product images, compatible with mainstream browsers, recommended download on PHP Chinese website! Instructions: 1. Introduction of head area <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> 2. Introduce js library <script src="js/j

jqzoom image amplifier code, suitable for displaying product images, compatible with mainstream browsers, recommended download on PHP Chinese website!
Instructions:
1. Introducing
into the head area <link rel="stylesheet" href="css/jqzoom.css" type="text/css">
2. Introduce js library
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
3. Call jqzoom function library
<script type="text/javascript">
$(function() {
var options =
{
zoomWidth: 250, //The width of the magnifying glass
zoomHeight: 250,//The height of the magnifying glass
zoomType:'reverse'
};
$(".jqzoom").jqzoom(options);
});
</script>

Configuration parameters:
zoomType, default value: 'standard', another value is 'reverse', whether to cover the original image with a semi-transparent layer.
zoomWidth, default value: 200, the width of the enlarged window.
zoomHeight, default value: 200, the height of the magnified window.
xOffset, default value: 10, x-axis offset value of the magnification window relative to the original image, can be negative.
yOffset, default value: 0, the y-axis offset value of the magnification window relative to the original image, can be negative.
position, default value: 'right', the position of the magnified window, the value can also be: 'right', 'left', 'top', 'bottom'.
Lens, default value: true, if false, the lens will not be displayed on the original image.
imageOpacity, default value: 0.2, when the value of zoomType is 'reverse', this parameter is used to specify the transparency of the mask.
title, default value: true, displays the title in the magnification window, the value can be the title value of the a mark, if not, it is the title value of the original image.
showEffect, default value: 'show', displays the effect of enlarging the window, the value can be: 'show', 'fadein'.
hideEffect, default value: 'hide', effect when hiding the magnified window: 'hide', 'fadeout'.
fadeinSpeed, default value: 'fast', fade-in speed of the enlarged window (options: 'fast', 'slow', 'medium').
fadeoutSpeed, default value: 'slow', fadeout speed of the enlarged window (options: 'fast', 'slow', 'medium').
showPreload, default value: true, whether to display the loading prompt Loading zoom (options: ‘true’, ‘false’).
preloadText, default value: 'Loading zoom', custom loading prompt text.
preloadPosition, default value: 'center', the position of the loading prompt, the value can also be 'bycss' to specify the position through css.
Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Related Article

jquery waterfall flow LightBox picture box special effects jquery waterfall flow LightBox picture box special effects

06 Jul 2016

jquery waterfall flow LightBox picture box special effects

CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose

24 Jun 2016

CSS3 practical development: teach you step-by-step how to develop mouse-over picture animation special effects (Part 2)

css special effects_html/css_WEB-ITnose css special effects_html/css_WEB-ITnose

24 Jun 2016

css special effects

HTML&css&j special effects_html/css_WEB-ITnose HTML&css&j special effects_html/css_WEB-ITnose

24 Jun 2016

HTML&css&j special effects

61 web page special effects, very fashionable and with good visual effects_html/css_WEB-ITnose 61 web page special effects, very fashionable and with good visual effects_html/css_WEB-ITnose

24 Jun 2016

61 web page special effects that are very fashionable and have great visual effects

Animated loading effects implemented in pure css3_html/css_WEB-ITnose Animated loading effects implemented in pure css3_html/css_WEB-ITnose

24 Jun 2016

Animation loading special effects implemented in pure css3

A batch of hover effects implemented by CSS3_html/css_WEB-ITnose A batch of hover effects implemented by CSS3_html/css_WEB-ITnose

24 Jun 2016

A batch of hover special effects implemented by CSS3

Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose

24 Jun 2016

Revealing the special effects in Tencent’s Burberry event page

CSS3 mouse slides over animated line border special effects CSS3 mouse slides over animated line border special effects

06 Jul 2016

CSS3 mouse slides over animated line border special effects

See all articles See all articles

Hot Tools

jQuery 3D picture slider carousel effect

jQuery 3D picture slider carousel effect

3D image Slider carousel effect based on jQuery

Pure CSS to achieve cool switching animations when the mouse passes through pictures

Pure CSS to achieve cool switching animations when the mouse passes through pictures

Pure CSS enables cool switching animation code downloads when the mouse passes through pictures.

HTML5 image carousel plug-in with parallax effect

HTML5 image carousel plug-in with parallax effect

An HTML5 picture carousel plug-in with parallax effect, which can control pictures with the mouse and produce a cool visual difference effect when the picture carousel is scrolled.

B site header image interactive mouse hover depth of field focus effect

B site header image interactive mouse hover depth of field focus effect

An interactive mouse-over depth-of-field focus effect web page special effect for the B site header image.

Cool jQuery 3D picture wall effects that can be dragged and rotated

Cool jQuery 3D picture wall effects that can be dragged and rotated

A cool jQuery 3D picture wall effect that can be dragged and rotated. The pictures are surrounded to form a circular picture wall, and each picture has glow and reflection effects. It is a very beautiful picture display effect.