实现图片局部放大_放大镜效果

最新推荐文章于 2024-06-16 08:25:50 发布
最新推荐文章于 2024-06-16 08:25:50 发布
阅读量7.1k 收藏 1
点赞数
文章标签： function div border iframe css null

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript实现图片局部放大_放大镜效果</title>
<style type="text/css">
#magnifier{
width:342px;
height:420px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1px solid #000;
}
#img{
width:342px;
height:420px;
}
#Browser{
border:1px solid #000;
z-index:100;
position:absolute;
background:#555;
}
#mag{
border:1px solid #000;
overflow:hidden;
z-index:100;
}
</style>
<script type="text/javascript">
function getEventObject(W3CEvent) {//事件标准化函数
return W3CEvent || window.event;
}
function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

return { 'x':x,'y':y };
}
function setOpacity(elem,level) {//兼容浏览器设置透明值
if(elem.filters) {
  elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} else {
  elem.style.opacity = level;
}
}
function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
for(var i in prop) {
  if(i == 'opacity') {
   setOpacity(elem,prop[i]);
  } else {
   elem.style[i] = prop[i];
  }
}
return elem;
}
var magnifier = {
m : null,

init:function(magni){
  var m = this.m = magni || {
   cont : null, //装载原始图像的div
   img : null, //放大的图像
   mag : null, //放大框
   scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
  }

  css(m.img,{
   'position' : 'absolute',
   'width' : (m.cont.clientWidth * m.scale) + 'px',    //原始图像的宽*比例值
   'height' : (m.cont.clientHeight * m.scale) + 'px'    //原始图像的高*比例值
   })

  css(m.mag,{
   'display' : 'none',
   'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
   'height' : m.cont.clientHeight + 'px',
   'position' : 'absolute',
   'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置为原始图像的右方远10px
   'top' : m.cont.offsetTop + 'px'
   })

  var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth;  //获取border的宽

  css(m.cont.getElementsByTagName('div')[0],{   //m.cont.getElementsByTagName('div')[0]为浏览框
   'display' : 'none',        //开始设置为不可见
   'width' : m.cont.clientWidth / m.scale - borderWid + 'px',   //原始图片的宽/比例值 - border的宽度
   'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高/比例值 - border的宽度
   'opacity' : 0.5//设置透明度
   })

  m.img.src = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像
  m.cont.style.cursor = 'crosshair';

  m.cont.onmouseover = magnifier.start;

},

start:function(e){

  if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
   magnifier.createIframe(magnifier.m.img);
  }

  this.onmousemove = magnifier.move;//this指向m.cont
  this.onmouseout = magnifier.end;
},

move:function(e){
  var pos = getPointerPosition(e);  //事件标准化

  this.getElementsByTagName('div')[0].style.display = '';

  css(this.getElementsByTagName('div')[0],{
   'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px',
   'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px'   //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
   })

  magnifier.m.mag.style.display = '';

  css(magnifier.m.img,{
   'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
   'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
   })

},

end:function(e){
  this.getElementsByTagName('div')[0].style.display = 'none';
  magnifier.removeIframe(magnifier.m.img);  //销毁iframe

  magnifier.m.mag.style.display = 'none';
},

createIframe:function(elem){
  var layer = document.createElement('iframe');
  layer.tabIndex = '-1';
  layer.src = 'javascript:false;';
  elem.parentNode.appendChild(layer);

  layer.style.width = elem.offsetWidth + 'px';
  layer.style.height = elem.offsetHeight + 'px';
},

removeIframe:function(elem){
  var layers = elem.parentNode.getElementsByTagName('iframe');
  while(layers.length >0){
   layers[0].parentNode.removeChild(layers[0]);
  }
}
}
window.onload = function(){
magnifier.init({
       cont : document.getElementById('magnifier'),
       img : document.getElementById('magnifierImg'),
       mag : document.getElementById('mag'),
       scale : 3
       });
}
</SCRIPT>
</head>
<body>
    <div id="magnifier">
        <img src="http://www.newxing.com/Tech/UploadPic/2010-4/20104162224613075.jpg" id="img" />
        <div id="Browser">
        </div>
    </div>
    <div id="mag">
        <img id="magnifierImg" />
    </div>
    <select style="position:absolute;top:200px;left:650px;width:100px;">
        <option>select测试</option>
        <option>是否能覆盖</option>
    </select>
</body>
</html>

qtvb1987
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VB.net PictureBox滚轮局部放大图片
09-27
本源码使用PictureBox控件实现图片的局部放大浏览功能，效果类似淘宝网站的图片局部放大浏览，通过鼠标悬浮查看局部大图，同时扩展了鼠标滚轮放大缩小功能。经VS2010 VB调试成功可用，欢迎用来学习和研究。
图片的局部放大（放大镜效果）
09-19
图片的局部放大（放大镜效果）,基于jquery，使用非常简单，上手很容易。效果炫酷，与淘宝上图片放大的效果一样鼠标悬停，将图片局部放大显示
PySide(PyQt)实现鼠标画框局部放大
最新发布
xulibo5828的博客
06-16 727
按住鼠标左键画框，裁切画面并局部放大，可以用来生成ROI。
Unity鼠标滑过，图片局部放大效果
05-29
Unity中鼠标滑过，图片局部放大效果，像淘宝上商品详细的效果
利用OpenGL 实现图形的局部放大
03-07
利用OpenGL 实现图形的局部放大，PDF版论文。
图片局部放大
weixin_42773941的博客
08-29 2216
实现鼠标移到图片上可以实现局部放大的效果 实现原理 实际上不是局部放大，而是有两张图片，一张大的和一张小。 小的图片就是样本，而大的图片就是所谓的放大所看见的图。 通过判断鼠标位置来显示大图片的局部位置，来实现图片放大的效果。 步骤 首先是布局，在这里布局我就不细说了， 大致就是将小图片展示出来，大图片隐藏起来， 然后将大图片外层的div加一个超出部分隐藏， 然后用脚...
jQuery实现图片局部放大镜效果
10-18
首先，实现图片局部放大镜效果的关键在于创建两个元素：一个是原始图片（主图），另一个是用于放大的预览区域（通常称为放大镜）。当用户鼠标悬停在主图上时，预览区域会显示鼠标指针下的局部放大图像。 1. **CSS...
magnify_matlab_图像局部放大_图片放大_
10-01
标题“magnify_matlab_图像局部放大_图片放大_”所指的就是利用MATLAB实现图像的局部放大功能。这个功能允许用户在图像的特定区域进行缩放，以便于研究细节。描述中提到的“通过鼠标和键盘控制”，意味着该功能具有...
jquery图片局部放大镜特效.rar
12-31
"jQuery图片局部放大镜特效"是利用JavaScript库jQuery实现的一种高效、便捷的交互效果。在本案例中，我们将深入探讨这个主题，包括jQuery的基础知识，图片放大镜的原理，以及如何使用jQuery来实现这样的特效。 首先...
QWT--图形框选局部放大
贝勒里恩的博客
10-13 1982
源码之下，没有秘密，推荐阅读源码学习！ 链接：https://pan.baidu.com/s/1zlXTTQhD92X8G6PjDwf_Ag 提取码：jmpq 一、分析 绘制好图形之后，如果有些我们关注的点不好分析，可能就需要局部放大，将我们关注的点所在区域进行局部放大。QWT库提供了QwtPlotZoomer类用于实现该操作，可以把它理解为一个栈，里面存放着我们框选的矩形，可以通过调整遍历栈的方向实现前进、后退操作。 二、效果展示 三、具体操作 plot_zoomer = new QwtPlot.
vb实现图片放大缩小鼠标拖放滚轮缩放
03-13
vb 用picturebox实现图片放大缩小鼠标拖放滚轮缩放 这个测试程序满足基本要求,如有更高的要求可61303072qq联系本人 （滚轮是需要按住ctrl键然后按鼠标滚轮就可以了。可以在代码里屏蔽ctrl键的判断）
图片局部放大（仿淘宝）
06-03
鼠标移动到图片局部位置放大
鼠标移动图片局部放大
09-04
鼠标移动到图片的某个位置，图片局部放大!
屏幕放大镜demo（模仿截图的局部放大）
07-13
这是一个简单的屏幕放大镜的DEMO ，是模仿截图时的局部方法开发的。
css3实现图片放大并半透明
10-06
纯css3实现鼠标滑过图片放大并半透明，而且还有文字显示。
Qt使用paintevent事件绘制图像（可进行缩放且能够局部放大）
家俊的博客
10-15 3204
首先感谢五里之南大佬对我的帮助 话不多说，直接上代码 .h文件 #ifndef LOCALSCALEWIDGET_H #define LOCALSCALEWIDGET_H #include <QWidget> #include <QPaintEvent> #include <QImage> class LocalScaleWidget : public QWidget { Q_OBJECT public: LocalScaleWidget(QWidg
qt鼠标悬停图片放大_20.QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
weixin_32712183的博客
02-21 368
#include "widget.h"Widget::Widget():BigButton("放大",this),LittleButton("缩小",this),LiftButton("向左",this),RightButton("向右",this),UpButton("向上",this),DownButton("向下",this),Paint(10,10,810,810),Alloffset(0...
用纯css写图片局部放大镜效果的代码。
04-06
以下是用纯CSS实现图片局部放大镜效果的代码： HTML结构： ```html <div class="image-container"> <img src="your-image.jpg" alt="your-image"> <div class="magnifying-glass"></div> </div> ``` CSS样式： ```css .image-container { position: relative; width: 400px; height: 300px; margin: 0 auto; } img { width: 100%; height: 100%; display: block; } .magnifying-glass { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #fff; background: rgba(0, 0, 0, 0.5) url(your-image.jpg) no-repeat; background-size: 800px 600px; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 1; } .image-container:hover .magnifying-glass { opacity: 1; pointer-events: auto; } .image-container:hover .magnifying-glass:before { content: ""; position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .image-container:hover .magnifying-glass:after { content: ""; position: absolute; width: 6px; height: 6px; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); } ``` 说明： - `.image-container`类设置了一个相对定位的容器，用于包含图像和放大镜。 - `img`元素设置了宽度和高度为100%，以填充整个容器。 - `.magnifying-glass`类设置了一个绝对定位的元素，作为放大镜。它有一个150px的宽度和高度，设置了圆形边框和背景图像。 - 在`.magnifying-glass`的背景属性中，我们设置了图像的URL和no-repeat属性，以防止图像在放大镜中重复显示。我们还设置了`background-size`属性，使图像在放大镜中缩放到正确的大小。 - `.magnifying-glass`的不透明度为0，鼠标移动到`.image-container`上时会发生变化。我们还禁用了指针事件，以防止放大镜遮挡图像。 - 使用:hover选择器，当鼠标移动到`.image-container`上时，放大镜的不透明度变为1，指针事件启用。 - 我们还添加了一个:before伪元素，在放大镜中心绘制一个白色圆形。 - 最后，我们添加了一个:after伪元素，在放大镜中心绘制一个小白点，用于显示鼠标所指的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值