<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>放大镜</title>
<style>
#out{
position:relative;
}
#left{
width:310px;
height:310px;
border:1px solid blue;
}
#buttom{
width:310px;
height:40px;
margin-top:10px;
}
#buttom .small{
border:1px solid red;
float:left;
margin-right:5px;
}
#right{
width:400px;
height:310px;
position:absolute;
top:0px;
left:320px;
border: 1px solid black;
display:none;
overflow:hidden;
}
#right img{
position:absolute;
top:0px;
left:0px;
}
</style>
<script>
window.onload=function () {
var left=document.getElementById("left");
var buttom=document.getElementById("buttom");
var right=document.getElementById("right");
buttom.onmouseover=function (e) {
var ev=e||window.event; //事件委托
var imgobj=ev.srcElement||ev.target; //事件委托 ，取得事件对象
if(imgobj.nodeName=="IMG"){//事件委托 ，如果事件对象的节点名为IMG，则true
var names=imgobj.src; //事件委托 ，取得事件节点的src
var imgname=names.substring(names.lastIndexOf("/")).replace("1","2"); //names.indexof("/")取得分隔符的位置，然后利用substring从这个节点开始向后剪切，然后利用；取得小图片的名字，把一换成二直接是大图片
left.innerHTML="<img src=img"+imgname+">";
}
}
left.onmouseover=function () {
right.style.display="block"; //框体显示
var leftimg=left.getElementsByTagName("img")[0]; //取得展示框体对象
var names=leftimg.src;//取得展示框体对象src值
var imgname=names.substring(names.lastIndexOf("/")).replace("2","3");//替换展示内容
right.innerHTML="<img src=img"+imgname+">";
var rightimg=right.getElementsByTagName("img")[0];//取得大展示框体对象
this.onmousemove=function (e) {
var ev=e||window.event; //兼容事件对象
var l=ev.layerX||ev.offsetX; //取得鼠标事件的坐标，IE和FF
var r=ev.layerY||ev.offsetY; //取得鼠标事件的坐标，IE和FF
rightimg.style.left=-l/left.offsetWidth*(rightimg.offsetWidth-right.offsetWidth)+"px";
rightimg.style.top=-r/left.offsetHeight*(rightimg.offsetHeight-right.offsetHeight)+"px";
//-值说明展示图像走的过程要与鼠标相反，
//减去 -right.offsetHeight因为 style.left会出现白色边框，减去展示的窗口，就会解决
}
}
left.onmouseout=function () {
right.style.display="none";
}
}
</script>
</head>
<body>
<div id="out">
<div id="left">
<img src="img/blue_2.jpg">
</div>
<div id="buttom">
<div class="small">
<img src="img/blue_1.jpg">
</div>
<div class="small">
<img src="img/yellow_1.jpg">
</div>
</div>
<div id="right">
</div>
</div>
</body>
</html>
我在简单封装以下，做成一个插件，稍后更新
来更新了，用原生的js模块，真是累，原理都一样，不过看上去模块化，方便一个页面大量应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
.content{
width: 1200px;
height: 600px;
position: relative;
}
.left{
width: 310px;
height: 380px;
}
.top{
width: 310px;
height: 310px;
border: 1px solid blue;
cursor: pointer;
}
.bottom{
position: relative;
width: 310px;
height: 60px;
border: 1px solid black;
}
.bottom img{
display: inline-block;
width: 60px;
height: 60px;
float: left;
margin: 0 30px;
cursor: pointer;
}
.right{
border: 1px solid ;
width: 350px;
height: 300px;
position: absolute;
left: 400px;
top: 0px;
overflow: hidden;
}
.right img{
position: absolute;
}
</style>
<body>
<div class="content">
<div class="left" id="left">
<div class="top" id="top">
<img src="img/blue_2.jpg" alt="1"/>
</div>
<div class="bottom" id="bottom">
<img src="img/blue_1.jpg" alt="1"/>
<img src="img/yellow_1.jpg" alt="1"/>
</div>
</div>
<div class="right" id="right">
<img src="" alt=""/>
</div>
</div>
</body>
<script>
window.onload= function () {
(function (controller) {
var Mod=new controller();
Mod.include({
left:document.getElementById("left"),
top:document.getElementById("top"),
bottom:document.getElementById("bottom"),
img:document.getElementById("bottom").getElementsByTagName("img"),
right:document.getElementById("right"),
Event: function (obj,type,done) {
if(obj.addEventListener){
obj.addEventListener(type,done,false)
}else if(obj.attachEvent){
obj.attachEvent('on'+type, function () {
done.apply(obj,arguments)
})
}
},
/*更换底部小图标*/
bottom_mouseover: function () {
var that=this;
for(var i=0;i<that.img.length;i++){
that.Event(that.img[i],'click', function () {
console.log(this.src);
var srcNanme=this.src.substring(this.src.lastIndexOf("/")).replace("1","2");
var src=document.createAttribute("src");
src.nodeValue="img"+srcNanme;
that.top.getElementsByTagName("img")[0].setAttributeNode(src);
})
}
},
right_mouseover: function () {
var that=this;
this.Event(this.top.getElementsByTagName("img")[0],'mouseover', function () {
var rightImg=that.right.getElementsByTagName("img")[0];
var topImg=that.top.getElementsByTagName("img")[0];
var srcNanme=this.src.substring(this.src.lastIndexOf("/")).replace("2","3");
var src=document.createAttribute("src");
src.nodeValue="img"+srcNanme;
rightImg.setAttributeNode(src);
topImg.onmousemove= function (e) {
var el=e||window.event;
var l= el.layer||el.offsetX;
var r=el.layer||el.offsetY;
rightImg.style.left=-l*((rightImg.offsetWidth-that.right.offsetWidth)/topImg.offsetWidth)+"px";
rightImg.style.top=-r*((rightImg.offsetHeight-that.right.offsetHeight)/topImg.offsetHeight)+"px";
console.log(rightImg.style.left);
}
})
}
});
var mod=new Mod();
mod.bottom_mouseover();
mod.right_mouseover();
})(createClass)
};
</script>
<script>
(function (exports) {
var createClass= function (parents) {
var kclass= function () {
this.init.apply(this,arguments);
};
if(parents){
var subclass=function(){};
subclass.prototype=parents.prototype;
kclass.prototype=new subclass();
};
kclass.prototype.init= function () {
};
kclass.fn=kclass.prototype;
kclass.fn.parent=kclass;
kclass.extend= function (obj) {
for(var i in obj){
kclass[i]=obj[i];
}
};
kclass.include= function (obj) {
for(var i in obj){
kclass.fn[i]=obj[i];
}
};
kclass.proxy= function (fn) {
var self=this;
return function () {
return fn.apply(self,arguments)
}
};
return kclass;
};
exports.createClass=createClass;
})(window)
</script>
</html>
