Jqzoom is a jquery-based image method plugin.
How to use: 1. Introduction of jquery and Jqzoom,jqzoom.css
2. Prepare two large and small images of the same size, small images placed in the tag "src" attribute, to the IMG tag add a <a> tag,<a> tag "href" attribute chain to the big picture
Parameter description: zoomwidht: The width of the selected area of the small picture.
Zoomheight: The height of the selected area of the small picture.
Zoomtype: The default value is standard. If set to reverse, the selected area is highlighted and the unchecked area is dimmed when the mouse is moved into the small picture.
Xoffset: The x (horizontal) distance between the enlarged picture and the small picture.
Yoffset: the Y (ordinate) distance between the enlarged picture and the small picture.
Position: The position of the enlarged picture relative to the original picture, default to "right", can also be set to "left", "top", "bottom".
Lens: Boolean value that indicates whether the selected area in the small picture is displayed, the default value is "true", and if set to "false", the theme will not appear above the enlarged picture.
Imageopacity: The value that is used to set the opacity of the unchecked area when the value of Zoomtype is "reverse". The value range is between (0.0-1.0).
Preloadimages: Boolean value that indicates whether to reload the large image.
Preloadtext: The text description of the small image that is displayed when the large image is reloaded.
Title: Whether the top of the large image displays the title in the <a> tag.
Showeffect: Large image loading effects, optional values: "Show" means direct display, "Fadein" is loaded by the transparency gradient load effect.
Hideeffect: Large image hiding effect, optional value: "Hide" means to hide directly, "fadeout" transparency gradient hidden.
Fadeinspeed: When the loading effect of the large image is set to "Fadein", this property can set the time of the effect, the optional value is ' fast ', ' slow ', the number represents, speed, and milliseconds.
Fadtoutspeed: When the hidden effect of the large image is set to "fadeout", this property can set the time that the effect is loaded, the optional value is ' fast ', ' slow ', the number represents, speed, and milliseconds.
Example:
HTML code:
<body> <div style= "margin-left:500px;" > <a id= "img1" href= "/1big.jpg" title= "My Star" ></a> </ Div></body>
JS Code:
<script src= "Jquery.1.8.3.js" type= "Text/javascript" ></script> <script src= " Jquery.jqzoom-core.js "type=" Text/javascript "></script> <link href=" Jquery.jqzoom.css "rel=" Stylesheet "type=" Text/css "/> <script type=" Text/javascript "> $ (function () { $ (' #img1 '). Jqzoom ({ zoomwidth:200, zoomheight:200, position: "Bottom",
Yoffset:50, lens:true, imageopacity:1.0 }); }) </script>
Full code Download