These two days to do an online project, in fact, not do it, hey, now say my understanding of this small page effect code download
1. Adding references to JavaScript references and CSS files
A reference to the JS code
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.4.4.min.js" ></script><script Src= "Fancybox/jquery.easing-1.3.pack.js" type= "Text/javascript" ></script>//if needed fancy Transition (some animated effects) you also need to introduce the following script <script src= "fancybox/jquery.fancybox-1.3.4.js" type= "Text/javascript" ></ Script><script src= "Cloud-zoom/cloud-zoom.1.0.2.js" type= "Text/javascript" ></script>//Magnifier plug-in
Reference to CSS Code
<link rel= "stylesheet" href= "Cloud-zoom/cloud-zoom.css" type= "Text/css" >
<link rel= "stylesheet" href= "Fancybox/jquery.fancybox-1.3.4.css" type= "Text/css" >
2.HTML Code
<div class= "Item" > <div class= "item-wrap" > <div class= "Slider" > <ul> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack1.jpg "></a></li> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack2.jpg "></a></li> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack3.jpg "></a></li> </ul> </div> <a class= "Pre" href= "#" ></a > <a class= "Next" href= "#" ></a> <span>hover to zoom, click to view</ span> </div> <div class= "Intro" > Quickly Create any type of Web Form withOur easy -to-use drag and drop form builder. Seamlessly create HTML forms and embed them on your website or use style templates to match your color, Logo and overall look and feel. </p> <a href= "http://www.formstack.com" >http://www.formstack.com</a></div> </div>
First talk about Magnifying glass cloud-zoom, unlike other plug-ins, cloud-zoom do not need to be called in the JS code, only need to add Class A tag "cloud-zoom" can be implemented. If you also want to set other effects, you can use REL to set the following parameters:
Parameters |
Description |
Default Value |
Zoomwidth |
The width of the Magnifier window, which is the same as a small picture if it is the default value. Units are not required, there is a unit error |
' Auto ' |
Zoomheight |
The height of the magnifying glass window, which is the same as the small picture if it is the default value. Units are not required, there is a unit error |
' Auto ' |
Position |
The position of the Magnifier window, optional left, right, top, bottom, or you can specify an ID, such as position: ' element1 ' |
' Right ' |
Adjustx |
The horizontal position from the small picture. Units are not required, there is a unit error |
0 |
Adjusty |
Distance from the vertical position of the small picture. Units are not required, there is a unit error |
0 |
Tint |
The color of the non-magnified area must be a hexadecimal color, such as ' #aa00aa ', and cannot be used with Softfocus |
False |
Tintopacity |
Opacity, 0 is completely transparent, 1 is completely opaque |
0.5 |
Lensopacity |
Lens mouse pointer opacity, 0 is completely transparent, 1 is completely opaque, always transparent in tint and softfocus modes |
0.5 |
Softfocus |
Slight blur effect, optional true or false, cannot be used with tint |
False |
Smoothmove |
Enlarges the smoothness of the image movement, the higher the number the smoother, the 1 is not smooth |
3 |
Showtitle |
Show picture title, optional true or False |
True |
Titleopacity |
Title opacity, 0 is completely transparent, 1 is completely opaque |
0.5 |
3. The JS code of the popup layer plugin
This is a description on the official website, with the default basic settings, custom settings, and the ability to apply pop-up layers to multiple items
We're using multiple cloud-zoom.
$ (". Content. Cloud-zoom"). FancyBox ({ ' transitionin ' : ' elastic ', ' Transitionout ' : ' None ', ' Speedin ' : +, ' speedout ' : $, ' overlayshow ' : true, ' Overlaycolor ' : ' #000 ', ' cyclic ' : true, ' Easingin ' : ' Easeinoutexpo ' });
FancyBox's API and configuration options description
Property name |
Default Value |
Brief Description |
Padding |
10 |
Browse box padding, and css padding a meaning |
Margin |
20 |
Browse box margins, and margin in CSS one meaning |
Opacity |
False |
If true, the transparency can be changed when the animation changes FancyBox |
Modal |
False |
If true, then ' Overlayshow ' will be set to ' true ', ' Hideonoverlayclick ', ' Hideoncontentclick ', ' Enableescapebutton ', ' Showclosebutton ' will be set to ' false ' |
Cyclic |
False |
If True, the album will loop back |
Scrolling |
' Auto ' |
Set the value of the overflow to create or hide the scroll bar, which can be set to ' auto ', ' yes ', or ' no ' |
Width |
560 |
Sets the width of the IFRAME and SWF, and if ' autodimensions ' is ' false ', this can also set the width of the normal text |
Height |
340 |
Sets the height of the iframe and SWF, and if ' autodimensions ' is ' false ', this can also set the height of normal text |
Autoscale |
True |
If the browser window size can be adapted for True,fancybox |
Autodimensions |
True |
In inline text and Ajax, set whether the dimensions of the element are dynamically resized, and if true, make sure that you have set the dimension size for the element |
Centeronscroll |
False |
If true, FancyBox will remain in the center of the browser when you scroll the scroll bar |
Ajax |
{ } |
As with jquery's Ajax invocation options Note: The two callback events ' error ' and ' success ' are rewritten by FancyBox |
Swf |
{wmode: ' Transparent '} |
Settings options for SWF |
Hideonoverlayclick |
True |
If true, click the Mask layer to close the FancyBox |
Hideoncontentclick |
False |
If true, click Play to close the FancyBox |
Overlayshow |
True |
If true, the mask layer is displayed |
Overlayopacity |
0.3 |
Opacity of mask layer (range 0-1) |
Overlaycolor |
' #666 ' |
Background color of mask layer |
Titleshow |
True |
If true, the caption is displayed |
Titleposition |
' Outside ' |
Sets the location of the caption display. Can be set to ' outside ', ' inside ' or ' over ' |
TitleFormat |
Null |
You can customize the formatting of headings |
Transitionin, Transitionout |
' Fade ' |
Sets the animation effect. can be set to ' elastic ', ' fade ' or ' none ' |
Speedin, Speedout |
300 |
Fade and elastic time interval in milliseconds for animation transitions
|
Changespeed |
300 |
Change the time interval (that is, the rate of change) of the FancyBox dimension in milliseconds |
Changefade |
' Fast ' |
The time interval at which content fades (that is, the speed of change) when switching |
Easingin, Easingout |
' Swing ' |
Use easing for elastic animations |
Showclosebutton |
True |
If true, the Close button is displayed |
Shownavarrows |
True |
True to display the previous next navigation arrow |
Enableescapebutton |
True |
If True, ESC is enabled to close the FancyBox |
OnStart |
Null |
callback function, loading content is triggered |
OnCancel |
Null |
callback function, triggering after canceling content loading |
OnComplete |
Null |
callback function, triggering when loading content is complete |
Oncleanup |
Null |
callback function, triggering before closing FancyBox |
Onclosed |
Null |
callback function, triggering after closing FancyBox
|
jquery pop-up layer plugin FancyBox and magnifier plugin Cloud-zoom