JavaScript网页特效——放大镜

简介: JavaScript网页特效之放大镜效果

什么是放大镜🔍

放大镜效果是电商网站中常用的网页特效,在实现放大镜效果时需要运用到offset系列的属性获取元素的位置和大小,还有鼠标事件位置属性(pageX,pageY)。比如说在电脑逛京东的时候,随便打开一个商品,把鼠标移动到商品的图片上,都可以看到放大效果,如图下。

7081e60cdd3ec726225d97dce826f92.jpg

题目要求

6726c5b81b65fc51ae87164402615b4.jpg

html代码

<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>放大镜</title><linkrel="stylesheet"href="css/style.css"></head><body><divclass="header"></div><divclass="center"><divclass="box"><divclass="thumb"><imgsrc="img/small.jpg">  //img可以修改 放自己喜欢图片来测试
<divclass="move"></div></div><divclass="scale"><imgsrc="img/big.jpg">   //img可以修改 放自己喜欢图片来测试
</div></div></div><scriptsrc="js/index.js"></script></body></html>

css代码

body{
margin: 0;
padding: 0;
}
img{
display: block;
}
.header{
height:100px;
}
.center{
width:800px;
margin:0auto;
}
.box{
position:relative;
width:400px;
}
.box.thumb{
position:relative;
width:400px;
height:400px;
}
.box.thumbimg{
width:100%;
height:100%;
}
.box.thumb.move{
position:absolute;
top:0px;
left:0px;
display:none;
width:200px;
height:200px;
background-color: rgba(0,0,0,0.4);
}
.box.scale{
display:none;
position:absolute;
right:-420px;
top:0;
width:400px;
height:400px;
border:1pxsolid#ccc;
overflow:hidden;
}
.box.scaleimg{
position:absolute;
left:0;
top:0;
}
.box.thumb:hover.move{
display:block;
}
.box.thumb:hover+.scale{
display:block;
}

js代码

varzmFdj=function(){
varthumbElem=document.getElementsByClassName("thumb")[0],
// 获取缩略图距离页面左边的距离thumbPosX=Math.round(thumbElem.getBoundingClientRect().left+document.documentElement.scrollLeft),
// 获取缩略图距离页面顶部的距离thumbPosY=Math.round(thumbElem.getBoundingClientRect().top+document.documentElement.scrollTop);
// 获取移动的元素varmoveElem=document.getElementsByClassName("move")[0];
// console.log(thumbPosX);// console.log(thumbPosY);thumbElem.onmousemove=function(e){
// 获取移动的元素的宽和高// var moveElemW=____(1)____;// var moveElemH=_____(2)_____;varmoveElemW=moveElem.offsetWidth;
varmoveElemH=moveElem.offsetHeight;
// 计算移动元素距离缩略图左边和顶部的距离// var x=____(3)_______;// var y=_____(4)________;varx=e.pageX-thumbPosX;
vary=e.pageY-thumbPosY;
// 设置鼠标指针在移动元素的中间位置// moveElem.style.left=____(5)_____;// moveElem.style.top=_____(6)______;moveElem.style.left=x-moveElemW/2+'px';
moveElem.style.top=y-moveElemH/2+'px';
// if(_____(7)______){if(parseInt(moveElem.style.left)<0){
moveElem.style.left=0;
        }elseif(parseInt(moveElem.style.left)>(thumbElem.offsetWidth-moveElemW)){
moveElem.style.left=thumbElem.offsetWidth-moveElemW+"px";
        }
// if(____(8)______){if(parseInt(moveElem.style.top)<0){
moveElem.style.top=0;
        }elseif(parseInt(moveElem.style.top)>(thumbElem.offsetHeight-moveElemH)){
moveElem.style.top=thumbElem.offsetHeight-moveElemH+"px";
        }
// 放大的倍数varsca=thumbElem.offsetWidth/moveElemW;
varscaleEle=document.getElementsByClassName("scale")[0];
// 放大图片的位置varimg=scaleEle.getElementsByTagName("img")[0];
// img.style.left=_____(9)______;// img.style.top=_____(10)______;img.style.left=-(sca*parseInt(moveElem.style.left))+"px";
img.style.top=-(sca*parseInt(moveElem.style.top))+"px";
    }
}
zmFdj();

题目解析

1、2题 获取移动的元素(遮罩层)的宽和高

返回指移动元素(遮罩层)的宽和高,用到offsetWidth和offsetHeight属性

3、4题 计算移动元素(遮罩层)距离缩略图左边和顶部的距离

用获取的鼠标坐标X、Y减去获取缩略图距离页面左边的距离、获取缩略图距离页面顶部的距离(e.pageX-thumbPosX e.pageY-thumbPosY)

5、6题  设置鼠标指针在移动元素(遮罩层)的中间位置

顾名思义就是获取遮罩层移动距离

7、8题 限制移动元素(遮罩层)的移动范围

做到遮罩层不移出图片的效果

9、10题 获取放大图片的位置

公式:放大图片的位置=-(放大的倍数(缩略图的宽/遮罩层的宽)*遮罩层移动距离)

之所以是负的,是为了让放大图片展示效果与遮罩层部分保持同步

效果图

e50be7c925d26a86094c5fd0fd8fe13.jpg

目录
相关文章
|
9天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
35 1
|
1月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
1月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
13天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
10 1
【JavaScript】网页交互的灵魂舞者
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
19天前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
|
19天前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
1月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例