利用JavaScript实现仿京东放大镜效果

功能实现

1、鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能

2、黄色遮挡层跟着鼠标走

把鼠标的坐标给盒子,不断地进行赋值操作

把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准

首先是获得鼠标在盒子内地坐标

然后把数值给遮挡层地left和top值

此时用到鼠标移动事件,但是还是在小图片盒子内移动

发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半

遮挡层不能超出小图片盒子范围

如果小于0,就把坐标设置为0

如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动距离

遮挡层地最大移动距离:小图片盒子宽度减去遮挡层盒子宽度

3、移动黄色遮挡层,大盒子跟着图片走

也太难了、、、、



 

    
    
    
    Document
    

 

    

利用JavaScript实现仿京东放大镜效果_第1张图片

复盘:



 

    
    
    
    Document
    

 

    

以上就是利用JavaScript实现仿京东放大镜效果的详细内容,更多关于JavaScript放大镜效果的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(利用JavaScript实现仿京东放大镜效果)