js放大镜效果思路,JS放大镜,js实现简单的放大镜效果

js放大镜效果思路,JS放大镜,js实现简单的放大镜效果

本文主要详细介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: