<!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. [LeetCode] Word Break II (TLE)

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  2. Linux 端口-> PID -> 启动目录

    1.    lsof -i :8443   找到PID 比如说是5413 2.    ps aux | grep 5413  可以得到一些信息 3.    除了第二步的方式,更直观的是 cd /pro ...

  3. [Eclipse][SVN] 在eclipse上安装SVN

    以前装过好多次SVN,始终没有一次把安装过程记录下来,这次新装机器,安装SVN插件时一波三折,记录下来免得以后又忘记了.   方法一: 1. 直接通过后台添加URL通过互联网进行安装,直接上图: 2. ...

  4. 跟着鸟哥学Linux系列笔记1

    跟着鸟哥学Linux系列笔记0-扫盲之概念 跟着鸟哥学Linux系列笔记0-如何解决问题 装完linux之后,接下来一步就是进行相关命令的学习了 第五章:首次登录与在线求助man page 1. X ...

  5. ServerSocket 默认邦定IP

    转自:http://cuisuqiang.iteye.com/blog/2037769 开发中需要开启服务端的时候,本地测试都是直接写端口,实际环境也是需要指定要邦定的IP才可以. 因为对于服务器来说 ...

  6. 11g新特性-如何禁用自动统计信息收集作业

    一.11g中auto stats gather job被集成到了auto task中. SQL> select client_name,status from DBA_AUTOTASK_CLIE ...

  7. 借助mosquitto“实时”远程监控服务器数据库运行状态

    公司的项目还处于开发阶段,我把整个后台服务临时放在阿里云上供前端测试,用的阿里云的ECS云服务器,HTTP请求服务器和数据库服务都安装在一台机子上(穷啊,凑合用),做测试用,配置相当低:单核1Gb.其 ...

  8. csc.rsp Invent by Microshaoft

    # This file contains command-line options that the C# # command line compiler (CSC) will process as ...

  9. 用计算器计算“异或CRC”

    再计算器上输入以下数字,每输入一个数字,按一下“Xor”

  10. JS 捕获 input 中 键盘按键

    JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...