本文主要详细介绍js的简单放大镜效果,可以随意改变,放大区域的大小和比例。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享js实现简单放大镜效果的具体代码,供大家参考。具体内容如下
效果
效果:鼠标在原图中移动,小黄框随鼠标移动,小黄框覆盖的部分显示在显示区。
效果图如下:
核心思路
1.鼠标放在图片上,显示区出现,鼠标离开小方框,显示区消失。
2.鼠标在图片上移动时,小方框随着鼠标移动,鼠标在小黄方框的中间。
3.小框来判断,使其不能超出图片面积。
4.小方框在画面上移动多少,显示区域也要按同样的比例移动。
5.当显示区域的大小发生变化,或者显示区域的内容有所增减时,原图上的小黄框也随之变化。
操作
1.先把需要用到元素获取过来
//获取页面上我们需要的元素
var box 1=document . query selector(' . box 1 ')
var yellow=document . query selector('。黄色’)
var box 2=document . query selector(# right box)
var screen=rightbox.children[0]
2.鼠标放置到图片,显示区域出现,离开则消失
//鼠标进出图片
box1.onmouseenter=function(){
box2.style.display='block '
}
box 1 . onmousseleave=function(){
box2.style.display='none '
}
您可以通过使用鼠标的进入和退出事件来实现这一点。只需分别设置出席和缺席事件。
3.鼠标移动,小盒子跟随移动,且鼠标在黄色小盒子中间
box1.onmousemove=函数(e){
//计算小方框在图中时的中心点。
var x=e . pagex-box 1 . offset left-yellow . offset width/2
var y=e . pagey-box 1 . offset top-yellow . offset height/2
//给小黄框赋值,让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
}
1.使用事件,鼠标会触发图中的每个建筑,这样就可以随时刷新了。
2.当小盒子在图中时,计算它的中心点。
公式:(用鼠标在页面上的位置,减去图片的偏移距离,减去自身的一半)
在这里减去一半,以确保鼠标始终位于黄色框的中心。
4.小盒子给判断条件,让黄色小盒子不能超出图片区域
//将鼠标移动到图片上来触发事件
box1.onmousemove=函数(e){
//算出小方框在画面中央
var x=e . pagex-box 1 . offset left-yellow . offset width/2
var y=e . pagey-box 1 . offset top-yellow . offset height/2
//-
//新节
//确定小方框是否超出img范围,使黄色小方框不能超出img范围。
if(x0){
//此时的0不是图的左侧,而是小方框在最左侧时的中心点。
x=0
} else if(Xbox 1 . offsetwidth-yellow . offsetwidth){
//当小框的X轴中心点大于图片框的宽度减去自身宽度时,表示超出,始终等于图片框的宽度减去自身宽度。
x=box 1 . offsetwidth-yellow . offsetwidth
}
//同上
如果(y0){
y=0
} else if(ybox 1 . offset height-yellow . offset height){
y=box 1 . offset height-yellow . offset height
}
//-
//给小黄框赋值,让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
1.确定小方框左侧是否超出画面,此时给定的if(x0)为0,或者以中心点计算。
2.判断正确的Xbox 1 . offsetwidth-yellow . offsetwidth。
(是否大于图片区域的宽度减去小方框的宽度)
为什么是小盒子宽度,判定的是小盒子中心点,且0的位置是小盒子的中心点,已经减去过一半的小盒子,所以右边减去的就是小盒的一半*2
3.上下也一样,这个时候黄色小盒子就不会超出图片区域了
5.小盒在图片上移动多少,显示区域要移动同比例的距离
//通过计算,得出小盒子在图片移动多少,显示区就移动多少的比例
非常感谢。风格。left=-x/box 1。offsetwidth * src een。偏移量'像素'
非常感谢。风格。top=-y/box 1。偏移高度* src een。偏移高度'像素'
显示区域移动的多少,取决于小盒子移动多少
小盒子移动的值除以图片的宽度乘以显示区域的宽度
显示区域的移动值就可以和小盒子在图片的移动比例相同
6.显示区大小改变或显示区内容变化,图片上黄色盒子随之改变
//计算黄色小盒子在图片上的大小
黄色。风格。宽度=方框1。offsetwidth/(src een。偏移宽度/框2。offsetwidth)' px '
黄色。风格。高度=框1。偏移高度/(src een。偏移高度/框2。偏移高度)“像素”
}
计算方式为:黄色盒子的宽=图片的宽/(显示区域的内容宽度/显示区域的框的宽度)
高度也是一样的
因为,是鼠标移动触发,所以实时刷新
调整
。img2{
宽度:3000像素
高度:3000像素
位置:绝对;
}
#右框{
位置:绝对;
top:0;
左:650像素
宽度:900像素
高度:900像素
溢出:隐藏;
显示:无;
}
当需要调整框的大小,或放大比例时,改变这两个样式的宽高即可
内容,css,js整体代码
!文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width,initial-scale=1.0 '
标题文档/标题
风格
*{
填充:0;
边距:0;
}。img1{
宽度:300像素
高度:300像素
}。img2{
宽度:3000像素
高度:3000像素
位置:绝对;
}
#右框{
位置:绝对;
top:0;
左:650像素
宽度:900像素
高度:900像素
溢出:隐藏;
显示:无;
}。黄色{
背景色:黄色;
不透明度:0.5;
宽度:100像素
高度:100像素
位置:绝对;
top:0;
左:0;
}。方框1{
宽度:300像素
高度:300像素
位置:相对;
左边距:300像素
}
/风格
/头
身体
div class='box1 '
img src=' ./images/1。jpg ' alt=' ' ' img 1 '
div class='yellow'/div
/div
div id='rightbox '
img src=' ./images/1。jpg ' alt=' ' class=' img 2 '
/div
脚本
//获取页面上我们需要的元素
变量框1=文档。查询选择器('。方框1’)
var yellow=文档。查询选择器(.黄色)
变量框2=文档。查询选择器(#右框)
var srceen=rightbox.children[0]
//鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block '
}
方框1。onmousseleave=function(){
box2.style.display='none '
}
//鼠标在图片上移动触发事件
box1.onmousemove=函数(e){
//算出小盒子在图片的中心点
var x=e . pagex-box 1。向左偏移-黄色。偏移宽度/2
变量y=e .佩吉框1。偏移顶部-黄色。偏移高度/2
//判断小盒子是否超出img范围,使黄色小盒子不能超出img范围
if(x0){
//此时的0不是图片的左侧,而是小盒子在最左边时,小盒子的中心点
x=0
} else if(Xbox 1。偏黄色。offsetwidth){
//当小框的X轴中心点大于图片框的宽度减去自身宽度时,表示超出,始终等于图片框的宽度减去自身宽度。
x=box 1 . offsetwidth-yellow . offsetwidth
}
//同上
如果(y0){
y=0
} else if(ybox 1 . offset height-yellow . offset height){
y=box 1 . offset height-yellow . offset height
}
//给小黄框赋值,让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
//通过计算,得到图片中小方框移动多少,显示区域移动多少的比例。
src een . style . left=-x/box 1 . offsetwidth * src een . offsetwidth ' px '
src een . style . top=-y/box 1 . offset height * src een . offset height ' px '
//计算图片上小黄框的大小
yellow . style . width=box 1 . offsetwidth/(src een . offsetwidth/box 2 . offsetwidth)' px '
yellow . style . height=box 1 . offset height/(src een . offset height/box 2 . offset height)' px '
}
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。