<!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 中的一些关于时间的操作【转】

    1.时间对象和一些简单操作函数 var myDate = new Date(); myDate.getYear();       //获取当前年份(2位) myDate.getFullYear(); ...

  2. 创造tips的秘籍——PHP回调后门

    作者:Phithon 原文连接:https://www.leavesongs.com/PENETRATION/php-callback-backdoor.html 最近很多人分享一些过狗过盾的一句话, ...

  3. Learn ZYNQ Programming(1)

    GPIO LED AND KEY: part1:gpio leds and gpio btns combination. (include 1~4) part2:use gpio btns inter ...

  4. Openfire 的安装和配置

    1. 下载最新的openfire安装文件 官方下载站点:http://www.igniterealtime.org/downloads/index.jsp#openfire 下载地址: Exe:htt ...

  5. javaWeb中servlet开发(3)——Servlet生命周期

    生命周期:是一个程序的存在周期,servlet由于是受容器的管理,所以容器来决定其生命周期 1.servlet生命周期 2.servlet生命周期对应的方法 3.servlet生命周期代码 publi ...

  6. EntityFramework code first 一些常用的约束特性

    参阅: https://msdn.microsoft.com/zh-cn/data/jj591583 1. 主键 public class Test { //名称为 ID 的属性会自动映射为主键(自增 ...

  7. cucumber learning : http://www.cnblogs.com/puresoul/category/340832.html

    link Generate cucumber report by json website Sample as json file for cucumber report: [ { "key ...

  8. ES6 module export options 模块导出、导入语法

    http://stackoverflow.com/questions/25494365/es6-module-export-options A year and some later, here is ...

  9. 《Linux内核设计与实现》CHAPTER18阅读梳理

    <Linux内核设计与实现>CHAPTER18阅读梳理 [学习时间:2hours] [学习内容:bug的来源分析:bug调试途径] 一.bug来源 1.内核中的bug 内核中的bug表现得 ...

  10. 【C++】类型转换（学习笔记）

    1. 隐式类型转换,相关联的类型(e.g.int vs double)之间可以发生隐式类型转换. 比如,在条件中,非布尔类型转为布尔类型: 初始化时,初始值变为变量类型: 赋值时,右值变成左侧的类型: ...