Home > Developer > JavaScript
Code introduction:
JavaScript image amplification technology (magnifiers) sample code, a hot topic, how to use the simplest and most compatible method to write image amplification technology, A large amount of comments in the code can help us to have a deeper understanding of the Js image amplification technology. Many malls use magnifiers. Here is an example.
Code content:
View Code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> [recommended] JavaScript + CSS technology can overwrite the sample code of SELECT image amplification (magnifiers)-www.2cto.com </title>
<Style type = "text/css">
# Magnifier {
Width: 342px;
Height: 420px;
Position: absolute;
Top: 100px;
Left: 250px;
Font-size: 0;
Border: 1px solid #000;
}
# Img {
Width: 342px;
Height: 420px;
}
# Browser {
Border: 1px solid #000;
Z-index: 100;
Position: absolute;
Background: #555;
}
# Mag {
Border: 1px solid #000;
Overflow: hidden;
Z-index: 100;
}
</Style>
<Script type = "text/javascript">
Function getEventObject (W3CEvent) {// event standardization function
Return W3CEvent | window. event;
}
Function getPointerPosition (e) {// compatible with the browser's mouse x, y to obtain the function
E = e | getEventObject (e );
Var x = e. pageX | (e. clientX + (document.doc umentElement. scrollLeft |
Document. body. scrollLeft ));
Var y = e. pageY | (e. clientY + (document.doc umentElement. scrollTop |
Document. body. scrollTop ));
Return {'X': x, 'y': y };
}
Function setOpacity (elem, level) {// sets transparent values for compatible browsers
If (elem. filters ){
Elem. style. filter = 'Alpha (opacity = '+ level * 100 + ')';
} Else {
Elem. style. opacity = level;
}
}
Function css (elem, prop) {// css setting function, which allows you to easily set css values and set transparent values.
For (var I in prop ){
If (I = 'opacity '){
SetOpacity (elem, prop [I]);
} Else {
Elem. style [I] = prop [I];
}
}
Return elem;
}
Var magnifier = {
M: null,
Init: function (magni ){
Var m = this. m = magni | {
Cont: null, // The div that loads the original image
Img: null, // enlarged image
Mag: null, // enlarge the box
Scale: 15 // proportional value. The larger the value is, the larger the value is. However, the problem is that
Some small white edges will be generated when division by Division. Currently, I don't know how to solve this problem.
}
Css (m. img ,{
'Position': 'absolute ',
'Width': (m. cont. clientWidth * m. scale) + 'px ',
// Width * Ratio of the original image
'Height': (m. cont. clientHeight * m. scale) + 'px'
// Height * Ratio of the original image
})
Css (m. mag ,{
'Display': 'none ',
'Width': m. cont. clientWidth + 'px ', // m. cont is the original image, equal to the original image width.
'Height': m. cont. clientHeight + 'px ',
'Position': 'absolute ',
'Left': m. cont. offsetLeft + m. cont. offsetWidth + 10 + 'px ', // enlarge the position of the box.
10px far to the right of the original image
'Top': m. cont. offsetTop + 'px'
})
Var borderWid = m. cont. getElementsByTagName ('div ') [0]. offsetWidth-
M. cont. getElementsByTagName ('div ') [0]. clientWidth; // obtain the border width.
Css (m. cont. getElementsByTagName ('div ') [0], {
// M. cont. getElementsByTagName ('div ') [0] is the browser box
'Display': 'none ',
// Start setting to invisible
'Width': m. cont. clientWidth/m. scale-borderWid + 'px ',
// Original image width/proportion-border Width
'Height': m. cont. clientHeight/m. scale-borderWid + 'px', // height of the original image
/Proportional value-border Width
'Opacity ': 0.5 // sets the transparency.
})
M. img. src = m. cont. getElementsByTagName ('img ') [0]. src; // enlarge the src value of the original image.
Image
M. cont. style. cursor = 'crosshair ';
M. cont. onmouseover = magnifier. start;
},
Start: function (e ){
If (document. all) {// only execute in IE, mainly to prevent the select of IE6 from overwriting
Magniier. createIframe (magniier. m. img );
}
This. onmousemove = magnifier. move; // this points to m. cont
This. onmouseout = magnifier. end;
},
Move: function (e ){
Var pos = getPointerPosition (e); // event Standardization
This. getElementsByTagName ('div ') [0]. style. display = '';
Css (this. getElementsByTagName ('div ') [0], {
'Top': Math. min (Math. max (pos. y-this. offsetTop-parseInt
(This. getElementsByTagName ('div ') [0]. style. height)/2, 0), this. clientHeight-
This. getElementsByTagName ('div ') [0]. offsetHeight) + 'px ',
'Left': Math. min (Math. max (pos. x-this. offsetLeft-parseInt
(This. getElementsByTagName ('div ') [0]. style. width)/2, 0), this. clientWidth-
This. getElementsByTagName ('div ') [0]. offsetWidth) + 'px' // left = mouse x-
This. offsetLeft-browsed box width/2, Math. max and Math. min make the browsed box not exceed the image
})
Magniier. m. mag. style. display = '';
Css (magnifier. m. img ,{
'Top':-(parseInt (this. getElementsByTagName ('div ') [0]. style. top )*
Magniier. m. scale) + 'px ',
'Left':-(parseInt (this. getElementsByTagName ('div ') [0]. style. left )*
Magniier. m. scale) + 'px'
})
},
End: function (e ){
This. getElementsByTagName ('div ') [0]. style. display = 'none ';
Magniier. removeIframe (magniier. m. img); // destroy iframe
Magniier. m. mag. style. display = 'none ';
},
CreateIframe: function (elem ){
Var layer = document. createElement ('iframe ');
Layer. tabIndex = '-1 ';
Layer. src = 'javascript: false ;';
Elem. parentNode. appendChild (layer );
Layer. style. width = elem. offsetWidth + 'px ';
Layer. style. height = elem. offsetHeight + 'px ';
},
RemoveIframe: function (elem ){
Var layers = elem. parentNode. getElementsByTagName ('iframe ');
While (layers. length> 0 ){
Layers [0]. parentNode. removeChild (layers [0]);
}
}
}
Window. onload = function (){
Magniier. init ({
Cont: document. getElementById ('magniier '),
Img: document. getElementById ('magnifierimg '),
Mag: document. getElementById ('mag '),
Scale: 3
});
}
</Script>
</Head>
<Body>
<Div id = "magnifier">
<Div id = "Browser"> </div>
</Div>
<Div id = "mag"> </div>
<Select style = "position: absolute; top: 200px; left: pixel PX; width: 100px;">
<Option> select test </option>
<Option> overwrite </option>
</Select>
</Body>
</Html>
<Br/>
<P> <a href = "http://www.bkjia.com"> Web site Code </a>-the most professional web page code download site-dedicated to provide
Quality webpage code! </P>
Code from: http://www.bkjia.com/kf/201203/122441.html
From website code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
