<!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. 一段能导致火狐、谷歌Safari浏览器崩溃，甚至让iPhone重启的代码

    JavaScript代码,能导致火狐.谷歌Safari浏览器崩溃,甚至让iPhone重启 <html> <body> <script> var total = &q ...

  2. spring框架和junit框架结合使用案例

    package ltssh; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.be ...

  3. vpn分类[转]

    目前常用的几种移动拨号的VPN技术及优势和劣势1)                WEB SSL优点:1.使用简单:每个终端用户不需要安装客户端,使用起来方便,不需要维护终端用户,通过IE直接来访问. ...

  4. Minimum no. of iterations to pass information to all nodes in the tree

    Given a very large n-ary tree. Where the root node has some information which it wants to pass to al ...

  5. chmod() has been disabled for security reasons

    最近用 codeigniter 写一个小系统,引用了session 库,codeigniter默认的session存储方式为files.鉴于安全性,文件即肯定涉及到权限问题. 在类 UNIX 操作系统 ...

  6. Boyer-Moore algorithm

    http://www-igm.univ-mlv.fr/~lecroq/string/node14.html Main features performs the comparisons from ri ...

  7. dubbo 试用全过程

    概述: dubbo服务容器是一个standalone的启动程序,因为后台服务不需要Tomcat或JBoss等Web容器的功能,如果硬要用Web容器去加载服务提供方,增加复杂性,也浪费资源. 服务容器只 ...

  8. 【Composer】实战操作二：自己创建composer包并提交

    大纲 创建自己的composer库 提交到指定平台 测试安装自己的库 设置composer平台自动更新 如何方便测试自己开发的库 开始动手 创建自己的composer库 个人博客后台有一部分是关于统计 ...

  9. Java-马士兵设计模式学习笔记-代理模式-动态代理 调用Proxy.newProxyInstance()

    一.概述 1.目标:不自己写代理类,利用Proxy.newProxyInstance()动态生成 2.用到的知识点: (1)//编译源码,生成class,注意编译环境要换成jdk才有compiler, ...

  10. php--数组函数array

    1.array_combine array_combine是一种函数,通过合并两个数组来创建一个新数组,其中的一个数组是键名,另一个数组的值为键值.如果其中一个数组为空,或者两个数组的元素个数不同,则 ...