淘宝之放大镜 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width:350px;
            height: 350px;
            position: relative;
            margin-left: 200px;
            margin-top: 200px;
            border: 1px solid #000;
        }
        .smallBox {
            position: relative;
        }
        .mask {
            width: 175px;
            height: 175px;
            background-color: rgba(125, 125, 125, .4);
            position: absolute;
            left: 0;
            top: 0;
            display: none;

        }
        .bigBox {
            width: 400px;
            height: 400px;
            position:absolute;
            left: 350px;
            top: 0;
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="smallBox">
        <img src="images/001.jpg" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="bigBox">
        <img src="images/0001.jpg" alt=""/>
    </div>
</div>
<script src="toolkit.js"></script>
<script>
    //需求1：鼠标进入smallBox区域中，显示mask 和 bigBox,移除后隐藏。
    var box = document.getElementsByTagName("div")[0];
    var smallBox = box.children[0];
    var bigBox= box.children[1];
    var mask = smallBox.children[1];
    var bigImg= bigBox.children[0];
    smallBox.onmouseover = function(){
        show(mask);
        show(bigBox);
    }
    smallBox.onmouseout = function(){
        hide(mask);
        hide(bigBox);
    }
    //需求2：mask 跟随鼠标移动
    smallBox.onmousemove = function(event){
        //鼠标在网页中位置
        event = event || window.event;
        var pageX = event.pageX || event.clientX + scroll().left;
        var pageY = event.pageY || event.clientY + scroll().top;

        //盒子在网页中位置
        var boxX= box.offsetLeft;
        var boxY = box.offsetTop;

        //鼠标在盒子中的位置
        var sBoxX = pageX - boxX;
        var sBoxY = pageY- boxY;
        //鼠标在盒子中移动位置有界限
        if(sBoxX<0){
            sBoxX =0;
        }
        if(sBoxX>(smallBox.offsetWidth- mask.offsetWidth)){
            sBoxX=(smallBox.offsetWidth- mask.offsetWidth)
        }
        if(sBoxY<0){
            sBoxY =0;
        }
        if(sBoxY>(smallBox.offsetHeight- mask.offsetHeight)){
            sBoxY=(smallBox.offsetHeight- mask.offsetHeight)
        }
        //给mask位置赋值
        mask.style.left = sBoxX + "px";
        mask.style.top = sBoxY + "px";

        //需求3：mask同bigBox等比例移动
        //比例公式： smallBox/bigImg = mask/bigBox=sBox/bBox
        //bBox = bigBox*sBox/mask;
        var bBoxX = bigBox.offsetWidth*sBoxX/mask.offsetWidth;
        var bBoxY = bigBox.offsetWidth*sBoxY/mask.offsetHeight;

        bigImg.style.marginLeft = -bBoxX + "px";
        bigImg.style.marginTop = -bBoxY + "px";
    }
</script>
</body>
</html>
引入toolkit.js内容：
function scroll(){
    var scroll = {
        top: window.pageYOffset || document.documentElement.scrollTop,
        left: window.pageXOffset || document.documentElement.scrollLeft
    }
    return scroll;
}


function animate(ele,target){
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        //1.获取步长
        var step = (target -ele.offsetLeft)/10;
        //2.二次处理步长
        step = step>0? Math.ceil(step):Math.floor(step);
        //3、
        ele.style.left = ele.offsetLeft+ step +"px";
        console.log(1);
        if(Math.abs(target -ele.offsetLeft)<=Math.abs(step)){
            clearInterval(ele.timer);
            ele.style.left = target + "px";
        }
    },20);
}


function client(){
    return {
        "width": window.innerWidth || document.documentElement.clientWidth,
        "height": window.innerWidth ||document.documentElement.clientWidth,
    }
}

function changeColor(){
    if(client().width>960){
        document.body.style.backgroundColor="blue";
    }else if(client().width>640){
        document.body.style.backgroundColor="red";
    }else{
        document.body.style.backgroundColor="orange";
    }
}

function getStyle(ele,attr){
    if(ele.window.getComputedStyle){
        return  ele.window.getComputedStyle(ele,null)[attr];
    }else{
        return  ele.currentStyle[attr];
    }
}

function show(ele){
    ele.style.display="block";
}

function hide(ele){
    ele.style.display="none";
}
posted @ 2017-09-16 14:27  倩妞驾到  阅读(244)  评论(0)  编辑  收藏  举报