Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! 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> JavaScript image amplification technology (magnifiers) for code sharing-www.jb51.net </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. But the problem here is that if Division cannot be completed, some small white edges will be generated. 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' // The 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 ', // The Position of the enlarged box is 10px far from 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 to set to invisible
'Width': m. cont. clientWidth/m. scale-borderWid + 'px', // width/proportion of the original image-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; // use the src value of the original image to enlarge the 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-view box width/2, Math. max and Math. min makes the browser 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>
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
