<!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通过时区获取时间

    /* 描述:时区的换算 参数:offset时区位置 使用:东八区calcTime(”+8"); */ function calcTime(offset) { // 创建一个本地日期 var ...

  2. imac上php环境php＋apache＋mysql

    ---恢复内容开始--- Mac OS X系统已预装集成了Apache+php,但是在新的系统中苹果取消了图形界面,所以只能从命令行开启了. 启用apache: 打开终端 在终端中可以查看集成的php ...

  3. 二叉树-二叉查找树-AVL树-遍历

    一.二叉树 定义:每个节点都不能有多于两个的儿子的树. 二叉树节点声明: struct treeNode { elementType element; treeNode * left; treeNod ...

  4. Web前端开发基础 第二天（各类标签）

    认识标签(第二部分): <ul> <li>信息</li> <li>信息</li> ...... </ul> <ol> ...

  5. JSP Standard Tag Library JSP标准标签库

    了解了基本的标签的底层实现,可以看系统定义的强大的标准标签 1.首先引入两个jar包 2.基本语法 <%@ taglib prefix="c" uri="http: ...

  6. php基础篇-二维数组排序 array_multisort

    原文:php基础篇-二维数组排序 array_multisort 对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(a ...

  7. JS-011-颜色进制转换（RGB转16进制；16进制转RGB）

    在网页开发的时候,经常需要进行颜色设置,因而经常需要遇到进行颜色进制转换的问题,例如:RGB转16进制:16进制转RGB),前几天在测试的时候,发现网站的颜色进制转换某类16进制颜色(例如:#0000 ...

  8. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. C#基础知识大杂烩

    这样是调用父类中第二个有参的构造函数,如果去掉Base默认调用无参构造函数 注意执行顺序是:先调用父类的构造函数,然后再执行子类自己的构造函数. 父类: class Person { public P ...

  10. RDIFramework.NET ━ 9.15 个性化设置 ━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.15  个性化设置 -Web部分 个性化设置,主要针对用户的偏好对界面进行设置,主界面如下: 9.15.1界面皮肤设置 目前框 ...