电子商务网站常用的效果,放大镜;一般是第一屏商品主图的位置有的;

HTML+CSS部分代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电子商务网站放大镜效果</title>
    <style type="text/css">
html, body, div {
margin: 0;
padding: 0;
        }

#tab {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
background:#CDE074;
        }

#mark {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 100px;
background: #B00000;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: move;
        }
    </style>
</head>
<body>
<div id="tab">
</div>

··

JS代码如下:

<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) {
//当鼠标移近来的时候,动态创建一个DIV元素,id是mark
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);//像oTab里添加mark;
        //执行setMark
setMark(mark, e);
    };

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

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

function setMark(mark, e) {
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";
//下面是判断边界,当鼠标移到左边界和右边界的判断;
if (l < 0) {
mark.style.left = 0 + "px";
        } else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
        }
//当鼠标移到上边界和下边界的判断;
if (t < 0) {
mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
        }
    };
</script>

······