<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding:0;}
#small{
width:350px;
height:350px;
border:1px solid #000;
position:relative;
float: left;
margin-right: 20px;

}
#big img{
position: absolute;
}
#mask{
display: block;
width:50px;
height:50px;
opacity:0.5;
background: red;
display: none;
position: absolute;
left:0;
top:0;
}
#big{
width:350px;
height:350px;
float:left;
border:1px solid #000;
overflow: hidden;
display: none;
position: relative;
}
</style>
<script>
window.onload=function(){
var oSmall=document.getElementById('small');
var oMask=document.getElementById('mask');
var oBig=document.getElementById('big');
var oImg=document.getElementById('bigimg');
oSmall.onmouseover=function(){
oMask.style.display='block';
oBig.style.display='block';
};
oSmall.onmouseout=function(){
oMask.style.display='none';
oBig.style.display='none';
};
oSmall.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - oMask.offsetWidth/2;
var t = oEvent.clientY - oMask.offsetHeight/2;
if(l < 0){
l= 0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l = oSmall.offsetWidth - oMask.offsetWidth;
}
if(t < 0){
t = 0;
}else if(t >oSmall.offsetHeight - oMask.offsetHeight){
t = oSmall.offsetHeight - oMask.offsetHeight;
}
oMask.style.left = l + 'px';
oMask.style.top = t + 'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';

}
oSmall.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-oMask.offsetWidth/2;
var t=oEvent.clientY-oMask.offsetHeight/2;
if(l<0){
l=0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l=oSmall.offsetWidth-oMask.offsetWidth;
}
if(t<0){
t=0;
}else if(t>oSmall.offsetHeight-oMask.offsetHeight){
t=oSmall.offsetHeight-oMask.offsetHeight;
}
oMask.style.left=l+'px';
oMask.style.top=t+'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/s.jpg" alt=""/>
<span id="mask"></span>
</div>
<div id="big">
<img src="img/b.jpg" alt="" id="bigimg"/>
</div>

</body>
</html>

js的小效果-图片放大镜效果的更多相关文章

  1. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  2. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  3. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. canvas知识02：图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

  9. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

随机推荐

  1. 《图形学》实验四：中点Bresenham算法画直线

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h& ...

  2. 解决css样式被内置样式覆盖的问题

    .preImg { height:400px !important } <img id="preImg" class="preImg" style=&qu ...

  3. tornado使用（Mac）

    安装需求 Tornado 在 Python 2.5, 2.6, 2.7 中都经过了测试.要使用 Tornado 的所有功能,你需要安装 PycURL (7.18.2 或更高版本) 以及 simplej ...

  4. WCF消息拦截，利用消息拦截做身份验证服务

    本文参考  http://blog.csdn.net/tcjiaan/article/details/8274493  博客而写 添加对信息处理的类 /// <summary> /// 消 ...

  5. phpcms标签使用 —— 系统常量

    以下系统常量全局可用 1 2 3 4 5 6 7 8 9 10 11 12 13 CACHE_PATH 缓存文件夹地址 SITE_PROTOCOL 主机协议 SITE_URL 当前访问的主机名 HTT ...

  6. 利用IdentityServer3在ASP.NET 5和Angular中实现OAuth2 Implicit Flow

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过的IdentityServer3虽然是基于Katana开发的,不过同样可以托 ...

  7. SQL Server 2016将内置R语言？

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:随着大数据成为一个BuzzWord,和大数据相关的技术也变得越来越火热,其中就包括R语 ...

  8. 设置SecureCRT会话的缓冲区大小

    转自:http://blog.csdn.net/imxiangzi/article/details/7457703 在使用SecureCRT操作设备时,默认的回滚行数为500行.可以通过打开[选项]- ...

  9. Java Security: Illegal key size or default parameters?

    来自:http://stackoverflow.com/questions/6481627/java-security-illegal-key-size-or-default-parameters I ...

  10. HTML5头部标签备忘

    DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...