欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生js实现放大镜特效

程序员文章站 2024-03-17 11:11:04
...

普及知识:放大镜特效涉及到的几个值

offsetWidth    获取元素的宽度
offsetHeight  获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop  内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove  鼠标移动事件
onmouseover  鼠标划过事件

主要思路:

    1.鼠标移动,阴影区跟着移动
    2.鼠标移动,大图也跟着移动
    3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
    4.保证阴影区域以及大div.big在鼠标移动到div.small时显示

html实现

<div id="fangdajing">
        <div class="small">
            <img src="small.jpg" alt="">
            <div class="shadow"></div>
        </div>
        <div class="big">
            <img src="big.jpg" alt="">
        </div>
    </div>

css样式

//定位,大图显示区域和阴影区域最开始不显示
#fangdajing{
            width:450px;
            height:450px;
            position:relative;
        }
        .small{
            width:450px;
            height:450px;
            position:absolute;
            left:0px;
            top:0px;
        }
        .shadow{
            width:200px;
            height:200px;
            background:yellow;
            opacity:0.3;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
        .big{
            position:absolute;
            left:450px;
            width:356px;
            height:356px;
            overflow:hidden;
            display:none;
        }

js实现

1.获取对象
var fdj = document.getElementById('fangdajing');
    var big = document.getElementsByClassName('big')[0];
    var small = document.getElementsByClassName('small')[0];
    var shadow = document.getElementsByClassName('shadow')[0];
2.鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域
    small.onmouseover = function(){
                big.style.display = 'block';
                shadow.style.display = 'block';
    }
3.
(1)鼠标移动,div.shadow跟着移动,先获取到shadow在small内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及shadow的宽高,让鼠标划过的位置一直位于shadow区域的中心点,所以可得shadow在small内的相对位置,之后进行判断,让shadow不能出边界,最后进行赋值操作
(2)shadow区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和shadow的比例为big.offsetWidth/shadow.offsetWidth,以shadow的左上角为准,大图的滚动距离为left*相应比例
     small.onmousemove = function(ent){
        var e = ent || event;   //获取鼠标事件对象
        var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2;  //获取shadow在small内的相对位置
        var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
        var tw = fdj.offsetWidth - shadow.offsetWidth;  //获取shadow最大可移动距离
        var th = fdj.offsetHeight - shadow.offsetHeight;  
        //对shadow进行限制
        if(left < 0){
            left = 0;            
        }else if(left > tw){
            left = tw;
        }
         if(top < 0){
           top = 0;            
        }else if(top > th){
            top = th;
        }  
        //赋值
        small.style.left = left + 'px';
        small.style.top = top + 'px';        
        //大图跟着移动
        var sl = left * big.offsetWidth / shadow.offsetWidth;
        var st = top * big.offsetHeight / shadow.offsetHeight;
        big.scrollTop = st;
        big.scrollLeft = sl;  
    }
4.鼠标移出,大图以及shadow隐藏
    small.onmouserout = function(){
        big.style.display = 'none';
        shadow.style.display = 'none';        
    }