用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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
js 表格隔行颜色
Dec 02 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
js调用刷新界面的几种方式
May 03 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
1 Tube Radio
2021/03/02 无线电
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python进行TCP端口扫描的实现
2018/12/21 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
企业内控岗位的职责
2014/02/07 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
商业计划书之服装
2019/09/09 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python