html中放大镜案列,HTML放大镜的一种实现及原理讲解（js）

最新推荐文章于 2023-08-10 11:14:43 发布
最新推荐文章于 2023-08-10 11:14:43 发布
阅读量827 收藏
点赞数
文章标签： html中放大镜案列

0.效果预览

499ddf24c49c

预览.png

上下方的宽度和高度指的是图片内可移动滑块的长宽，下文以‘放大镜’来称呼该滑块。

基本功能

移动放大镜来选择需要放大的区域。

可以根据需求调整放大镜尺寸和倍数，默认放大镜尺寸为50px*50px，放大倍数为2倍。

上下滑动鼠标滚轮来放大(缩小)放大镜尺寸。

下方实时显示放大镜当前尺寸和放大倍数。

eg: 调整放大镜大小来显示一行英文

499ddf24c49c

image.png

1.原理讲解

HTML部分

Setting 宽:高:倍数:

0.jpg

当前宽度： 当前高度： 当前倍数：

0.jpg

CSS部分

#parent{

position: relative;

margin: 50px auto;

}

#setting{

position: absolute;

width: 400px;

top:20px;

left: 50px;

text-align: center;

font-family: SimSun;

}

#inF{

position: absolute;

left: 50px;

width: 400px;

top: 440px;

text-align: center;

font-family: Simsun;

}

#curW, #curH, #curT{

color: blue;

}

#set{

font-weight: bold;

font-style: italic;

}

#sure{

font-family: Simsun;

color:red;

}

#mgfH, #mgfW, #times{

width: 50px;

}

#curPic{

position: absolute;

top: 50px;

left: 50px;

}

#curPic:hover{

cursor: move;

}

#curPic img{

width: 400px;

height: 400px;

}

#mgf{

display: none;

position: absolute;

top: 0;

left: 0;

background-color: rgba(255, 230, 93, 0.3);

}

#boxEnlarge{

display: none;

position: absolute;

top: 50px;

left: 550px;

overflow: hidden;

}

准备一张图片(最好是大图)，默认显示区和放大区域两部分放入该图片，默认区域和内部的图片大小事先是设置好了的，放大区域和内部的图片大小之后根据放大倍数设置 。

JS部分

①控制放大区域和放大镜的显示与隐藏

var parent = document.getElementById('parent');

var curpic = document.getElementById('curPic');

var mgf = document.getElementById("mgf");

var boxEnlarge = document.getElementById("boxEnlarge");

/*鼠标移至图片范围时，显示‘放大镜’和放大区域*/

curpic.onmouseover = function(){

var mgf = document.getElementById("mgf");

mgf.style.display = "block";

boxEnlarge.style.display = "block";

}

/*鼠标移出图片范围时，隐藏‘放大镜’和放大区域*/

curpic.onmouseout = function(){

var mgf = document.getElementById("mgf");

mgf.style.display = "none";

boxEnlarge.style.display = "none";

}

②放大镜的倍数和尺寸设置

/*默认‘放大镜’尺寸和放大倍数*/

var times = 2;

var mgfW = 50;

var mgfH = 50;

var curT = document.getElementById('curT');

var curW = document.getElementById('curW');

var curH = document.getElementById('curH');

curT.innerText = 2+'倍';

curW.innerText = 50+'px';

curH.innerText = 50+'px;'

mgf.style.width = mgfW + 'px';

mgf.style.height = mgfH + 'px';

/*自定义‘放大镜’尺寸和放大倍数*/

var button = document.getElementById('sure');

button.onclick = function (){//点击确认按钮触发事件

times = document.getElementById('times').value;

mgfH = document.getElementById('mgfH').value;

mgfW = document.getElementById('mgfW').value;

if(mgfH > curpic.offsetHeight){

mgfH = curpic.offsetHeight;

}

if(mgfW > curpic.offsetWidth){

mgfW = curpic.offsetWidth;

}

mgf.style.width = mgfW + 'px';

mgf.style.height = mgfH + 'px';

curH.innerText = mgfH + 'px';

curW.innerText = mgfW + 'px';

curT.innerText = times + '倍';

}

③放大镜随鼠标移动

/*‘放大镜’随鼠标移动*/

curpic.onmousemove = function(){

Move();

}

function Move(e){

/*根据‘放大镜’和放大倍数设置放大区域大小*/

boxEnlarge.style.width = mgf.offsetWidth*times + 'px';

boxEnlarge.style.height = mgf.offsetHeight*times + 'px';

/*鼠标移至‘放大镜’中心*/

e = e || event;

var mgfx = e.clientX - curpic.offsetLeft - parent.offsetLeft - mgf.offsetWidth/2;

var mgfy = e.clientY - curpic.offsetTop - parent.offsetTop - mgf.offsetHeight/2;

if(mgfx<0){

mgfx = 0;

}

if(mgfx >= curpic.offsetWidth-mgf.offsetWidth){

mgfx = curpic.offsetWidth-mgf.offsetWidth;

}

if(mgfy<0){

mgfy = 0;

}

if(mgfy >= curpic.offsetHeight-mgf.offsetHeight){

mgfy = curpic.offsetHeight-mgf.offsetHeight;

}

mgf.style.left = mgfx + 'px';

mgf.style.top = mgfy + 'px';

/*设置放大的图片尺寸并根据‘放大镜’的移动调整显示区域*/

var pic = boxEnlarge.children[0];

pic.style.width = curpic.offsetWidth*times + 'px';

pic.style.height = curpic.offsetHeight*times + 'px';

pic.style.marginLeft = ((-1)*mgf.offsetLeft*times)+'px';

pic.style.marginTop = ((-1)*mgf.offsetTop*times)+'px';

}

④鼠标滚动放大(缩小)放大镜

//未设置兼容性

curpic.onmousewheel = function(e){

if(e.wheelDelta>0){

if(mgf.offsetWidth*1.5 > curpic.offsetWidth){

mgf.style.width = curpic.offsetWidth + 'px';

return;

}

if(mgf.offsetHeight*1.5 > curpic.offsetHeight){

mgf.style.height = curpic.offsetHeight + 'px';

return;

}

mgf.style.width=mgf.offsetWidth*1.5 +'px';

mgf.style.height=mgf.offsetHeight*1.5 +'px';

}

if(e.wheelDelta<0){

mgf.style.width= parseInt(mgf.offsetWidth/1.5) +'px';

mgf.style.height=parseInt(mgf.offsetHeight/1.5) +'px';

}

curH.innerText = mgf.offsetHeight + 'px';

curW.innerText = mgf.offsetWidth + 'px';

Move();

}

2.完整代码

放大镜

#parent{

position: relative;

margin: 50px auto;

}

#setting{

position: absolute;

width: 400px;

top:20px;

left: 50px;

text-align: center;

font-family: SimSun;

}

#inF{

position: absolute;

left: 50px;

width: 400px;

top: 440px;

text-align: center;

font-family: Simsun;

}

#curW, #curH, #curT{

color: blue;

}

#set{

font-weight: bold;

font-style: italic;

}

#sure{

font-family: Simsun;

color:red;

}

#mgfH, #mgfW, #times{

width: 50px;

}

#curPic{

position: absolute;

top: 50px;

left: 50px;

}

#curPic:hover{

cursor: move;

}

#curPic img{

width: 400px;

height: 400px;

}

#mgf{

display: none;

position: absolute;

top: 0;

left: 0;

background-color: rgba(255, 230, 93, 0.3);

}

#boxEnlarge{

display: none;

position: absolute;

top: 50px;

left: 550px;

overflow: hidden;

}

window.onload = function(){

var parent = document.getElementById('parent');

var curpic = document.getElementById('curPic');

var mgf = document.getElementById("mgf");

var boxEnlarge = document.getElementById("boxEnlarge");

curpic.onmouseover = function(){

var mgf = document.getElementById("mgf");

mgf.style.display = "block";

boxEnlarge.style.display = "block";

}

curpic.onmouseout = function(){

var mgf = document.getElementById("mgf");

mgf.style.display = "none";

boxEnlarge.style.display = "none";

}

var times = 2;

var mgfW = 50;

var mgfH = 50;

var curT = document.getElementById('curT');

var curW = document.getElementById('curW');

var curH = document.getElementById('curH');

curT.innerText = 2+'倍';

curW.innerText = 50+'px';

curH.innerText = 50+'px;'

mgf.style.width = mgfW + 'px';

mgf.style.height = mgfH + 'px';

var button = document.getElementById('sure');

button.onclick = function (){

times = document.getElementById('times').value;

mgfH = document.getElementById('mgfH').value;

mgfW = document.getElementById('mgfW').value;

if(mgfH > curpic.offsetHeight){

mgfH = curpic.offsetHeight;

}

if(mgfW > curpic.offsetWidth){

mgfW = curpic.offsetWidth;

}

mgf.style.width = mgfW + 'px';

mgf.style.height = mgfH + 'px';

curH.innerText = mgfH + 'px';

curW.innerText = mgfW + 'px';

curT.innerText = times + '倍';

}

curpic.onmousewheel = function(e){

if(e.wheelDelta>0){

if(mgf.offsetWidth*1.5 > curpic.offsetWidth){

mgf.style.width = curpic.offsetWidth + 'px';

return;

}

if(mgf.offsetHeight*1.5 > curpic.offsetHeight){

mgf.style.height = curpic.offsetHeight + 'px';

return;

}

mgf.style.width=mgf.offsetWidth*1.5 +'px';

mgf.style.height=mgf.offsetHeight*1.5 +'px';

}

if(e.wheelDelta<0){

mgf.style.width= parseInt(mgf.offsetWidth/1.5) +'px';

mgf.style.height=parseInt(mgf.offsetHeight/1.5) +'px';

}

curH.innerText = mgf.offsetHeight + 'px';

curW.innerText = mgf.offsetWidth + 'px';

Move();

}

curpic.onmousemove = function(){

Move();

}

function Move(e){

boxEnlarge.style.width = mgf.offsetWidth*times + 'px';

boxEnlarge.style.height = mgf.offsetHeight*times + 'px';

e = e || event;

var mgfx = e.clientX - curpic.offsetLeft - parent.offsetLeft - mgf.offsetWidth/2;

var mgfy = e.clientY - curpic.offsetTop - parent.offsetTop - mgf.offsetHeight/2;

if(mgfx<0){

mgfx = 0;

}

if(mgfx >= curpic.offsetWidth-mgf.offsetWidth){

mgfx = curpic.offsetWidth-mgf.offsetWidth;

}

if(mgfy<0){

mgfy = 0;

}

if(mgfy >= curpic.offsetHeight-mgf.offsetHeight){

mgfy = curpic.offsetHeight-mgf.offsetHeight;

}

mgf.style.left = mgfx + 'px';

mgf.style.top = mgfy + 'px';

var pic = boxEnlarge.children[0];

pic.style.width = curpic.offsetWidth*times + 'px';

pic.style.height = curpic.offsetHeight*times + 'px';

pic.style.marginLeft = ((-1)*mgf.offsetLeft*times)+'px';

pic.style.marginTop = ((-1)*mgf.offsetTop*times)+'px';

}

}

Setting 宽:高:倍数:

0.jpg

当前宽度： 当前高度： 当前倍数：

0.jpg

如有错误，欢迎指正~

梨漾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JS案例展示(跟随鼠标移动的小人)
weixin_42541725的博客
02-09 1408
跟随鼠标移动的小人js_mousemove
HTML+CSS+JavaScript实现放大镜效果
apple_54470279的博客
04-29 3121
首先，需要获取操作的对象：图片展示框（鼠标移入事件）；放大镜（显示和跟随鼠标）；放大镜中的图片（改变位置）；给图片展示框添加事件监听器，鼠标移入图片展示框时，显示放大镜。鼠标在图片展示框中移动时的事件监听器。接下来实现放大镜跟随鼠标移动......
js+css+html实现放大镜效果
橘猫吃不胖的博客
12-14 4459
js+css+html实现放大镜效果1 案例描述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码5 总代码 1 案例描述 在很多网页中，我们都能看到一个类似于放大镜的效果，一般显示为有一个小的图，旁边有一个大图，当鼠标在小图上来回移动时，大图也会在相应的位置上来回移动，这样的效果一般在购物网站、制图网站上很常见，方便用户查看各种细节。 案例设计分析图： 效果图如下： 该效果主要是由2个div构成，一个放置小的图片，另一个放置大的，当鼠标在小效果图上来回移动时，会按照比例显示相应部分
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
GS119115的博客
01-12 2297
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，想要自己实现如下。
HTML放大镜 （商品放大镜）
花醉三千客
11-05 828
HTML放大镜 （商品放大镜）
JavaScript+HTML5 canvas实现放大镜效果完整示例
10-17
主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下
HTML+css+JavaScript实现放大镜效果
09-07
HTML+css+JavaScript实现放大镜效果
03-放大镜.html
02-15
03-放大镜.html
05-放大镜.html
02-15
05-放大镜.html
html.rar_html放大镜案例
09-21
html实现的放大镜例子，效果还不错，分享。
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
Hi_MrXiao的博客
08-31 1995
鼠标移动到需要放大的网页上时，鼠标静止不动500毫秒后，一个长方形的放大镜框显示，放大镜中显示当前区域2.2倍的效果，并且这时候鼠标移动放大的区域也跟着变化。放大镜限制：放大镜只能在特定的区域内使用，即放大镜的移动范围有边界。
JS-案例-简单放大镜效果
Joker.M的博客
06-28 212
封装js，主要用到ce 用来创建div的样式 var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgL...
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 3346
JavaScript实现的放大镜效果
京东商品的放大镜效果实现（html+css+js）
Learning_xzj的博客
07-09 5456
京东商品首页随便选择一个商品进入到商品详情页，商品放大镜就是如下图所示的效果： 从图中分析可得： （1）首先在鼠标放置在商品上的时候会出现一个黄色的透明遮罩层 （2）遮罩层会随着鼠标的移动一起移动，这里要注意遮罩层的移动范围在图片盒子内部 （3）当出现遮罩层的时候右边同时也会出现一个盒子，盒子里面是放大后的商品图 PS：看起来好像右边盒子里的图片是左边遮罩层所覆盖部分的放大—专业称为“放大镜”效果，但实际上这里是两张图片，一张小图片放在左边的盒子里，一张大图片放在右边的盒子里，遮罩层在左边盒子
html实现商品图片放大镜，html图片放大镜预览
weixin_43992507的博客
08-10 1060
html实现商品图片放大镜，html图片放大镜预览
html如何在搜索栏里加放大镜,css 如何在html页面上输出一个“放大镜”形状呢？...
weixin_42512441的博客
06-09 4593
摘要:下文讲述使用css脚本在页面上绘制一个“放大镜”形状的方法分享,如下所示:在html页面的开发中，常需要放入一个“放大镜”,用于实现字体或图片放大的导航,那么如何使用css代码在html上绘制“放大镜”形状呢？实现思路:1.绘制一个圆环2.绘制一个长方形–然后对长方形进行旋转制作为放大镜的手柄如下所示:例:使用css绘制一个“放大镜”形状的示例分享maomao365.com css 绘制 "...
Html+Css+Js实现放大镜功能（完整代码+详解）
热门推荐
qq_38170526的博客
08-01 1万+
一，问题描诉 通过将鼠标指向指定的图片，将鼠标移动到图片时，显示一个透明的小区域，然后将小区域的部分放大，查看细节。放大过程中必须满足几个条件： 1.鼠标移动时，透明的小区域也跟着移动，并且透明的小区域必须在指定的图片内，不得出该图片的范围。 2.放大的区域要按照一定的比例展示出来 二，难点分析 2.1难点列出 1.鼠标在图片区域时，透明小区域出现，放大的区域出现 2.鼠标移出图片时，透明小区域小...
html 放大镜
Vollerei的博客
12-26 498
HTML 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/st...
放大镜效果(HTML+CSS+JS)
xiangxiongfly
03-31 178
放大镜效果(HTML+CSS+JS)
html放大镜js代码
最新发布
12-23
以下是一个简单的HTML放大镜的JS代码示例： ```html <!DOCTYPE html> <html> .box { position: relative;...</html> ...这段代码实现了一个简单...通过计算鼠标在小图上的位置，调整遮罩层和大图的位置，实现放大镜效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值