[读码时间] 跟随鼠标移动（大图展示）

说明：代码取自网络，css中注释为笔者学习时添加，js中的注释为原文所有！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>跟随鼠标移动（大图展示）</title>
    <style>
        html,body{
            overflow:hidden;
        }
        body,div,ul,li{
            margin:0;
            padding:0;
        }
        #box ul{
            width:768px;
            height:172px;
            list-style-type:none;
            margin:10px auto;
        }
        #box li{
            float:left;
            width:170px;
            height:170px;
            cursor:pointer;
            display:inline;
            border:1px solid #ddd;/*灰白色*/
            margin:0 10px;
        }
        #box li.active{
            border:1px solid #a10000;/*朱红*/
        }
        #box li img{
            width:170px;
            height:170px;
            vertical-align:top;
        }
        #big{
            position:absolute;
            width:400px;
            height:400px;
            border:2px solid #ddd;/*灰白色*/
            display:none;/*默认隐藏*/
        }
        #big div{
            position:absolute;
            top:0;
            left:0;
            width:400px;
            height:400px;
            opacity:0.5;/*半透明*/
            filter:alpha(opacity=50);
            background:#fff url(img/loading.gif) 50% 50% no-repeat;/*居中，不重复*/
        }
    </style>
    <script>
        window.onload = function () {
            var aLi = document.getElementsByTagName("li");
            var oBig = document.getElementById("big");
            var oLoading = oBig.getElementsByTagName("div")[0];
            var i = 0;

            for (i = 0; i < aLi.length; i++) {
                aLi[i].index = i;
                //鼠标划过, 预加载图片插入容器并显示
                aLi[i].onmouseover = function () {
                    var oImg = document.createElement("img");
                    //图片预加载
                    var img = new Image();
                    img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg", "_big.jpg");
                    //插入大图片
                    oBig.appendChild(oImg);
                    //鼠标移过样式
                    this.className = "active";
                    //显示big
                    oBig.style.display = oLoading.style.display = "block";
                    //判断大图是否加载成功
                    img.complete ? oLoading.style.display = "none" : (oImg.onload = function () { oLoading.style.display = "none"; })
                };
                //鼠标移动, 大图容器跟随鼠标移动
                aLi[i].onmousemove = function (event) {
                    var event = event || window.event;
                    var iWidth = document.documentElement.offsetWidth - event.clientX;
                    //设置big的top值
                    oBig.style.top = event.clientY + 20 + "px";
                    //设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
                    oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

                };
                //鼠标离开, 删除大图并隐藏大图容器
                aLi[i].onmouseout = function () {
                    this.className = "";
                    oBig.style.display = "none";
                    //移除大图片
                    oBig.removeChild(oBig.lastChild)
                }
            }
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="img/shirt_1.jpg" /></li>
            <li><img src="img/shirt_2.jpg" /></li>
            <li><img src="img/shirt_3.jpg" /></li>
            <li><img src="img/shirt_4.jpg" /></li>
        </ul>
    </div>
    <div id="big"><div></div></div>
</body>
</html>
View Code