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

目录
相关文章
|
5月前
|
JavaScript
js类似放大镜(整理)
js类似放大镜(整理)
|
4月前
|
JavaScript 前端开发 算法
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
45 0
|
2月前
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
42 0
|
4月前
|
存储 开发框架 JavaScript
JavaScript 网页特效-2
JavaScript 网页特效-2
16 0
|
4月前
|
JavaScript 前端开发
JavaScript 网页特效-1
JavaScript 网页特效-1
21 0
|
5月前
|
JavaScript 前端开发 开发者
|
5月前
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
|
5月前
|
JavaScript 前端开发
JavaScript 进阶5:WebAPI:DOM- 网页特效篇
JavaScript 进阶5:WebAPI:DOM- 网页特效篇
45 0
|
前端开发 JavaScript
javaScript实现放大镜效果
javaScript实现放大镜效果
javaScript实现放大镜效果
|
JavaScript 前端开发

相关产品

  • 云迁移中心