JS-放大特效

作者: daisx | 来源:发表于2017-04-30 20:30 被阅读0次

JS-放大特效
04 - 放大镜特效
Web前端------JS放大镜、拖拽、模拟滚动条
js-文件的上传和下载
WebSocket 心跳登陆实例代码!
微信小程序：字体平滑放大和缩小
2019设计之旅28-设计清单分享
javascript-放大镜特效
iOS 倒计时放大特效
App Store Today卡片放大特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border:none;
        }
        #all{
            width: 350px;
            height: 360px;
            margin:100px 0 0 100px;
            position: relative;
        }
        #small{
            width: 350px;
            height: 350px;
            border:1px solid #ccc;
            position: relative;
        }
        span{
            width: 100px;
            height: 100px;
            background: rgba(255,255,0,.4);
            position: absolute;
            display: none;
        }
        #small img{
            width: 350px;
            height: 350px;
        }
        #big{
            width: 600px;
            height: 600px;
            border:1px solid #ccc;
            position: absolute;
            left:360px;
            top:0;
            display: none;
            overflow: hidden;
        }
        #big img{
            position: absolute;
        }
        #list{
            margin:10px 0 0 100px;
        }
        #list img{
            margin:4px;
        }
    </style>

</head>
<body>
<div id="all">
    <div id="small">
        <span></span>
        ![](images/pic001.jpg)
    </div>
    <div id="big">
        ![](images/pic01.jpg)
    </div>
</div>
<div id="list">
    ![](images/pic0001.jpg)
    ![](images/pic0002.jpg)
    ![](images/pic0003.jpg)
</div>
<script>
    window.onload = function () {
        var allBox = document.getElementById('all');
        var smallBox = allBox.children[0];
        var bigBox = allBox.children[1];
        var maskSpan = smallBox.children[0];
        var big_img = bigBox.children[0];
        var list_imgs = document.getElementById('list').children;
        smallBox.onmouseover= function () {
            maskSpan.style.display="block";
            bigBox.style.display="block";
            smallBox.onmousemove=function (event) {
                var event=event||document.event;
                var sDistX=event.clientX-smallBox.offsetParent.offsetLeft-maskSpan.offsetWidth*0.5;
                var sDistY=event.clientY-smallBox.offsetParent
                  .offsetTop-maskSpan.offsetHeight*0.5;
                if(sDistX<0){
                    sDistX=0;
                }else if(sDistX>smallBox.offsetWidth-maskSpan.offsetWidth){
                    sDistX=smallBox.offsetWidth-maskSpan.offsetWidth-2
                }
                if(sDistY<0){
                    sDistY=0;
                }else if (sDistY>smallBox.offsetHeight-maskSpan.offsetHeight){
                    sDistY=smallBox.offsetHeight-maskSpan.offsetHeight-2
                }
                var bigX=-sDistX/(smallBox.offsetWidth/bigBox.offsetWidth);
                var bigY=-sDistY/(smallBox.offsetHeight/bigBox.offsetHeight);
                maskSpan.style.left=sDistX+"px";
                maskSpan.style.top=sDistY+"px";
                big_img.style.left=bigX+"px";
                big_img.style.top=bigY+"px";
            }
            smallBox.onmouseout= function () {
             maskSpan.style.display="none";
             bigBox.style.display="none";
            }
            for(var i=0;i<list_imgs.length;i++){
                list_imgs[i].index=i;
                list_imgs[i].onclick= function () {
                    smallBox.children[1].src="images/pic00"+(this.index+1)+".jpg";
                    big_img.src='images/pic0'+(this.index+1)+'.jpg';
                }
            }
        }
    }
</script>
</body>
</html>