js练习:仿京东放大镜案例

1.实现效果:

js练习:仿京东放大镜案例_第1张图片

移动遮挡框,右边的图片响应的放大并移动。

2.实现思路:

(1)鼠标移动到图片上,遮罩层和右边盒子显示。鼠标移出,遮罩层和右边盒子消失。

(2)黄色遮罩层跟随鼠标移动

js练习:仿京东放大镜案例_第2张图片

(3)右边图片跟随左边图片移动

js练习:仿京东放大镜案例_第3张图片

注意:右边图片的移动方向与左边遮罩层的移动方向相反,因此,右边图片移动距离是负的。

右边大盒子:多余的图片不显示,用overflow:hidden.来隐藏

 3.代码展示




    
    
    
    仿京东放大镜案例
    


    

你可能感兴趣的:(前端案例练习,javascript)