javascript实现图片放大预览功能的实现源码.rar

图片放大：在我们电商网站中用到的是很多的 轮播图：在我们所有的网站中几乎用到 也就是说在面试的时候课能会手写上面的两个案例 （1）界面的设计 界面的分析： 有几个DIV：3 第一个就是展示小图片的div 第二个就是黄色的div 第三个div就是展示大图的div 第四个div是包裹上面3个div的父元素（div） <div> <div> </div> <div> </div> <div> </div> </div> 有两张图片 编写CSS代码。 （2）编写JS代码 1.存在事件： a：就是当鼠标移动到smallbox的时候会展示mask 和 bigImg 鼠标移开的时候会隐藏 b：我们的遮罩层可以进行移动（移动事件） 在移动的过程中是不能离开小图div 他的原理和之前的小球鼠标移动是一样的 现在的小球是DIV left 和 top来实现移动的 （1）得到小球（遮罩层） （2）得到鼠标在网页上面触发事件的位置 （3）得到小球的位置 （4）调用小球的top和left属性来实现移动 offsetWidth:他返回的是div的偏移宽度 div的长度 + div的padding + div的boder 展示大图： 大图的div和小图里面的mask是关联的 $("bigImg").offsetWidth - $("bigBox").offsetWidth;