html5输入框自动放大镜,HTML5实现放大镜效果

最新推荐文章于 2024-07-12 21:49:18 发布

mstyoda

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量1.1k

点赞数

文章标签： html5输入框自动放大镜

本文介绍了如何使用HTML5和JavaScript实现图片放大镜效果。通过创建两个div，一个用于显示小图，另一个用于显示大图，并结合CSS设置样式，再通过JavaScript监听鼠标移动事件，动态调整大图位置，实现放大镜效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到很多网上的移动鼠标位置能显示图片放大的效果，刚开始用OC语言实现了一下，后来发现用HTML中的JS交互效果实现更加完美，就随手用HBuilder写了一下简单的实现代码，具体效果图如下：

需要两张同样的图片大小素材各一张，当鼠标放置在小图中的任意一点时，大图对小图上的对应位置进行放大显示，小图中黄色区域即为放大的位置。具体实现思路如下：

新建一个html文件，将title设置为放大镜，body下面添加两个div。第一个div下设置id为"min_wrap"，里面添加小图片和小的div,小的div的id设置为slider；第二个div下设置id为"max_wrap"，里面添加大图片，对应实现代码如下：

DOCTYPE html>

<html>

<head>

<title>放大镜title>

head>

<body>

div>

div>

body>

html>

在title标签下面添加style，type为text/css，内部样式设置如下:内边距和外边距均为0，min_wrap设置边框，大小与图片痛宽高，max_wrap设置边框和大小，设置overflow为hidden，保证边框外的区域进行影藏。具体代码如下：

* {margin: 0;

padding: 0;}

#min_wrap{

border: 1px

solid #ccc;

position: absolute;

}

#slider{

width: 175px;

height: 175px;

position: absolute;

left: 0;

top: 0;

background-color: rgba(255,

255,0,

0.3);

}

#max_wrap{

border: solid

#ccc;

width: 400px;

height: 400px;

position: absolute;

left: 370px;

overflow: hidden;

}

#max_wrap img{

position: absolute;

}

设置JS语句，实现当鼠标点击进入时出现放大镜，右边大图移到指定区域，移开时放大镜消失，添加交互效果，实现实时交互放大

function getVar(obj){

return document.querySelector(obj);

}

//获得每个selector

var minWrap = getVar("#min_wrap");

var maxWrap = getVar("#max_wrap");

var slider = getVar("#slider");

var imgBig = maxWrap.children[0];

//添加当鼠标移开的时候放大镜消失的方法

minWrap.onmouseleave

= function(){

slider.style.display

= "none";

maxWrap.style.display

= "none";

}

//添加当鼠标移入的时候放大镜出现的方法

minWrap.onmousemove

= function(ev){

slider.style.display

= "block";

maxWrap.style.display

= "block";

//主要为了兼容火狐浏览器

var ev =

ev||window.event;

//alert(ev.clientX);

//设置鼠标点的坐标x,y

var x = ev.clientX - minWrap.offsetLeft - slider.offsetWidth/2;

var y = ev.clientY - minWrap.offsetLeft - slider.offsetWidth/2;

//slider移动的范围

var maxWidth = minWrap.clientWidth - slider.offsetWidth;

var maxHeight = minWrap.clientHeight - slider.offsetHeight;

//设置在边框范围内活动，超出边框为无效区域

if (x >= maxWidth) {

x = maxWidth

}else if (x <= 0)

{

x = 0;

}

if (y >= maxHeight) {

y = maxHeight;

}else if (y <= 0)

{

y = 0;

}

slider.style.left = x +

"px";

slider.style.top = y +

"px";

// 关联大图的图片

//1.获取移动量的比例

var imgWidth = imgBig.offsetWidth - maxWrap.clientWidth;

var imgHeight = imgBig.offsetHeight - maxWrap.clientHeight;

//2.计算比例

imgBig.style.left = -(x /

maxWidth) * imgWidth

+ "px";

imgBig.style.top = -(y /

maxHeight) * imgHeight

+ "px";

}

script>