增加了显示框功能;还有一些Bug需要以后增加放大镜选项卡的时候修改BUG;

第一版实现的:http://taobao.fm/works/Magnifier/index.html

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电子商务网站放大镜效果</title>
    <style type="text/css">
html, body, div {  margin: 0;  padding: 0;  }
#tab {  position: relative;  width: 300px;  height: 300px;  margin:20px auto;  background: #CDE074;  }
#mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
#container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;}
#bigImg{ position:absolute; display:block; border:none;}
#home_top {  height: 48px;  line-height: 48px;  font-size: 18;  text-align: center;  color: #008CD7;  }
#home_bottom {  color: #008CD7;  text-align: center;  font-size: 14px;  }
    </style>
</head>
<body>
<h3 id="home_top">javascript实现电子商务网站放大镜效果 - Powered By <a href="http://taobao.fm/"
target="_blank">broszhu</a>  博客网址:<a
href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
    <p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a
href="http://taobao.fm/archives/1037" target="_blank">点此查看</a></p>

    <div id="tab">
        <img src="img/smallPeony.jpg" width="300" height="300" id="img1">
    </div>
</body>
</html>

JavaScript代码如下:

<script type="text/javascript">
var oTab = document.getElementById("tab");
//获得oDiv本身的高和宽;获得oDiv距离浏览器左上角的位移;
var tabT = oTab.offsetTop;
var tabL = oTab.offsetLeft;
var tabW = oTab.offsetWidth;
var tabH = oTab.offsetHeight;

//onmouseenter限制冒泡机制
oTab.onmouseenter = function (e) {
//创建大图容器
var container = document.createElement("div");
container.id = "container";
this.appendChild(container);

var bigImg=document.createElement("img");
bigImg.src="img/peony.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);

//当鼠标移近来的时候,动态创建一个DIV元素,id是mark
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);//像oTab里添加mark;

        //执行setMark
setMark(mark, container, e);
    };

oTab.onmousemove = function (e) {
var mark = document.getElementById("mark");
if (mark) {
//先判断mark是否存在,如果存在,执行setMark
setMark(mark, container, e);
        }
    };

//onmouseleave也可以显示冒泡机制;
oTab.onmouseleave = function () {
var mark = document.getElementById("mark");
if (mark) {
//当离开的时候移除mark节点;
this.removeChild(mark);
this.removeChild(container);
        }
    };

function setMark() {
mark = arguments[0];
container = arguments[1];
e = arguments[2];
e = e || window.event;
//上面是绑定事件的标配;
        //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
var markW = mark.offsetWidth;
var markH = mark.offsetHeight;
var l = e.clientX - tabL - (markW / 2);
var t = e.clientY - tabT - (markH / 2);
mark.style.left = l + "px";
mark.style.top = t + "px";
container.style.left=tabW+10+"px";
container.style.top=0;
bigImg.style.left="-"+l/tabW*bigImg.width+"px";
bigImg.style.top="-"+t/tabH*bigImg.height+"px";


//下面是判断边界,当鼠标移到左边界和右边界的判断;
if (l < 0) {
mark.style.left = 0 + "px";
        } else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
        }
//当鼠标移到上边界和下边界的判断;
if (t < 0) {
mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
        }
    };
</script>

···