仿京东放大镜效果

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

 

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

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

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

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

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

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

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

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

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

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

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

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

 

 

 也太难了、、、、





    
    
    
    Document
    



    

仿京东放大镜效果_第1张图片

 复盘:

 





    
    
    
    Document
    



    

你可能感兴趣的:(前端学习,css,css3,html)