用js实现高清放大图片效果

 var box = my$("box");var small = box.children[0];var big = box.children[1];var mask = small.children[1];var bigImg = big.children[0];//鼠标进入显示遮挡层和大图divbox.onmouseover = function () {mask.style.display = "block";big.style.display = "block";}// 鼠标移开，隐藏遮罩层和大图。box.onmouseout = function () {mask.style.display = "none";big.style.display = "none";}//在哪个上面移动鼠标，就是谁点onmousemove。鼠标的移动事件small.onmousemove = function (e) {// 可是区域的宽度减去 mask的宽度的一半，可以让鼠标到中间显示。var x = e.clientX - mask.offsetWidth / 2;var y = e.clientY - mask.offsetHeight / 2;var x = x - 100;//有margin减去var y = y - 100;// 处理边界，不然mask从图片了里面出去，左上角相当于原点，X坐标Y坐标都是0.x = x > 0 ? x : 0;y = y > 0 ? y : 0;// 图片包含框的宽度减去mask的宽度，就是最大活动宽度范围。// 图片包含框的高度减去mask的高度，就是最大的活动高度范围。var smallmaxX = small.offsetWidth - mask.offsetWidth;var smallmaxY = small.offsetHeight - mask.offsetHeight;x = x > smallmaxX ? smallmaxX : x;y = y > smallmaxY ? smallmaxY : y;   mask.style.left = x + "px";mask.style.top = y + "px";// 大图的最大横向移动距离,最大纵向移动距离var bigmaxX = bigImg.offsetWidth - big.offsetWidth;var bigmaxY = bigImg.offsetHeight - big.offsetHeight;// 遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离。// 大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离var bigImgMoveX = x * bigmaxX / smallmaxX;var bigImgMoveY = y * bigmaxY / smallmaxY;// 大图相对于big向左移动，所以是负值。bigImg.style.marginLeft = -bigImgMoveX + "px";bigImg.style.marginTop = -bigImgMoveY + "px";}

用js实现高清放大图片效果相关推荐

图片高清放大效果怎么做？这三种方法分享给你
怎么给图片进行放大呢?有时我们需要将图片放大以便更好地查看细节或者提高图片的清晰度.例如在演示或者展示中需要展示细节时,需要将图片放大以便观众更好地看到细节,或者是编辑图片时,需要将图片放大以便更好地 ...
怎么给图片高清放大？这个放大方法轻松拿捏
怎么将图片给高清放大呢?图片放大是一种常见的图片处理方法,它可以对图片进行局部放大,以便更好地理解图片内容.放大可以帮助我们更好地强调图片的重点,能够更好地传达信息和呈现图片的美观效果,吸引观众的眼球 ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
【python--爬虫】千图网高清背景图片爬虫
最近有读者反映想要下载千图网的高清背景图片,但是需要会员才能下载,而且需要的量非常大,问博主有没有办法能免费下载这些图片. 付费,不存在的o(￣▽￣)o!,博主今天讲解如何通过python爬取千图网的 ...
爬虫36计之1.1 爬取高清MM图片壁纸
文章目录爬取彼岸花免费壁纸主页分析爬取主页信息详细页面分析爬取详细页面爬取彼岸花免费壁纸技术服务于生活,今天爬虫开篇就为广大的程序猿谋福利,爬取mm图片. 为什么要选择彼岸花为案例?因为 ...
matlab如何导入大量的图片_本期介绍:如何在论文中插入高清的图片
科研资源库学术论文: ➤本期介绍如何在论文中插入高清的图片! ➤ 发现用下面的方法, 可以得到高清的矢量图, 非常好用, 推荐给需要的同学! 加工学术论文时,尤其是理工类论文,很多配图是Matlab ...
使用Python爬出王者荣耀高清皮肤图片
记录一下自己获取王者荣耀的高清皮肤图片的过程先进入王者荣耀的官网https://pvp.qq.com/ 打开F12后,点到Network那里,再按F5,然后就会看到巴拉巴拉加载出很多网络包对her ...
hydra图形化工具下载_Hydra Pro 4.0 专业的逼真高清HDR图片创建工具
Hydra Pro 4.0 专业的逼真高清HDR图片创建工具 Hydra Pro for mac是一款专业的逼真高清HDR图片创建工具,它能够合成多大7种不同曝光度的照片合成创建润色你的照片,以为你照 ...
python爬取某网站高清二次元图片自动下载
第一章 Python 爬取网站信息文章目录一,什么是爬虫? 二.使用步骤 1.引入库 2.伪装header 3.读取信息并过滤,写入文件总结前言本文只做技术讨论,大家不要一直爬这个小网站,记 ...

用js实现高清放大图片效果

用js实现高清放大图片效果相关推荐

最新文章

热门文章