Home > Web Front-end > JS Tutorial > javascript magnifying glass effect js component qsoft.PopBigImage.v0.35 added chrome support_image special effects

javascript magnifying glass effect js component qsoft.PopBigImage.v0.35 added chrome support_image special effects

WBOY
Release: 2016-05-16 18:54:33
Original
1183 people have browsed it

qsoft.PopBigImage.v0.35.demo.rar
New features:
1. There is no need to load onload and specify the id. Just add a mark to the img, and the display layer will be dynamically generated when the first mouse enters
2. You can adjust the size of the display layer on the right at will.

qsoft.PopBigImage
version: 0.35
author: kimmking@163.com
date: March 26, 2009 15:20:50
Function description:
Generally, the display size of the pictures on the page is smaller than the actual size for layout considerations.
When the mouse moves over the image, a layer with the same size as the image will be displayed next to it.
And the area of ​​the original image corresponding to the area near the mouse is displayed in this layer according to its original size.
v0.1: Implemented the function of dynamically displaying the corresponding enlarged partial image when the mouse slides the small image under IE.
v0.2: Implemented Firefox compatibility support, and modified the alignment problem of gaps when passing offset 0,0 under IE.
v0.3: Implemented dynamic creation of display layer when the mouse enters the picture for the first time. Provides a static creation method.
v0.35: Added support for Google Chrome browser.
Parameter description:
origImageId: The id of the img object to be bound
dx: Display the x-axis offset of the large image relative to the right side of the bound img object
dy: Display the large image Relative to the y-axis offset above the bound img object
mx: When the width of the display layer
mx is between 0 and 1, take the value of the width of the large image * mx and the width of the small image. The larger of
mx is between 1 and 10, take the smaller of the width of the small image*mx and the width of the large image.
When mx is greater than 10, make sure that mx is within the width of the large and small images. If it exceeds, take the boundary value
my: the height of the display layer
refer to the value of mx
bflag: whether to display the display layer after rendering in the create method,
in the onmouseover event Use the true parameter
to initialize when the page is loaded. Use the false parameter
Usage:
1. Pre-load the page uniformly after loading, and add JavaScript scripts on the page
window.onload = function(){
new qsoft.PopBigImage("orig",20,0,2,2).render();
//or qsoft.PopBigImage.create("orig",20,0,2,2,false ).render();
}

or
2. The display layer of this image is loaded only when the mouse enters the image for the first time. Add
onmouseover="qsoft in the img tag .PopBigImage.create(this,20,0,2,2,true);"
Download addresshttp://www.jb51.net/codes/12597.html
Demo address :http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage.v0.35.html

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template