用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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
用javascript做拖动布局的思路
May 31 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
vue实现底部菜单功能
Jul 24 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
代码获取历史上的今天发生的事
2014/04/11 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
干部考核评语
2014/04/29 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
公司放假通知范文
2015/04/14 职场文书
Python编写nmap扫描工具
2021/07/21 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫