思路超清晰

admin管理员组

文章数量:1516870

思路超清晰

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.创建一个divvar 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.创建一个imgvar 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倍，读者可以自行决定大图的尺寸.

本文标签： 思路超清晰