v1.0 implementation function
1 Magnification settings
2 Transparency Settings
3 reversal Effects
4 enlarge the size of the picture layer customization
5 the size of the mouse layer customization
6 IE6 under Select cover problem
7 Cursor Style Customization
8 ZIndex Settings
Examples of simple initialization methods
Copy Code code as follows:
New Flower.init ("Demo", "mag");
New Flower.init ("Demo1", "Mag1", {
Max:3,zoomtype:false,zoomwidth:200,zoomheight:200,iframe:true,zindex:666,cursor: "Row-resize"
});
Code explanation
Copy Code code as follows:
defaultconfig={
/**
* Multiple of Magnifier
* @type Number
*/
Max:3,
/**
* * Magnifier The transparency of the mouse movement layer
* @type Number
*/
opacity:0.5,
/** Display effect False is default, true is inverse color effect
* @type Boolean
*/
Zoomtype:false,
/** Display Animation
* @type String
*/
Showeffect: ' Fadein ',
Width of/** amplification layer
* @type Number
*/
Zoomwidth: ' Auto ',
Height of/** amplification layer
* @type Number
*/
Zoomheight: ' Auto ',
/** the width of the mouse layer
* @type Number
*/
Tipswidth: ' Auto ',
/** the height of the mouse layer
* @type Number
*/
Tipsheight: ' Auto ',
/**iframe Cover Select
* @type Boolean
*/
Iframe:false,
/**iframe ZIndex
* @type Number
*/
zindex:999,
/** cursor Style
* @type String
*/
Cursor: "Auto"
};
Component default parameter configuration, including magnification, width, height, transparency, etc. settings
2 Defining properties
Copy Code code as follows:
Namespace.init=function (content,mag,config) {
/**
* Original picture container
* @type HtmlElement
*/
This.content=d.get (content);
/**
* Enlarge picture Container
* @type HtmlElement
*/
This.mag=d.get (MAG);
/**
* Original picture
* @type HtmlElement
*/
This.imgsource=this.content.getelementsbytagname ("img") [0];
/**
* Enlarge picture
* @type HtmlElement
*/
This.img=this.mag.getelementsbytagname ("img") [0];
/**
* Mouse Layer
* @type HtmlElement
*/
This.tips=this.content.getelementsbytagname ("div") [0];
/**
* Configuration Parameters
* @type This.tipsect
*/
This.config=l.merge (defaultconfig,config| | {});
/* Initialize * *
This._init ();
};
The INIT function accepts the container ID of the original three arguments and the enlarged picture container ID and configuration parameters (Firebug students can look at the code structure)
This.config=l.merge (defaultconfig,config| | {});
This sentence is followed by the property of the object that overrides the previous object's properties and returns
such as This.config=l.merge ({"A": "AA"},{"a": "BB"});
At this time the this.config.a = = "BB"
config| | {}
Returns an empty object argument if Config does not exist
Prototype Initialization method
Code
Copy Code code as follows:
_init:function () {
var self=this;
/* Assignment src to large map * *
THIS.IMG.SRC=THIS.IMGSOURCE.SRC;
/*get Border Length * *
This.borderwidth=this.imgsource.offsetwidth-this.imgsource.clientwidth;
/**
* Set the width and height of the large picture (x multiple)
* Set the width and position of large picture container
* Set the width and transparency of the mouse following layer
*/
this.pi= (this.config.zoomwidth!= ' auto '? this.config.zoomwidth/this.imgsource.offsetwidth:1)
this.pi2= (this.config.zoomheight!= ' auto '? this.config.zoomheight/this.imgsource.offsetheight:1)
This._css (this.img,{
' Position ': ' absolute ',
' Width ':(this.config.zoomwidth!= ' auto '? This.imgsource.offsetwidth*this.config.max*this.pi: This.imgsource.offsetwidth*this.config.max) + "px",
' Height ':(this.config.zoomheight!= ' auto '? This.imgsource.offsetheight*this.config.max*this.pi2: This.imgsource.offsetheight*this.config.max) + "px"
}). _CSS (this.mag,{
' Width ':(this.config.zoomwidth!= ' auto '? This.config.zoomWidth:this.imgsource.offsetWidth) + "px",
' Height ':(this.config.zoomheight!= ' auto ' this.config.zoomHeight:this.imgsource.offsetHeight) + "px",
' Left ':D. GetX (this.content) +this.imgsource.offsetwidth+10+ "px",
' Top ': this.content.offsettop+ "px",
' Position ': ' absolute ',
"ZIndex": This.config.zIndex
}). _CSS (this.tips,{
' Display ': ',
' Width ':(this.config.tipswidth!= ' auto '? This.config.tipsWidth:parseInt (This.imgsource.offsetwidth/this.config.max)-this.borderwidth) + "px",
' Height ': (this.config.tipsheight!= ' auto ' this.config.tipsHeight:parseInt) (This.imgsource.offsetHeight/ This.config.max)-This.borderwidth) + ' px ',
' Opacity ': this.config.opacity
})
E.ON (this.content, ' MouseMove ', function (e) {
Self._css (self.mag,{"display": "Block"}). _css (self.tips,{"display": "Block"}). _move (E,self.tips)
})
E.ON (this.content, ' mouseout ', function (e) {
Self._css (self.tips,{"display": "None"}). _css (self.mag,{"display": "None"});
})
!! This.config.zoomType && E.On (self.tips, ' mouseout ', function (E) {
Self._css (self.imgsource,{"opacity": 1});
Self.tips.getElementsByTagName ("img") [0] && Self.tips.removeChild (Self.tips.getElementsByTagName ("img") [ 0]);
})
if (IE6 &&!!! This.config.iframe) {
This._createiframe (THIS.MAG);
}
D.setstyle (this.content, "cursor", this.config.cursor);
},
Initialization source code for the component
The default mouse-following layer and large image is hidden
1. Assign the picture link to the picture you want to enlarge the display.
2. Set the This.pi width ratio and this.pi2 ratio (to the ratio of the actual picture size) If you have a custom zoomwidth or zoomheight size
3. Set the width and height of the large image
4. Set the width and position of large picture container
5. Set the position and width and transparency of the mouse layer
6 Add MouseMove event to original container
7. Add mouseout event to original container
8 Anti-color effects, restore transparency, and remove the Dom used to implement the effect (AppendChild an IMG element in the mouse layer structure)
9 IE6 creates a select that the IFRAME uses to mask. (By default, in the absence of an IFRAME, IE6 will be blocked by select, can not be modified with ZIndex)
10 Setting the cursor style
Method of Style setting
Copy Code code as follows:
_css:function (El,json) {
For (var s in json) {
D.setstyle (El,s,json[s]);
}
return this;
},
Yui has to provide their own way to set the DOM style D.setstyle (Dom,style property name, the value of the property);
Iterate through all the properties of the JSON object with for (Var s in JSON)
return this; Commonly used chain invocation notation//THIS._CSS (/**/). _CSS (/**/). _CSS (/**/) ...
Core MouseMove event code
Copy Code code as follows:
_move:function (e,tips) {
var point=e.getxy (E);
/**
* Hint Layer position
* Large Map Display position
*/
This._css (tips,{
' Top ': Math.min (Math.max (point[1)-This.content.offsettop-parseint (Tips.offsetheight)/2, 0), this.content.offsetheight-tips.offsetheight) + ' px ',
' Left ': Math.min (Math.max (point[0)-This.content.offsetleft-parseint (Tips.offsetwidth)/2, 0), this.content.offsetwidth-tips.offsetwidth) + ' px '
}). _CSS (this.img,{
' Top ':-(parseint (tips.style.top) * This.config.max *this.pi2) + ' px ',
' Left ':-(parseint (tips.style.left) * This.config.max *this.pi) + ' px '
});
/**
* Anti-color effect
*/
if (!! This.config.zoomType) {
if (!tips.getelementsbytagname ("img"). Length) {
var imgs=document.createelement ("img");
Imgs.id= ' temp ';
IMGS.SRC=THIS.IMGSOURCE.SRC;
This._css (imgs,{
' Width ': this.imgsource.offsetwidth+ "px",
' Height ': this.imgsource.offsetheight+ "px",
' Position ': ' absolute '
});
Tips.appendchild (IMGs);
This.imgs=imgs;
}
This._css (this.imgsource,{
"Opacity": 0.2
}). _CSS (this.tips,{
"Opacity": 1,
"Visibility": "Visible"
}). _css (D.get ("temp"), {
' Top ':-(parseint (tips.style.top) + "px",
' Left ':-(parseint (tips.style.left) + "px"
})
}
},
Move mouse position at tip level x axis-This.offsetleft-Mouse frame width/2
Use Math.max and math.min to not allow the mouse frame to exceed the Tuxiang
The move of the position of the large map = the position of the small figure x magnification x Width ratio (default is 1)
The inverse color effect is seen on a plugin in jquery. No, look at his code. The DOM structure should be the same as the way I implemented it.
Set the transparency of the original image to 0.2 this turns gray and then sets the mouse layer transparent to 1, which is opaque. Layer is a picture and Imgsource address is the same
This picture's parent element position is also absolute, so we want to set top and left values in real time to locate the picture of the mouse layer
Create an IFRAME
Copy Code code as follows:
_createiframe:function (EL) {
var layer = document.createelement (' iframe ');
Layer.tabindex = '-1 ';
LAYER.SRC = ' javascript:false; ';
El.appendchild (layer);
This._css (layer,{
"width":(this.config.zoomwidth!= ' auto '? This.config.zoomWidth:this.imgsource.offsetWidth) + "px",
"Height":(this.config.zoomheight!= ' auto ' this.config.zoomHeight:this.imgsource.offsetHeight) + "px",
"ZIndex": This.config.zIndex
})
}
The width and zindex of the IFRAME element are set, the configuration parameters are set Iframe:true and created under IE6, and true is not created under other browsers because it is not necessary
In code improvement
1 plug-in mechanism for adding special effects
2 optimize the code that sets the wide-high value expression it feels too long and too bloated.
3 Increase in photo pre-download
4 Add callback Function interface
5 add classname to allow users to customize
6 and so on (...)
Address Package Download: Magnifier
