Этот эффект не сложен. Главное — установить положение и пропорции.
Захват положения мыши, определение области положения мыши и событие onmouseover, событие onmousemove, событие onmouseout
Установите пропорции большого изображения. Пропорция обрезанного изображения, отображаемого на маленьком изображении, должна быть точной, желательно в 2 или 4 раза.
Главное обратите внимание на ширину. Картинка m.jpg у меня 1440х900....
Скопируйте код кода следующим образом:
<!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">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Эффект увеличительного стекла</title>
<style type="text/css">
*{маржа:0;дополнение:0;}
#smallimg{ширина:360 пикселей;float:left;position:relative;border:1px сплошной красный;}
#smallimg img{ширина:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px Solid #ccc;display:none;}
#showimg{ширина:100 пикселей;высота:100 пикселей;фон:#fff;курсор:переместить;позиция:абсолютный;граница:1px сплошной #666;непрозрачность:0,5;фильтр:альфа(непрозрачность=50);дисплей:нет;}
</стиль>
</голова>
<тело>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<тип сценария="текст/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
вар smallimg = $("smallimg");
var showimg = $("showimg");//Фильтрация изображения
вар bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
вар show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = функция(){
showimg.style.display = "блокировать";
bigimg.style.display = "встроенный";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//Две вышеперечисленные переменные указывают область, в которой разрешено активировать showimg.
};
smallimg.onmousemove = function(e){
вар е=window.event?window.event:e;
вар num = bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var Left = e.clientX - smallimg.offsetLeft - show_half;
//Метод расчета для получения текущей перемещенной позиции показа: координаты мыши - координаты самого внешнего контейнера - ширина (высота) поля/2
Верх = Верх<0?0:Top>maxHeight?maxHeight:Top;
Влево = Влево<0?0:Влево>maxWidth?maxWidth:Left;
showimg.style.top = Верх + «px»;
showimg.style.left = Влево + «px»;
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = функция(){
showimg.style.display="нет";
bigimg.style.background="";
bigimg.style.display="нет"
};
</скрипт>
</тело>
</html>