前端面试题

实现盒子区间拖拽:

核心思想:实现盒子的拖拽其实并不难,主要用到事件的三步操作,事件的鼠标按下,移动和抬起

        大盒子嵌套小盒子在做小盒子移动的范围判断就可以实现在大盒子的区间移动

效果图如下:

 直接上代码:

 

放大镜的实现:

核心思想:准备一张小图和一张大图,同时放到同一个大盒子里面,都需要带定位

                小图与大图还有他们移动的距离要成比例关系:(中区域=大图 / 大区域 * 中图)

html代码:

 下面我们来写script代码:

1.封装一个静态方法里面放所需要的属性和元素

(获取样式的属性和获取一个元素,始终到页面的距离)

 

 2.接下来用class类的方法获取所有需要获取的dom元素

 3.封装一个初始比例方法 让小图与大图的移动成比例关系

 4.封装鼠标进入小图大图显示,离开小图则大图隐藏的函数方法

 5.设置遮挡层的移动区域(跟盒子区间拖拽原理是一样的)

 6.点击切换功能

 7.这里一定要实例化

 效果图如下: