<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#small {
    width: 300px;
    height:300px;
    border: #000 1px solid;
    float:left;
    position: relative;
}
#small img {
    width: 300px;
    height: 300px;
}

#small span {
    display: block;
    width: 120px;
    height: 120px;
    background: red;
    opacity: .5;
    border: #333 1px solid;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

#big {
    width: 300px;
    height: 300px;
    border: #000 1px solid;
    float: left;
    margin-left: 20px;
    overflow: hidden;
    position: relative;
    display: none;
}

#big img {
    position: absolute;
}
</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';
    }
}
</script>
</head>

<body>
<div id="small">
    <img src="s.jpg" alt=""/>
    <span id="mask"></span>
</div>
<div id="big">
    <img src="b.jpg" alt="" id="bigimg"/>
</div>
</body>
</html>

js图片放大镜的更多相关文章

  1. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  2. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  3. js 图片放大镜功能

    原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2)          鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始 ...

  4. js图片放大镜特效代码

    <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var b ...

  5. js图片放大镜 可动态更换图片

    现仅已.NET为例,HTML代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > & ...

  6. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

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

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

  8. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  9. JS实现图片放大镜

    将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容.需要实现的效果如下: 基本实现思路为:右侧大盒子为一个可视 ...

随机推荐

  1. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  2. bzoj3732: Network--kruskal最小生成树+LCA

    这是一道写起来比较顺手的题目 没有各种奇怪的细节,基本就是Kruskal和倍增LCA的模板.. 题目大意:对于一个无向带权图,询问两点之间一条路,使得这条路上的最长边最小,输出最小最长边的的值 那么既 ...

  3. array_reduce方法用回调函数迭代地将对数组的值进行操作

    在处理php数组的时候,有一种需求特别的频繁,如下二维数组: $arr = array( 1=>array( 'id' => 5, 'name' => '张三' ), 2=>a ...

  4. 一款名為com.apple.pcapd的服務

    一款名為com.apple.pcapd的服務,通過libpcap網路數據包捕獲函數包捕獲流入和流出iOS設備的HTTP數據.據紮德爾斯基稱,這一服務在所有iOS設備上都是默認啟動的,能被用來在用戶不知 ...

  5. BizTalk开发系列(二十三) BizTalk性能指标参考

    BizTalk项目目前比较少,使用的客户也不多.大多只知道BizTalk是一个不错的产品,是Microsoft SOA平台的核心产品,不过还没有将其应用到生产环境.还有一些客户对BizTalk的性能不 ...

  6. 利用Columnal网格系统快速搭建网站的基本布局结构

    1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...

  7. where过滤字句

    无条件为真 为假 别名不能直接用来当做查询来用 只能如此 下面这些语句是可以使用的,使用的是排序规则

  8. Opensuse enable sound and mic card

    Install application pavucontrol Run pavucontrol You will see the configuration about sound card and ...

  9. Hibernate @Formula

    在使用Hibernate时经常会遇到实体类某个字段存的是code值而非我们最终想要的中文具体显示的值, 如果使用Hibernate的一对一关联这种,一个属性还好说,但是如果一个实体类里有多个字段都是需 ...

  10. iOS逆传值的三种方式

    1.代理 2.block 2.通知中心