思路超清晰-js实现放大镜功能

js实现放大镜功能

​ 今天写项目，但是发现项目中的图片太小，很多信息我们都看不清楚，但是为了页面布局，我有不能讲图片调的尺寸过于大，因此，就想到了用js实现图片的放大镜来解决我的问题。

实现后功能大致是这样：

放大镜原理：
	做一个隐藏的大图，大图为空且隐藏，当鼠标移入时显示大图

主要功能：
    鼠标移入，放大镜显示
    鼠标移出，放大镜隐藏
    鼠标移动，放大镜随之移动，并且当大制定部分

涉及三个鼠标事件：
    onmouseover ： 鼠标指针移动到指定对象时触发
    onmouseout： 鼠标指针移出指定对象时触发
    onmouseomove： 鼠标指针移动时触发

	

下面是7个基本的实现步骤，读者只需要按部就班就可以实现放大镜功能：

 $(function(){
				$(".book-cover").mouseover(function(e){
					//1.获取图片大小
					var width = this.width;
					var height = this.height;
					
					//2.获取鼠标的当前位置
					var x = e.pageX + 10;
					var y = e.pageY + 10;
					
					//3.创建一个div
					var div = $("<div id='bigImg'/>").css({
												"position":"absolute",
												"width":width * 1.5,
												"height":height * 1.5,
												"top":y,
												"left":x,
												"display":"none",
												"border":"5px solid orange",
												"border-radius" : "15px"
											});
					//4.创建一个img
					var img = $("<img/>").attr({
												"src":this.src
											}).css({
													"width":width * 1.5,
													"height":height * 1.5,		
													"border-radius" : "12px"
												});
					//5.将img放到div当中
					div.append(img);
					//6.将div放入到body中
					$("body").append(div);
					//7.将img展示出来
					div.show(1000);
				}).mousemove(function(e){
					//获取鼠标当前的位置
					var x = e.pageX + 10;
					var y = e.pageY + 10;
					//改变div的位置
					$("#bigImg").css({
										"top":y,
										"left":x
									});
				}).mouseout(function(){
					$("#bigImg").remove();
				});
			}); 

需要注意的几点：

​ 1.实现内容的大致框架

$（“.图片对应的class属性值”）.mouseover(function(e){   //利用类选择器拿到所有的图片
    //鼠标移入时触发的代码
}).mousemove(function(e){
    //鼠标移动时触发的代码
}).mouseout(function(e){
    //鼠标移出时实现的代码
});

​ 2.修改大图的尺寸

将div和img样式中的width和height属性进行修改，我们当前默认为大图是原图的1.5倍，读者可以自行决定大图的尺寸.