В этой статье описывается метод JS для достижения локального увеличения или сокращения изображений. Поделитесь этим для вашей ссылки, следующим образом:
<! 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 </TITE> <стиль Type = "Fext/CSS">##MAGLICE {wwidte {wwidte {wwidte {wwwsx wwide; Высота: 696px; позиция: абсолютно; Верх: 100px; Слева: 250px; размер шрифта: 0; Граница: 1px solid #000;} #img {width: 500px; Высота: 696px;} #Браузер {border: 1px soluts #000; Z-Index: 100; позиция: абсолютно; Фон:#555;}#Mag {Border: 1px Solid#000; переполнение: скрыто; z-index: 100;} </style> <script type = "text/javascript"> function geteventObject (w3cevent) {// Событие нормализованной функции return w3cevent || window.event;} function getPointerPosition (e) {// Получить функцию e = e || getEventObject (e); var x = e.pagex || (e.clientx + (document.documentelement.scrollleft || document.body.scrollleft)); var y = e.pagey || (e.clienty + (document.documentelement.scrolltop || document.body.scrolltop)); return {'x': x, 'y': y};} function setoPacity (elem, level) {// Совместимые настройки браузера для прозрачных значений if (elem.filters) {elem.style.filter = 'alpha (opacity =' + level * 100 + ')'; } else {elem.style.opacity = level; }} function css (elem, prop) {// function function может легко установить значение CSS и совместимое с прозрачными значениями для (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 || {продолжение: null, // div img Загрузка исходного изображения IMG: NULL, // Scale MAG: NULL, // Шкала кадров масштаб: 15 // Значение шкалы, тем больше установлено значение, тем больше увеличение увеличения, но есть проблема, что, если оно не может быть делит, некоторые небольшие белые ребра будут получены. Я не знаю, как решить его в данный момент} CSS (M.Img, {'Position': 'Absolute', 'Width': (M.Cont.ClientWidth * M.Scale) + 'px', // Значение шкалы * масштабного значения исходного изображения ': (M.Cont.ClientHeight * M.Scale) +' px '// High Value' Scale starue straice straice straice strice strice strice strice strice strice strice straice 'straice straice' strail. CSS (M.Mag, {'Display': 'none', 'width': m.cont.clientwidth + 'px', //m.cont - это исходное изображение, которое является той же шириной, что и исходное изображение. 'px', // положение коробки увеличения находится далеко справа от исходного изображения 10px 'top': m.cont.offsettop + 'px'}) var borderwid = m.cont.getelementsbytagname ('div') [0] .offsetwidth - m.cont.getelementsbytagname ('div') [0]. // Получить ширину пограничного CSS (m.cont.getElementsbytagname ('div') [0], {//m.cont.getelementsbytagname('div')®] - это ящик для просмотра ':' none ', // settings': m.cont.contwidth/m.scale - borderwid + 'px', width width width width width width width width width/width width/silath width width width width width width width width width width width width width width width width width width width width width -width witdwidth/m.scale - границы «высота»: m.cont.clientHeight /m.scale - borderwid + 'px', // Значение высоты /шкалы исходного изображения - ширина границы «непрозрачности»: 0,5 // установить прозрачность}) m.img.src = m.cont.getelementsbytagname ('img') [0] .src; // Пусть значение SRC исходного изображения дает увеличенное изображение m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = увеличение.start; }, start: function (e) {if (document.all) {// выполнять только под т.е., главным образом, чтобы избежать неспособности перезаписать увеличение. } this.onmouseMove = Magnifier.move; // это указывает на M.Cont this.onmouseout = Magnifier.end; }, перемещение: function (e) {var pos = getPointerPosition (e); // Стандартизация событий 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.getElementsbytagname ('div') [0] .offsetheight) + 'px', 'left': math.min (math.max (pos.x - this.offsetleft - parseint (this.getelementsbytagname ('div') [0] .Style.Width) / 2,0), это. this.getElementsbytagname ('div') [0] .OffSetWidth) + 'px' // left = mouse x - this.offsetleft - ширина коробки/2, Math.max и Math.min так, что коробка для просмотра не превысит изображение}) Magnifier.m.mag.Style.display = '' '; css (Magnifier.m.img, {'top': - (parseint (this.getelementsbytagname ('div') [0] .style.top) * Magnifier.m.scale) + 'px', 'Left': - (parseint (this.getelementsbytagname ('div') [0]. }, end: function (e) {this.getElementsbytagname ('div') [0] .style.display = 'none'; MAGNIFIER.REMOVEIFRAME (MAGNIFIER.M.IMG); // Уничтожение iframe Magnifier.m.mag.style.display = 'none'; }, createiframe: function (elem) {var layer = document.createElement ('iframe'); layer.tabindex = '-1'; layer.src = 'javascript: false;'; elem.parentnode.appendchild (слой); 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 () {Magnifier.init ({cont: document.getElementById ('Magnifier'), img: document.getElementbyId ('MagnifierImg'), Mag: Document.GetElementById ('Magnifier'), Scale: 3});} </script> </head> <sed> src="lib/images/1.jpg" id="img" /><div id="Browser"></div></div><div id="mag"><img id="magnifierImg" /></div><select style="position:absolute;top:200px;left:650px;width:100px;"><option>select test</option><option>can перезапись </option> </select> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.