两种方法实现放大镜效果

最新推荐文章于 2024-01-09 10:59:42 发布
最新推荐文章于 2024-01-09 10:59:42 发布
阅读量516 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxingjigaozhao/article/details/80952310
版权

两种方法  实则原理相同，只是图片的保存形式不一样。小图大图成比例，大图大小设为小图的4倍。图片自己去找哦

一、大图直接放在div当中

<!doctype html>
<html>
<head>
<title>放大镜</title>
<meta charset="utf-8"/>
<link href="css/magnifier.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/magnifier.js"></script>
<style>
*{
margin:0px;
padding:0px;
}




#small-box{
position:relative;
border:1px solid #ccc;
display: block;
width: 500px;
height: 500px;
margin: 50px;
}




#float-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}




#big-box {
display: none;
position:absolute;
top:50px;
z-index:1;
left: 1000px;
width: 500px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
}




#big-box img{
position:absolute;
}
</style>
</head>
<body>
<div id="small-box">
<div id="float-box"></div>
<img title="small img" src="img/2.jpg">
</div>
<div id="big-box">
<img title="bigger img" src="img/3.jpg">
</div>
</body>
</html>




<script>
window.onload = function () {
// 获取所需要操作的对象
var smallBox = document.getElementById("small-box");
var floatBox = document.getElementById("float-box");
var bigBox = document.getElementById("big-box");
var bigImage = bigBox.getElementsByTagName("img")[0];


// 鼠标移动到对象上显示放大镜和放大镜放大后的图像
smallBox.onmouseover = function(){
floatBox.style.display = "block";
bigBox.style.display = "block";
}


// 鼠标移出对象时隐藏放大镜和放大镜放大后的图像
smallBox.onmouseout = function(){
floatBox.style.display = "none";
bigBox.style.display = "none";
}


// 鼠标在对象上移动触发的事件
smallBox.onmousemove = function(e){
var event = e || window.event;
var left = event.clientX - smallBox.offsetLeft - floatBox.offsetWidth/2;
var top = event.clientY - smallBox.offsetTop - floatBox.offsetHeight/2;


if(left < 0) {
left = 0;
} else if (left > (smallBox.offsetWidth - floatBox.offsetWidth)) {
left = smallBox.offsetWidth - floatBox.offsetWidth;
}


if (top < 0) {
top = 0;
} else if (top > (smallBox.offsetHeight - floatBox.offsetHeight)) {
top = smallBox.offsetHeight - floatBox.offsetHeight;
}


// 设置放大镜移动的距离
floatBox.style.left = left + "px";
floatBox.style.top = top + "px";
// 根据比例计算放大镜放大后的图像移动的位移(负数)
bigImage.style.marginLeft = -(left * bigImage.offsetWidth)/smallBox.offsetWidth + "px";
bigImage.style.marginTop = -(top * bigImage.offsetHeight)/smallBox.offsetHeight + "px";
}
}
</script>
</body>

</html>

二、大图设为div的背景

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #dt{
 position:relative;
 width:500px;
 height:500px;
}
#fdj{
  background:#fff;
  width:125px;
  height:125px;
  position:absolute;
  top:0;
  opacity:0.5;
  filter:alpha(opacity=50);
  display:none;
}
#dd{
  display:none;
  width:500px;
  height:500px;
  position:absolute;
  left:600px;
  top:0;
  overflow:hidden;
  background:url("img/3.jpg")
}  
  </style>
 </head>
 <body>
  <div id="dt">
     <img src="img/2.jpg">
  <span id="fdj"></span>
  </div>
  <div id="dd">
            
  </div>
<script>
   var dt = document.getElementById("dt"); //这是原图盒子;



      var dd = document.getElementById("dd");  //这是要放大盒子
 var ddc=dd.children[0];


      var fdj = document.getElementById("fdj"); //这是放大镜盒子


      
      dt.onmouseover = function () {
          dd.style.display = "block";
          fdj.style.display = "block";
      }
      dt.onmouseout = function () {
          dd.style.display = "none";
          fdj.style.display = "none";
      }
      dt.onmousemove = function (e) {
           var e=e||window.event;
          var left = e.clientX -dt.offsetLeft- fdj.offsetWidth/2;
          var top = e.clientY-dt.offsetTop- fdj.offsetHeight/2;
          if (left < 0) {
              left = 0;
          }else if (left > dt.offsetWidth - fdj.offsetWidth) {
              left = dt.offsetWidth - fdj.offsetWidth;
          }
          if (top < 0) {
              top = 0;
          }else if (top > dt.offsetHeight - fdj.offsetHeight){
              top = dt.offsetHeight - fdj.offsetHeight;
          }
          fdj.style.left = left + "px";
          fdj.style.top = top + "px";
          dd.style.backgroundPositionX=(-4*left)+"px";
          dd.style.backgroundPositionY=(-4*top)+"px";
      }
</script>
 </body>
</html>

xingxingjigaozhao
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现放大镜效果
02-03
相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东...上面我们介绍了通过两种方式实现放大镜效果，接下来，我们将以上的两种方式应用到我们的jQuery
基于原生Javascript的放大镜插件的设计和实现
weixin_43263355的博客
03-24 802
本文主要介绍一个前端放大镜插件的设计和实现，该插件可以将图片的指定区域进行局部放大，插件运行不依赖任何第三方库，可以在Chrome或Edge的常见版本上运行。
unity UGUI通过UV实现放大镜功能
最新发布
qq_30281539的博客
01-09 413
需要两张图片来实现，一个image组件，一个rwaimage组件。rwaimage用来显示放大区域，通过修改uv来显示。image用于展示需要放大的图片。随便创建个空物体挂载此脚本并赋值。（功能展示，放大效果）
unity3D简易的放大镜
yxgg000的博客
09-30 1203
unity3D简易的放大镜
放大镜效果
Meg_Fu的博客
01-12 430
1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动;2将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。用display:none;和两个比例的图片来实现放大效果。鼠标跟随来实现黄色方框。/* 防止抖动 */
Unity中实现放大镜的功能
Sun.ME的博客
11-22 8772
在Unity中使用UGUI中的Rawimage和RenderTexture实现放大镜的功能
实现jquery放大镜的两种方法
10-18
本篇文章给大家详细分析了用jquery实现放大镜效果的方法，以及代码分享，有兴趣的学习下。
基于jQuery实现放大镜效果
11-24
上面我们介绍了通过两种方式实现放大镜效果，接下来，我们将以上的两种方式应用到我们的jQuery插件中。 首先，我们需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象
原生js代码实现图片放大境效果
10-21
今天小编给大家分享两种使用js写的图片放大镜效果，原理都差不多，都是采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果，感兴趣的朋友一起看看吧
Unity Shader放大镜效果
a592733740的博客
05-22 2696
小菜最近看到了一篇关于Shader实现的放大镜效果，酷炫的效果让小菜倍生好奇，冲动之下还是搬来练练手，刚好巩固下自己的顶点片元着色器编码。 有没有想学习的冲动！！！ 文章的开始先来介绍一款好用的vs编辑shader的免费插件。 ShaderlabVS可以支持部分关键字提示。这将解决困扰好多编写shader没有预选关键字提示的痛苦。 微软自身的HLSL这款小菜也用过，感觉不是很好用。 放大镜实现的思路其实很简单。分步拆解我们先来考虑围绕鼠标点击做缩放。 shade...
OpenGL+Deferred Shading实现放大镜
12-12
用OpenGL+Deferred Shading实现放大镜的效果
OpenGl放大镜实现
12-04
编程实现放大镜功能，用OpenGL实现！ 本程序只是介绍利用OpenGL实现放大镜的一种方法! 有具体的演示程序！ 放大镜跟随鼠标一起移动！ 操作： 'o': 开启/关闭 放大镜功能！ m/n: 扩大/缩小 放大倍数！
用JS实现放大镜特效
05-01
NULL 博文链接：https://1017401036.iteye.com/blog/2400734
opengl glsl 延迟渲染 shader 放大镜效果
07-26
opengl glsl 延迟渲染 shader 放大镜效果
OpenGL 放大镜
01-02
帧缓存+裁剪实现的简单OpenGL内部放大镜（程序+源码，未使用glsl,代码风格不怎么好，谨慎下载) vs2010下运行无误，内含详细说明。
php图片放大镜,图片放大镜效果
weixin_30578645的博客
03-29 92
摘要：html>图片放大效果jq图片放大效果jqbody{margin:0;padding:0;}body>div{float:left;width:450px;height:450px;border:1pxsolid#999;overflow:hidden;margin:20px20px;border-radius:3px;box-shadow:1px0px6px...
Unity Shader - 放大镜
长生但酒狂的博客
04-08 3526
前言 今天闲来无事，实现了一个简单的放大镜特效。 效果图如下： 思路 思路其实很简单，大致分为两个步骤： 先实现整体放大效果； 最后在一定范围内放大（这里是圆） 既然是放大镜,那也就是对图像的处理, 这里我们就需要用到后期处理了， 在Camera上面挂一个c#脚本来捕获需要渲染的图像，然后通过shader处理后渲染。 实现 1.首先我们来实现一下整体放大的效果： 思路非常简单：沿着 中心点到...
放大镜效果的实现
weixin_41897680的博客
09-16 752
前言 最近在网上发现了一个放大镜效果，感觉很有意思。最终在b站找到了实现的教程。教程作者 xiao-high 教程链接点此查看 视频教程是基于html、css、js进行制作的。代码是我跟着教程手敲的。后期我会更新vue版和react版。 效果图 原生版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
unity 实现放大镜效果代码
02-26
下面是使用 Unity 实现放大镜效果的代码示例： ```csharp using UnityEngine; public class MagnifyingGlass : MonoBehaviour { public float magnification = 2.0f; // 放大镜的放大倍数 public float radius =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值