放大镜

最新推荐文章于 2021-11-25 23:50:23 发布
最新推荐文章于 2021-11-25 23:50:23 发布
阅读量247 收藏
点赞数
分类专栏： 鼠标事件 文章标签： JS放大镜 鼠标移动 定位练习 临界问题判定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WgGaopeng/article/details/75912054
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title>放大镜功能</title>

<style>

#small {

width: 300px;

width: 303px;

border: 2px solid red;

position: relative;

}

#small img {

width: 100%;

}

#slider {

width: 60px;

height: 60px;

position: absolute;

left: 0;

top: 0;

background-color: rgba(0, 200, 200, 0.5);

display: none;

}

#big {

width: 300px;

height: 303px;

position: absolute;

left: 350px;

top: 10px;

display: none;

overflow: hidden;

}

#big img {

width: 1500px;

}

</style>

</head>


<body>

<!--左侧的小图部分-->

<div id="small">

<img src="img/2.png" alt="" />

<!--图片上的滑块部分-->

<div id="slider"></div>

</div>

<!--右侧的大图部分-->

<div id="big">

<img src="img/3.jpg" alt="" />

</div>

</body>

<script type="text/javascript">

var small = document.getElementById("small");

var sliderDiv = document.getElementById("slider");

var big = document.getElementById("big");

var bigImg = document.querySelector("#big>img");

//给small添加移入移出事件

small.onmouseenter = function() {

sliderDiv.style.display = "block";

big.style.display = "block";

}

small.onmouseleave = function() {

sliderDiv.style.display = "none";

big.style.display = "none";

}

//给small添加鼠标移动事件

small.onmousemove = function(e) {

var event1 = event || e;

//获取鼠标点的位置,X轴位置,设置left值

var xDistance = event1.clientX - small.offsetLeft - sliderDiv.offsetWidth / 2;

//获取鼠标点的位置，Y轴位置，设置top值

var yDistance = event1.clientY - small.offsetTop - sliderDiv.offsetHeight / 2;

//设置滑块移动的X轴的最大值

var maxX = small.offsetWidth - sliderDiv.offsetWidth;

var maxY = small.offsetHeight - sliderDiv.offsetHeight;

//左侧超出时

if (xDistance <= 0) {

xDistance = 0;

}

//右侧超出

if (xDistance > maxX) {

xDistance = maxX;

}

//上侧超出

if (yDistance < 0) {

yDistance = 0;

}

//下侧超出

if (yDistance > maxX) {

yDistance = maxY;

}

//设置滑块的位置

sliderDiv.style.left = xDistance + "px";

sliderDiv.style.top = yDistance + "px";

//修改大图的位置

//第一种方式：使用滚动

//当滑块滚动到某一位置是占总总滚动距离的百分比

// big.scrollLeft = (bigImg.offsetWidth - big.clientWidth) * xDistance / maxX ;

// big.scrollTop = (bigImg.offsetHeight - big.clientHeight) * yDistance / maxY ;

//第二种方式：使用定位

bigImg.style.position="absolute";

bigImg.style.left=-(bigImg.offsetWidth-big.clientWidth)*xDistance/maxX+"px";

bigImg.style.top=-(bigImg.offsetHeight-big.clientHeight)*yDistance/maxY+"px";

}

</script>


</html>


VVVGavin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
放大镜效果
angry_rooster的博客
08-05 1171
放大镜效果 这里的放大镜效果是指当鼠标（手指）和页面（屏幕）中一个方框内的图片交互时，图片呈现放大效果，图片在框内显示的放大区域随鼠标（页面）位置的改变而改变 演示链接：https://codesandbox.io/s/fangdajingxiaoguo-jxdfo 源码：https://gitee.com/thisismyaddress/webpage-effects/tree/master/magnifier-effect 以下我尝试了几种不同的实现方式 移动图片框内的图片 这里是通过改变图片框内的一
usb放大镜驱动
11-21
用于USB放大镜驱动程序,专门开发的。好好保存哦
电子放大镜驱动.rar
05-23
USB Digital Microscope(20x-200x)型号的电子放大镜驱动。 Computer System Requirements: Windows 2000/XP/VISTA/WIN7&Mac; P4 1.8 or above RAM: 256M Video Memory: 32M USB port: 2.0 CD-ROM Drive
图片放大镜
没有如果
03-16 736
function initZoom(){                                        //页面初始化调用    zoomImg=document.getElementById('zoomQjtp');      //得到大图片    srcImg=document.getElementById('qjtpPath');       //得到小图片    zo
放大镜 讲课_《放大镜》教学设计
weixin_28943045的博客
01-14 1074
《放大镜》教学设计宁波市鄞州区宋诏桥小学 竺红波【教学目标】科学概念1．放大镜是凸透镜，具有放大物体图像，看清更多细节的作用。2．放大镜镜片的特点是透明和中间厚，边缘薄；镜片凸度越大，放大倍数越大。3．放大镜广泛应用在人们学习、生活、生产的许多方面。过程与方法1．经历观察工具共同点和不同点的对比活动，探究放大功能器具的的特点。2.学会使用放大镜，对比肉眼观察和使用放大镜，能发现更多的细节。情感、态...
地图放大镜的实现
LZUGIS
11-25 1370
概述 闲来无事，就做一个花里胡哨的功能：地图放大镜，从中可以学习：1、根据坐标计算对应级别的切片；2、canvas绘图。 实现效果 实现思路 注册map的pointermove事件； 通过当前级别+放大级别，计算当前坐标所在放大级别对应的切片； 请求切片图片，并绘制到canvas上面； 实现代码 const tileSize = 256 const canvas = document.createElement('canvas') canvas.width = tileSize canvas.heig
Qt放大镜
林俊杰的博客
08-23 2253
版权声明：转载自 https://blog.csdn.net/onlyshi/article/details/48997631 ...
android放大镜功能,Android 放大镜效果实现
weixin_29029169的博客
05-26 729
放大镜就是直接调用相机，使用放大缩小的功能实现，调用相机有两种方式，一种是直接调用系统的；另一种是自定义相机，需要自定义一个预览界面，下面简单介绍自定义相机方式：参考:http://developer.android.com/guide/topics/media/camera.html首先我们需要申请权限：1、获取需要的权限，检测手机是否有相机。//manifest里添加使用相机的权限//使用相机...
visual c++使用StretchBlt实现放大镜效果
05-09
本篇文章将详细探讨如何利用这个函数来实现一个基本的放大镜效果，这对于图像处理和用户界面设计尤其有用。 首先，我们需要了解StretchBlt的基本语法和参数。StretchBlt函数的声明如下： ```cpp BOOL StretchBlt( ...
C++ win API实现的放大镜
05-17
放大镜软件通过捕获屏幕上的像素，然后对这些像素进行放大显示，模拟出物理放大镜的效果。在C++中，这通常涉及到Windows消息处理、GDI（Graphics Device Interface）以及可能的多线程技术。 1. **Windows消息处理**...
一个手写的vue放大镜效果
10-16
在本文中，我们将深入探讨如何实现一个手写的Vue放大镜组件。这个组件使用了Less预处理器，使得样式更加灵活和可维护。首先，确保你已经安装了对应的Vue环境和Less loader，以便正确处理Less样式。 组件的核心参数...
制作放大镜
03-02
在IT行业中，"制作放大镜"通常是指在网页或应用程序中实现一种交互功能，让用户能够更清晰地查看商品细节，特别是在电商商城页面中，如同淘宝购物车中的放大镜效果。这种功能通过模拟真实世界中的放大镜，使得用户...
案例--放大镜
tby_pr的博客
10-15 220
放大镜的构造函数 类名: box: 整个放大镜区域的盒子 show: 一个 div, 内部是展示的图片 mask: 在 show 的子级元素, 是图片上的遮罩层 list: 下面切换图片的列表盒子 => list > p > img enlarge: box 的子级元素, 就是承载放大图片的盒子 需求: 0. 调整比例(选做) => 可以自己使用计算器计算, 去调整 css => 也可以通过 js 代...
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
jquery 放大镜
09-16
jQuery放大镜是一种通过使用jQuery库中的相关功能来实现图片放大镜效果的方法。放大镜效果通常用于网站上的产品展示页面，以提供用户更清晰、细节更丰富的产品展示体验。 要实现jQuery放大镜效果，首先需要引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值