Tip: you can modify some code before running
JavaScript Image enlargement<!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>Magnifier</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) {// 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) {// Set the transparent value if (elem. filters) {elem. style. filter = 'alpha (opacity = '+ level x 100 +') ';} else {elem. style. opacity = level ;}} function css (elem, prop) {// css setting function, which allows you to easily set css values and is compatible with setting transparent values for (var I in prop) {if (I = 'Opacity ') {setOpacity (elem, prop [I]);} else {elem. style [I] = prop [I];} return elem;} var magniier = {m: null, init: function (magni) {var m = this. m = magni | {cont: null, // The divimg: null that loads the original image, // The enlarged image mag: null, // The enlarged frame scale: 15 // proportional value. The larger the value is, the larger the value is. However, if division is not allowed, some small white edges are generated, I don't know how to solve it yet} css (m. img, {'position': 'Absolute ', 'width': (m. cont. clientWidth * m. scale) + 'px ', // The 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, with the same width as the original image 'height': m. cont. clientHeight + 'px ', 'position': 'Absolute', 'left': m. cont. offsetLeft + m. cont. offsetWidth + 10 + 'px ', // The position of the enlarged box is 10px 'Top', far from the right of the original image. cont. offsetTop + 'px '}) var borderWid = m. cont. getElementsByTagName ('div ') [0]. offsetWidth-m. cont. getElementsByTagName ('div ') [0]. clientWidth; // Obtain the width css (m. cont. getElementsByTagName ('div ') [0], {// m. cont. getElementsByTagName ('div ') [0] indicates the browser frame 'display': 'none', // you can set it to 'width': m. cont. clientWidth/m. scale-borderWid + 'px', // width/proportion of the original image-border width 'height': m. cont. clientHeight/m. scale-borderWid + 'px ', // The height of the original image/ratio value-border width 'Opacity': 0.5 // Set transparency}) m. img. src = m. cont. getElementsByTagName ('IMG ') [0]. src; // let the src value of the original image enlarge the image m. cont. style. cursor = 'crosshair'; m. cont. onmouseover = magnifier. start ;}, start: function (e) {if (document. all) {// only run in IE to avoid that select of IE6 cannot overwrite magniier. createIframe (magniier. m. img);} this. onmousemove = magnifier. move; // this points to m. contthis. onmouseout = magnifier. end ;}, move: function (e) {var pos = getPointerPosition (e); // standardize the event 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}) magnifier. m. mag. style. display = ''; css (magniier. 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 (magnifier. m. img); // destroy iframemagnifier. 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 ('magnikierimg '), mag: document. getElementById ('MAG'), scale: 3 });}</script></head><body><div id="magnifier"><div id="Browser"></div></div><div id="mag"></div><select ><option>Select test</option><option>Coverage?</option></select></body></html>
Tip: you can modify some code before running
