模仿淘宝放大镜。

一般在淘宝购物的时候都会有一个方法镜的功能,下面就给大家介绍一下这个放大镜实现的原理。
简单的来说一下吧,其实实现这个是需要两张相同的图片。这两张图片除了大小必须完全一样。当鼠标移动到小图的时候,大图就应该向相反的位置移动一定的位置。比如说,如果是放大两倍来说,鼠标在小图上面向左移动,大图就应该在原有位置上向右移动两倍的位置,才能实现该有的效果,向上向下原理一样。
但是上面所说的鼠标位置,是已经算好的鼠标位置。在鼠标点击的可视区域和鼠标点击的位置减去遮罩层的位置使鼠标在遮罩层的中心。
给大家介绍一下实现的步骤。
1.首先在一个容器里放着小图,小图上面有一个遮罩层,但是遮罩层开始是隐藏的鼠标移入的时候才会显示出来。另一个容器放着大图。装着大图的容器,默认也是隐藏。
2.鼠标划入的时候让遮罩层跟装着大图的容器一起显示出来。鼠标划出都让其隐藏。
3.给遮罩层添加一个拖拽事件,获取遮罩层的距四个方向的位置使只能在该容器里拖动。遮罩层向某方向移动时,大图向相反的方向移动两倍的距离。
一些简单的代码。




	
	Document
	
	


	

你可能感兴趣的:(模仿淘宝放大镜。)