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

思路超清晰-js实现放大镜功能相关推荐

原生JS实现放大镜功能
原生JS实现的放大镜功能,自己写的,简单使用点击下面连接去我的github上下载出来打开就行,不需要复杂配置,在img标签的src属性把你自己的图片换上去就ok. 文件在此走过路过,喜欢的话点个赞 ...
Html+css+js实现放大镜功能（详细完整代码）
通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节. 运行效果: 详细代码: <!DOCTYPE html> <html>& ...
【前端小实战】京东官网放大镜功能
文章目录一.页面效果展示二.代码实现解析三.完整代码一.页面效果展示二.代码实现解析 1.html基本框架,展示的小方块为 #small_div,移动的方块为 #move_div 放在小方块 ...
js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能演示地址下载地址
js技术实现图片放大镜功能
利用idea软件 js技术实现图片放大功能第一步准备图片将要放大图片放大 web 下第二步具体实现代码 <%@ page contentType="text/html;cha ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
全程配图超清晰的Springboot权限控制后台管理项目实战第二期（Springboot+shiro+mybatis+redis）
全程配图超清晰的Springboot权限控制后台管理项目实战第二期(Springboot+shiro+mybatis+redis) 众所周知,作为一个后端新手学习者,通过项目来学习,增长项目经验,是一 ...
超炫jQuery测试答题功能
推荐一款超炫jQuery测试答题功能插件实例代码 <body><div class="container" id="main">< ...
android 6.0 数据库权限,Android超清晰6.0权限申请AndPermission
Android超清晰6.0权限申请AndPermission的具体实现代码,供大家参考,具体内容如下前言这是我经常使用的框架,原因: 1.思路清晰 2.实现方便开始准备工作导包 compil ...

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

js实现放大镜功能

思路超清晰-js实现放大镜功能相关推荐

最新文章

热门文章