图片放大

放大镜思路解析:

观察布局,思考需要操作的元素及属性:

1.橙色蒙板元素的定位left、top值

2.红色边框元素内放大图片的定位left、top值

代码实现:

1.鼠标移入 => 蒙板显示、大图显示

mouseover => display: block;

2.鼠标移出 => 蒙板隐藏、大图隐藏

 mouseout => display: none;

3.鼠标移动 => 设置蒙板和大图的定位

 mousemove => left: *px; top: *px;

3.1蒙板定位:计算出left、top值,边界检测,设置定位

        left = 蓝线段 - 紫线段 - 红线段 = 绿线段
        top同理...
        左边界:left 最小 = 0
        右边界:left 最大 = 绿框宽 - 橙块宽
        上边界、下边界同理...

3.2大图定位:与蒙板的移动方向相反(负数)

绿框中是蒙板在移动,红框中相当于背景在移动,它们的移动方向相反!

计算移动的比例:

 scaleL = left/(绿框宽 - 橙块宽);
 scaleT = top/(绿框高 - 橙块高);

放大镜

大图定位left = - (大图宽 - 红框宽) * scaleL + 'px';
大图定位top = - (大图高 - 红框高) * scaleT + 'px';

获取元素到body左侧或顶部的距离(包含边框)

function offset(obj){
    var l = 0;
    var t = 0;
    var bdl = obj.clientLeft;//目标元素的左边框宽度
    var bdt = obj.clientTop;//目标元素的上边框宽度
    while(obj){//循环累加目标元素到定位父级的距离
        l = l + obj.offsetLeft+obj.clientLeft;
        t = t + obj.offsetTop+obj.clientTop;
        obj = obj.offsetParent;//每次循环之后指向离他最近的定位父级
    }
    return {left:l-bdl,top:t-bdt};
}
console.log(offset(box).top);

附上完整代码带切换

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #left{
            width: 300px;
            height: 200px;
            border:1px solid red;
            position: relative;
            top:20px;
            left:100px;
        }
        #left img{
            width: 300px;
            height: 200px;
        }
        #mark{
            width: 150px;
            height: 100px;
            background: rgba(0,255,255,0.3);
            position: absolute;
            top:0px;
            display: none;
        }
        #right{
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: absolute;
            top:20px;
            left: 500px;
            display: none;
        }
        #right img{
            position: absolute;
        }
        #btn{
            width: 360px;
            height: 40px;
            border:1px solid red;
            position: relative;
            left:80px;
            top:30px;
        }
        #btn img{
            width: 60px;
            height: 40px;
            float: left;
            margin-left:10px
        }
    </style>
<div id="left">
    <img src="imgs/1.jpg">
    <div id="mark"></div>
</div>
<div id="right">
    <img src="imgs/1.jpg">
</div>
<div id="btn">
    <img src="imgs/1.jpg">
    <img src="imgs/2.jpg">
    <img src="imgs/3.jpg">
    <img src="imgs/4.jpg">
    <img src="imgs/5.jpg">
</div>
<script>
    //获取所有操作对象
    var left1=document.getElementById('left')
    var mark=document.getElementById('mark')
    var right1=document.getElementById('right')
    function move1(e){
        //获取鼠标所对应的位置
        var x1= e.clientX-left1.offsetLeft-(mark.offsetWidth/2)
        var y1= e.clientY-left1.offsetTop-(mark.offsetHeight/2)
        //移动边界
        var minT= 0,minL=0;
        var maxL=left1.offsetWidth-mark.offsetWidth
        var maxT=left1.offsetHeight-mark.offsetHeight
        //右边图片移动的距离
        var tempT= 0,tempL=0

        if(x1<minL){
            mark.style.left=minL+'px'
            tempL=minL
        }else if(x1>maxL){
            mark.style.left=maxL+'px'
            tempL=maxL
        }else{
            mark.style.left=x1+'px'
           tempL=x1
        }

        if(y1<minT){
            mark.style.top=minT+'px'
            tempT=minT
        }else if(y1>maxT){
            mark.style.top=maxT+'px'
            tempT=maxT
        }else{
            mark.style.top=y1+'px'
            tempT=y1
        }
        var Img=right1.getElementsByTagName('img')[0]
        //左边移动多少,右边就双倍移动
        Img.style.left=-tempL*2+'px'
        Img.style.top=-tempT*2+'px'
    }

    left1.onmouseover= function (e) {
        var e=e|| window.event
        mark.style.display='block'
        right1.style.display='block'
        move1(e)
    }
    left1.onmousemove= function (e) {
        var e=e|| window.event
        mark.style.display='block'
        right1.style.display='block'
        move1(e)
    }
    left1.onmouseout= function () {
        mark.style.display='none'
        right1.style.display='none'
    }
    var btn1=document.getElementById('btn')
    var imgs=btn1.getElementsByTagName('img')
    for(var i=0;i<imgs.length;i++){
        imgs[i].onclick= function () {
            var newsrc=this.getAttribute('src')
            left1.firstElementChild.setAttribute('src',newsrc)
            right1.firstElementChild.setAttribute('src',newsrc)
        }
    }
</script>
Last modification:October 10th, 2019 at 07:30 pm
如果觉得我的文章对你有用,请随意赞赏