JS面向对象实例—放大镜

实例——放大镜

1、分析:
1.选择元素;
2.绑定事件;
3.进入;
显示元素。
4.移动;
遮罩层跟随鼠标移动的同时计算遮罩层的移动比例;
右侧大图,等比例移动;
5.离开;
隐藏元素。
2、HTML布局
JS面向对象实例—放大镜
3、CSS样式
可根据实际情况做调整,以下仅供参考!
①main部分
JS面向对象实例—放大镜
②s-box部分
JS面向对象实例—放大镜
③b-box部分
JS面向对象实例—放大镜
④list部分
JS面向对象实例—放大镜
4、JS行为
①创建class类,并获取元素。
JS面向对象实例—放大镜
②添加事件原型。
JS面向对象实例—放大镜
③鼠标进入原型。
JS面向对象实例—放大镜
④鼠标移动原型。
JS面向对象实例—放大镜
④鼠标离开原型。
JS面向对象实例—放大镜
⑤保存实例并执行原型。
JS面向对象实例—放大镜