<!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. Linux关闭休眠和屏保模式

    本人因为特殊需求,想让某台Linux主机始终显示某个程序,显示器不能关机或者休眠或进入屏保模式. 环境:Ubuntu 11.10 最小化模式安装并安装有轻量级桌面openbox(非gnome).因为X ...

  2. 网站部署后Parser Error Message: Could not load type 的解决方案

    asp.net 的Webproject 项目是在64bit机上开发,默认选项发布后,部署到32bit的服务器上,出现Parser Error Message: Could not load type的 ...

  3. Js表单Submit问题

    一般在submit前,会用js查核是否满足提交标准,如下: function doSubmit(){ if(doucument.getElementbyId("myID") ==& ...

  4. Javascript备忘模式

    使用备忘模式,利用了函数的自定义属性,先看一个例子 var test = function (){} test.myAttr = "attr"; 这样,就给test加上了一个自定义 ...

  5. yii 基础版用rbac-plus

    1.将高级版的common/models/user.php覆盖掉基础版的models/user.php 2.将命名空间 namespace common\models;改为 namespace app ...

  6. 为 mysql 数据表添加主键

    DROP TABLE IF EXISTS `sdo_actData`.`actCDKey`; CREATE TABLE `sdo_actData`.`actCDKey` ( `RoleID` ) ' ...

  7. 模块加载----Webpack

    一.配合gulp编译sass与压缩js 1.安装node.js 2.全局安装webpack 打开npm窗口执行 npm install webpack –g 3. 在项目中使用webpack 使用np ...

  8. Maven-001-初识及本地环境配置

    前段时间想对自己之前写的一些代码或者小工具,因为写的比较乱,因而想系统的管理一下自己学习 Java 时写的源码,经过多方请教.网上查询,最终决定使用 Maven 来管理自己写的代码. Maven 是一 ...

  9. django for monkey(chapter one)

    一.获取设备驱动 class monkey(object): def get_devices(self): self.a = os.popen('adb devices') self.devices ...

  10. 怎样实现excel隔行隔列变色效果的方法

    大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...