This article describes the method of JS to achieve local enlargement or reduction of images. Share it for your reference, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magnifier</title>
<style type="text/css">
#magnifier{
width:500px;
height:696px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1px solid #000;
}
#img{
width:500px;
height:696px;
}
#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 standardized function return W3CEvent || ;
}
function getPointerPosition(e) { //Get function with the browser's mouse x and y e = e || getEventObject(e);
var x = || ( + ( || ));
var y = || ( + ( || ));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) { //Compatible browser settings transparent value if() {
= 'alpha(opacity=' + level * 100 + ')';
} else {
= level;
}
}
function css(elem,prop) { //CSS setting function can easily set css value and compatible with setting transparent value for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem,prop[i]);
} else {
[i] = prop[i];
}
}
return elem;
}
var magnifier = {
m : null,
init:function(magni){
var m = = magni || {
cont : null, //Load the div of the original image img : null, // Zoom in image mag : null, // Zoom in the box scale : 15 //Scale value, the larger the value set, the larger the enlargement, but there is a problem here that if it cannot be divided, some small white edges will be generated. I don't know how to solve it at present }
css(,{
'position' : 'absolute',
'width' : ( * ) + 'px', //The width*scale value of the original image 'height' : ( * ) + 'px' //The high* scale value of the original image })
css(,{
'display' : 'none',
'width' : + 'px', //It is the original image, which is the same width as the original image 'height' : + 'px',
'position' : 'absolute',
'left' : + + 10 + 'px', //The position of the enlargement box is 10px to the right of the original image 'top' : + 'px'
})
var borderWid = ('div')[0].offsetWidth - ('div')[0].clientWidth; //Get the border width css(('div')[0],{ //('div')[0] is the browsing box 'display' : 'none', //Start set to invisible 'width' : / - borderWid + 'px', //The width/scale value of the original image - the width of the border 'height' : / - borderWid + 'px', //The height/scale value of the original image - the width of the border 'opacity' : 0.5 //Set transparency })
= ('img')[0].src; //Let the original image's src value be given to the enlarged image = 'crosshair';
= ;
},
start:function(e){
if(){ //Execute only in IE, mainly to avoid the inability to overwrite the select of IE6 ();
}
= ; //this points to = ;
},
move:function(e){
var pos = getPointerPosition(e); // Event standardization ('div')[0]. = '';
css(('div')[0],{
'top' : (( - - parseInt(('div')[0].) / 2,0), - ('div')[0].offsetHeight) + 'px',
'left' : (( - - parseInt(('div')[0].) / 2,0), - ('div')[0].offsetWidth) + 'px' //left=Mouse x - - Browse box width/2, and let the browse box not exceed the image })
= '';
css(,{
'top' : - (parseInt(('div')[0].) * ) + 'px',
'left' : - (parseInt(('div')[0].) * ) + 'px'
})
},
end:function(e){
('div')[0]. = 'none';
(); //Destroy the iframe = 'none';
},
createIframe:function(elem){
var layer = ('iframe');
= '-1';
= 'javascript:false;';
(layer);
= + 'px';
= + 'px';
},
removeIframe:function(elem){
var layers = ('iframe');
while( >0){
layers[0].(layers[0]);
}
}
}
= function(){
({
cont : ('magnifier'),
img : ('magnifierImg'),
mag : ('mag'),
scale : 3
});
}
</script>
</head>
<body>
<div >
<img src="lib/images/" />
<div ></div>
</div>
<div ><img /></div>
<select style="position:absolute;top:200px;left:650px;width:100px;">
<option>selecttest</option>
<option>Can it be covered</option>
</select>
</body>
</html>
For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.