1. window.onload = function () {
    2.       //获取点击按钮标签
    3.     var btn = document.querySelector("button");
    4.       //获取改变倍数的input标签
    5.     var range = document.querySelector('input[type="range"]')
    6.     //获取提示倍数信息的标签
    7.     var index = document.querySelector(".magIndex")
    8.     //按钮点击事件函数
    9.     btn.onclick = function () {
    10.       //改变放大倍数
    11.         reset(range.value)
    12.       //显示放大倍数
    13.         index.innerHTML = range.value;
    14.     }
    16.     //获取显示的图片
    17.     var img_small = this.document.getElementsByClassName("img_small")[0];
    18.   //获取放大后的图片
    19.     var img_big = this.document.getElementsByClassName("img_big")[0];
    20.   //获取显示图片的盒子
    21.     var viewing_small = this.document.getElementsByClassName("viewing_small")[0];
    22.   //获取放大后的图片的盒子
    23.     var viewing_big = this.document.getElementsByClassName("viewing_big")[0];z
    24.     //获取鼠标移动到图片上的遮罩层
    25.     var mag = this.document.getElementsByClassName("mag")[0];
    26.         //获取显示的图片的宽度
    27.     var img_smallx = img_small.clientWidth;
    28.       //获取显示的图片的高度
    29.     var img_smally = img_small.clientHeight;
    31.         //设定一个初始的放大倍数
    32.     var magIndex = 1;
    33.         //初始放大页面
    34.     reset(magIndex)
    35.         //放大镜函数
    36.     function reset(magIndex) {
    37.           //设置放大后的图片宽度和高度
    38.         img_big.style.width = img_smallx * magIndex + "px";
    39.         img_big.style.height = img_smally * magIndex + "px";
    40.           //设置遮罩层的宽度和高度
    41.         mag.style.width = img_smallx / magIndex + "px";
    42.         mag.style.height = img_smally / magIndex + "px";
    43.           //设置显示的图片的盒子高度和宽度
    44.         viewing_small.style.width = img_smallx + "px";
    45.         viewing_small.style.height = img_smally + "px";
    46.       //设置大盒子的宽度和高度
    47.         viewing_big.style.width = img_smallx + "px";
    48.         viewing_big.style.height = img_smally + "px";
    49.                 //当鼠标移入显示的图片的盒子时遮罩层和大图片盒子显示
    50.         viewing_small.onmouseenter = function () {
    51.             mag.style.display = "block";
    52.             viewing_big.style.display = "block";
    53.         }
    54.           //鼠标移出时遮罩层和大图片盒子隐藏
    55.         viewing_small.onmouseleave = function () {
    56.             mag.style.display = "none";
    57.             viewing_big.style.display = "none";
    58.         }
    59.           //鼠标移动事件
    60.         viewing_small.onmousemove = function (event) {
    61.               //鼠标相对于屏幕的位置-小盒子相对于屏幕的位置-遮罩层的一半宽度
    62.             var x = event.clientX - viewing_small.getBoundingClientRect().left - mag.clientWidth / 2;
    63.             var y = event.clientY - viewing_small.getBoundingClientRect().top - mag.clientHeight / 2;
    65.             if (x < 0) {
    66.                 x = 0;
    67.             }
    68.             if (x > viewing_small.offsetWidth - mag.offsetWidth) {
    69.                 x = viewing_small.offsetWidth - mag.offsetWidth
    70.             }
    71.             if (y < 0) {
    72.                 y = 0;
    73.             }
    74.             if (y > viewing_small.offsetHeight - mag.offsetHeight) {
    75.                 y = viewing_small.offsetHeight - mag.offsetHeight
    76.             }
    77.             mag.style.left = x + "px";
    78.             mag.style.top = y + "px";
    80.             img_big.style.left = -x * magIndex + "px";
    81.             img_big.style.top = -y * magIndex + "px";
    82.         }
    86.         viewing_big.onmouseenter = function () {
    87.             viewing_big.style.display = "none";
    88.         }
    89.     }
    93. }