放大器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放大器</title>
    <style>
        .div1{
            width: 120px;
            height: 90px;
            padding: 5px;
            border: 1px solid #CCCCCC;
            position: relative;
        }
        .small_pic{
            width: 120px;
            height: 90px;
            border: 1px solid #eeeeee;
            position: relative;
        }
        .small_pic img{
            width: 100%;
            height: 100%;
        }
        .big_pic{
            width: 240px;
            height: 180px;
            position: absolute;
            top: -1px;
            left: 215px;
            overflow: hidden;
            border: 2px solid #CCCCCC;
            display: none;
        }
        .big_pic img{
            position: absolute;
            width: 420px;
            height: 315px;
            top: 0;
            left: 0;
        }
        .mark{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background:red;
            /*
            设定滤镜效果
            filter:alpha(opacity: );
            */
            filter:alpha(opacity:0);
            opacity: 0;
        }
        .float_layer{
            width: 50px;
            height: 50px;
            border: 1px solid #000000;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            filter:alpha(opacity:30);
            opacity: 0.3;
            display: none;
        }
        span{
            display: inline-block;
            width: 18px;
            height: 15px;
            background-color: cadetblue;
            color: white;
            text-align: center;
            line-height: 12px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="small_pic">
        <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="s4.JPG" class="small_img">
        <img src="1.JPG" class="small_img">
        <img src="2.JPG" class="small_img">
    </div>
    <div class="big_pic">
        <div>
            <img src="s4.JPG" class="big_img">
        </div>
    </div>
</div>
<span style="margin-left: 45px" id="span_left">&lt;</span>
<span id="span_right">&gt;</span>
<script>
    var small_p=document.getElementsByClassName("small_pic")[0];
    var float=document.getElementsByClassName("float_layer")[0];
    var big_p=document.getElementsByClassName("big_pic")[0];
    var big_img=document.getElementsByClassName("big_img")[0];
    var small_img=document.getElementsByClassName("small_img");
    var span_l=document.getElementById("span_left");
    var span_r=document.getElementById("span_right");
    var bigimg=["s4.JPG","2.JPG","1.JPG"];
    for(var i=0;i<small_img.length;i++){
        small_img[i].style.display='none'
    }
    small_img[0].style.display='block';
    //鼠标单机事件  向左
    span_l.onclick=function(){
        var displayNum=[small_img[0].style.display,small_img[1].style.display,small_img[2].style.display]
        for(var i=0;i<small_img.length;i++){
            if(i<2){
                small_img[i+1].style.display=displayNum[i];
            }
            else{
                small_img[0].style.display=displayNum[2]
            }
        }
        //改变大图路径
        for(var i=0;i<3;i++){
            if(small_img[i].style.display=='block'){
                big_img.src=small_img[i].src;
            }
        }
    }
    //鼠标单机事件  向右
    span_r.onclick=function(){
        var displayNum1=[small_img[0].style.display,small_img[1].style.display,small_img[2].style.display]
        for(var i=0;i<small_img.length;i++){
            if(i<2){
                small_img[i].style.display=displayNum1[i+1];
            }
            else{
                small_img[2].style.display=displayNum1[0];
            }
        }
        for(var i=0;i<3;i++){
            if(small_img[i].style.display=='block'){
                big_img.src=small_img[i].src;
            }
        }
    }
    //鼠标进入事件
    small_p.onmouseenter=function(){
        float.style.display='block';
        big_p.style.display='block';
    }
    //鼠标离开事件
    small_p.onmouseleave=function(){
        float.style.display='none';
        big_p.style.display='none'
    }
    //鼠标移动事件
    small_p.onmousemove=function(e){
        //计算小图放大区域坐标
        var float_l=(e.pageX-this.offsetLeft)<10?0:(e.pageX-this.offsetLeft-10);
        var float_t=(e.pageY-this.offsetTop)<12?0:(e.pageY-this.offsetTop-12);
        var float_r=(e.pageX)>83?68:(e.pageX-14);
        var float_b=(e.pageY)>52?39:(e.pageY-14);
        float.style.left=float_l+'px';
        float.style.top=float_t+'px';
        float.style.left=float_r+'px';
        float.style.top=float_b+'px';
        //计算大图坐标
        big_img.style.left=-parseInt(float.style.left)*1.8+'px'
        big_img.style.top=-parseInt(float.style.top)*3.5+'px'
    }
</script>
</body>
</html>
猜你喜欢
