用webAPI实现图片放大镜效果


Posted in Javascript onNovember 23, 2020

本文实例为大家分享了webAPI实现图片放大镜效果的具体代码,供大家参考,具体内容如下

实现图片放大的效果

做这个之前需要会
事件对象.clientX     这个是X轴
事件对象.clientY     这个是Y轴

1.元素.offsetLeft     获取盒子距离浏览器的距离元素.

2.offsetTop     获取盒子距离浏览器顶部的距离

这两个都是谁有定位我就看谁;

1.元素.offsetWidth     获取盒子的宽度元

2.素.offsetHeight    获取盒子的高度

我们要实现这样的效果:

结构:

用webAPI实现图片放大镜效果

在做项目之前我们必须先知道哪些元素是需要获取的:

图片中我们可以看出 w是大盒子不需要获取,leftBox 是我们需要获取
黄盒子因为我们需要控制里面的盒子进行移动;
rightBox是放大后的盒子获取;
里面的img也需要获取,我们需要移动的是rightBox 里面的图片而不是rightBox

用webAPI实现图片放大镜效果

第一步:鼠标进入显示

用webAPI实现图片放大镜效果

onmouseenter是鼠标进入的意思

当我鼠标进入的时候在修改tool(小黄盒子的display属性)和右边盒子让他进入就显示

第二步:鼠标离开的时候隐藏

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120214428601.png#pic_center)

onmouseleave是鼠标离开的意思

同理当我们鼠标离开的时候吧tool和右边(rightBox)的大盒子给他隐藏掉.

第三步:鼠标在左盒子移动黄盒子和右图都要移动

用webAPI实现图片放大镜效果

onmousemove鼠标在事件中移动的时候

e是事件对象。

  • 先来看第一步。
  • e.clicentX clicent是针对于浏览器而言,X代表水平方向
  • e.clicentY 同理针对Y轴;

offsetLeft上面我们也说了。offsetLeft是针对有定位的属性的距离,因为父盒子是body 有属性position:state静态定位
offsetTop是距离上面的的距离 如果不减去会变成这样:

用webAPI实现图片放大镜效果

所以我们需要减去盒子距离左边和上面的距离;

减去后:变成了这样

用webAPI实现图片放大镜效果

接下来需要减去自身的一半就可以了

首先我们需要获取黄色盒子的宽和高
offsetHeight获取盒子的高度;
offsetWidth获取盒子宽度;
接着就是出去他们自身的一半 / 2;

用webAPI实现图片放大镜效果

鼠标就会在黄色盒子的中间显示;
但是则会不是我们想要的效果;
我们不希望黄色的盒子超出leftBox盒子
这个时候我们就需要使用if进行判断一下;

用webAPI实现图片放大镜效果

x < 0 来判断是否到达了最左边如果到达了最左边吧0赋给x;
但是这样我们右边又会超出去这个时候我们需要判断一下右边的最大值;
x > 左边盒子宽度➖黄色的盒子就可以得到他一共可以移动多少距离;

用webAPI实现图片放大镜效果

同理上下也是这样:

用webAPI实现图片放大镜效果

好了这样我们的左侧盒子就算做完了;
下面是实现右侧放大盒子;

用webAPI实现图片放大镜效果

就这么两行代码

首先我们要先设置他的样式,左侧图片大小正好是400px 右侧盒子是800px
我们看到当我们在移动鼠标的时候放大的图片是反方向移动的所以我们在这里要添加(-)号取反 在哪这个去×他的x,y轴就可以放大图片了

素材:

右侧图片

用webAPI实现图片放大镜效果

左侧图片

用webAPI实现图片放大镜效果

html代码:

<div class="w">
  <div class="fdj">
   <div class="leftBox" id="_leftBox">
    <!-- 小图 -->
    <img src="img/m.jpg" alt=""/>
    <!-- 小黄盒子 -->
    <div class="tool" id="_tool"></div>
   </div>
   <div class="rightBox" id="_rightBox">
    <img id="_bImg" src="img/b.jpg" alt=""/>
   </div>
  </div>
</div>

css代码

* {
 margin:0;
 padding:0;
}

.w {
 width: 1190px;
 margin: 0 auto;

}
.fdj {
 margin-top: 20px;
}

.fdj .leftBox {
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 float: left;
 position: relative;
}

.fdj .tool {
 width: 250px;
 height: 250px;
 background:gold;
 opacity:.5;
 filter:alpha(opacity=50);
 position: absolute;
 top:0;
 left: 0;
 cursor: move;
 /* 默认隐藏 */
 display: none;

}
/* 给小黄加上active 就会显示 */
.fdj .tool.active {
 display: block;
}

.fdj .rightBox {
 width: 500px;
 height: 500px;
 border:1px solid #ccc;
 float: left;
 overflow: hidden;
 /* 隐藏 */
 display: none;
 position: relative;
}
/* 加上active表示显示 */
.fdj .rightBox.active {
 display: block;
}

.fdj .rightBox img {
 position: absolute;
}

js代码:

// 获取元素
var leftBox = document.getElementById('_leftBox')
var tool = document.getElementById('_tool');
var rightBox = document.getElementById('_rightBox');
var bImg = document.getElementById('_bImg');
// 1、鼠标进入显示
  leftBox.onmouseenter = function () {
   tool.style.display = 'block';
   rightBox.style.display = 'block';
  }


// 2、鼠标离开隐藏
leftBox.onmouseleave = function () {
   tool.style.display = 'none';
   rightBox.style.display = 'none';
  }


// 3、鼠标在左盒子移动黄盒子和右图都要移动
leftBox.onmousemove = function (e) {
   // 修改黄盒子和右图left和top
   // 把鼠标的位置给黄盒子、获取鼠标位置
   var x = e.pageX - leftBox.offsetLeft - tool.offsetWidth / 2;
   var y = e.pageY - leftBox.offsetTop - tool.offsetHeight / 2;
   
   // 判断距离
   if (x < 0) {
    x = 0;
   } else if (x > leftBox.offsetWidth - tool.offsetWidth) {
    x = leftBox.offsetWidth - tool.offsetWidth;
   }

 

   if (y < 0) {
    y = 0;
   } else if (y > leftBox.offsetHeight - tool.offsetHeight) {
    y = leftBox.offsetHeight - tool.offsetHeight;
   }
   
   // 设置给黄盒子
   tool.style.left = x + 'px';
   tool.style.top = y + 'px';

   // console.log(x, y);
   // // left和top
   bImg.style.left = -2 * x + 'px';
   bImg.style.top = -2 * y + 'px';

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Javascript的一种模块模式
Mar 22 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
chrome调试javascript详解
Oct 21 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
js观察者模式的弹幕案例
Nov 23 #Javascript
js异步接口并发数量控制的方法示例
Nov 22 #Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
ES6学习教程之Promise用法详解
Nov 22 #Javascript
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
详解JS预解析原理
2020/06/16 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
个人现实表现材料
2014/02/04 职场文书
同事打架检讨书
2014/02/04 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2014年电教工作总结
2014/12/19 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android