JavaScript学习之简单的放大镜

简单的放大镜

js代码：

<script type="text/javascript">        //鼠标移到box1上去添加蒙板        //获取box1元素        var box1 = document.getElementsByClassName("box1")[0];        var box2=document.getElementsByClassName("box2")[0];        var img=document.getElementsByClassName("img")[0];        var num=0;        //鼠标移入事件        box1.onmouseenter = function() {            //alert(1)            //创建蒙板            var m_back = document.createElement("div");            //给蒙版div设置classname            m_back.className = "mengban";            //将蒙版追加给box1            this.appendChild(m_back);            //box2显示出来            box2.style.display="block";            //将小图的图片路径对应大图的图片路径            var num=img.src.substring(img.src.length-5,img.src.length-4);            box2.style.backgroundImage="url(./img/big"+num+".jpg)";        }        //鼠标移出事件        box1.onmouseleave = function() {            //alert(1)            //移出蒙版            document.getElementsByClassName("mengban")[0].remove();            //将box2隐藏            box2.style.display="none";        }        //鼠标移动事件,鼠标移动蒙板跟随移动，大图随之变化        box1.onmousemove = function(event) {            //获取蒙板元素            var m = document.getElementsByClassName("mengban")[0];            //获取鼠标的坐标            var x = event.pageX;            var y = event.pageY;            //蒙板跟随移动            m.style.top = y-350 + "px";            m.style.left = x-350 + "px";            //鼠标移动控制大图            box2.style.backgroundPosition=(-x*1.2)+"px "+(-y*1.3)+"px";        }        //鼠标点击小图        //获取所有的小图元素        var smallimg=document.getElementsByClassName("smallimg");        //设置默认第一个小图边框样式        smallimg[0].style.border="1px solid red";        for(var i=0;i<smallimg.length;i++){            smallimg[i].index=i+1;//自定义属性            //点击小图事件            smallimg[i].onclick=function (){                for(var j=0;j<smallimg.length;j++){                    //设置所有的小图边框样式                    smallimg[j].style.border="1px solid silver";                }                //设置当前点击的小图的边框样式               this.style.border="1px solid red";                //获取中图src                img.src="./img/mid"+this.index+".jpg";            }        }    </script>

css代码：

<style type="text/css">        *{            margin: 0;            padding: 0;        }        .big_box2{            height: 352px;        }        .box1 {            width: 350px;            height: 350px;            border: 1px solid #000;            position: relative;            overflow: hidden;            float: left;        }        .box2 {            width: 350px;            height: 350px;            border: 1px solid silver;            float: left;            background-image: url(img/big1.jpg);            background-repeat: no-repeat;            display: none;        }        .img {            position: absolute;        }        .mengban {            width: 100px;            height: 100px;            border: 300px #ccc solid;            opacity: 0.5;            position: absolute;            z-index: 2;        }        .smallimg{            width: 60px;            padding: 11px;            border: 1px solid #CCCCCC;            cursor: pointer;            margin-top: 5px;        }    </style>

html代码：

<div class="big_box">    <div class="big_box2">        <div class="box1">            <img class="img" src="img/mid1.jpg" />        </div>        <div class="box2">        </div>    </div>    <div>        <img class="smallimg" src="img/smal1.jpg"/>        <img class="smallimg" src="img/smal2.jpg"/>        <img class="smallimg" src="img/smal3.jpg"/>        <img class="smallimg" src="img/smal4.jpg"/>    </div> </div>