js原生放大镜

<!DOCTYPE html>

<html>

<head>

    <title>放大镜</title>

    <meta charset="utf-8">

    <style type="text/css">

        *{

            margin: 0px;

            padding: 0px;

        }

        body{

            width: 960px;

            margin:40px auto;

        }

        #small{

            width: 300px;

            height: 200px;

            border:1px solid #eee;

            border-radius: 4px;

            position: relative;

        }

        #small img{

            width: %;

            height: %;

        }

        div    {

            float: left;

            margin-right: 10px;

        }

        #big{

            width: 300px;

            height: 200px;

            overflow: hidden;

            position: relative;

            border:1px solid #eee;

            border-radius: 4px;

            display: none;

        }

        #look_girl{

            position: absolute;

            left: 0px;

            top:0px;

        }

        #move{

            width: 100px;

            height: 100px;

            background:#;

            opacity: .;

            position: absolute;

            display: none;

            left: 0px;

            top: 0px;

        }

    </style>

</head>

<body>

    <div id="small">

        <img src="1.png">

        <p id="move"></p>

    </div>

    <div id="big">

        <img src="1.png" id="look_girl">

    </div>

</body>

<script type="text/javascript">

    var move = document.getElementById('move');

    var small = document.getElementById('small');

    var big = document.getElementById('big');

    var look_girl = document.getElementById('look_girl');

    small.onmousemove = function(event){

        event = event || window.event;

        this.style.cursor = 'move';

        // 计算move移动块的left值

        var move_left = event.clientX - this.offsetLeft - move.offsetWidth/;

        // 计算move移动块的top值

        var move_top = event.clientY - this.offsetTop - move.offsetHeight/;

        // 超出左边界赋值为0

        move_left = move_left <  ?  : move_left;

        // 超出右边界赋值为盒子宽度-移动块的宽度

        move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;

        // 超出上边界赋值为0

        move_top = move_top <  ?  : move_top;

        // 超出下边界赋值为盒子高度-移动块高度

        move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;

        // 修改移动块left、top值

        move.style.left = move_left + 'px';

        move.style.top = move_top + 'px';

        /*

            计算图片需要移动的坐标

            距离左边left    图片宽度      盒子宽度          距离左边left    图片宽度           盒子宽度

            big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);

            big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);

        */

        var big_x = move_left/(small.offsetWidth-move.offsetWidth) * (look_girl.offsetWidth-big.offsetWidth);

        var big_y = move_top/(small.offsetHeight-move.offsetHeight) * (look_girl.offsetHeight-big.offsetHeight);

        // 修改图片定位

        look_girl.style.left = -big_x + 'px';

        look_girl.style.top = -big_y + 'px';

    }

    small.onmouseover = function(){

        move.style.display = 'block';

        big.style.display = 'block';

    }

    small.onmouseout = function(){

        move.style.display = 'none';

        big.style.display = 'none';

    }

</script>

</html>
方法二更好

js放大镜代码的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  3. 网络问卷调查js实现代码

    昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...

  4. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  5. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  8. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  9. ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

随机推荐

  1. 使用 nw-builder 构建跨平台桌面应用程序

    NW.js 是一个使用 Web 技术创建本地应用的框架,如 HTML.JavaScript 和 CSS.简单地说,当你在使用普通的流程开发一个 Web 应用时,开发完成后,运行一个生成器,将所有东西编 ...

  2. Binlog中最容易踩到的坑

    MySQL高可用架构中,主库复制是非常常见的一种. 当主库宕机后,可以提升一个从库作为新的主库,保证服务可用性:同时可以通过扩展从库,提高整个集群的QPS. 在主从复制架构下,MySQL通过binlo ...

  3. UVa 10697 - Firemen barracks

    题目:已知三点.求到三点距离同样的点. 分析:计算几何.分三类情况讨论: 1.三点共线,不成立. 2.多点重叠,有多组解. 3.是三角形,输出中点. 说明:注意绝对值小于0.05的按0计算:负数的四舍 ...

  4. hdu 1879 继续通畅工程(最小生成树)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1879 /************************************************* ...

  5. python-计算数据的相关性

    先解释下什么叫数据的相关性: 计算两个数组的平均值,如果两个数组中的两个值都大于平均值或者都小于平均值,则得到true. 如果一个大于平均值一个小于平均值,则得到false.最后计算true和fals ...

  6. vim学习笔记（9）：vim显示文件名

    如何让vim在编辑模式下显示文件名 在根目录下:~/.vimrc 中追加一行: set laststatus=2 shell 下执行命令: echo "set laststatus=2&qu ...

  7. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  8. csv和excel互转

    Python csv转换为excel学习笔记: openpyxl模块需要安装pip install openpyxl import openpyxl import csv '''读取csv文件写入ex ...

  9. 第一个驱动之字符设备驱动（二）mdev

    mdev是busybox提供的一个工具,用在嵌入式系统中,相当于简化版的udev,作用是在系统启动和热插拔或动态加载驱动程序时, 自动创建设备节点.文件系统中的/dev目录下的设备节点都是由mdev创 ...

  10. Inner Functions - What Are They Good For?

    Referece: https://realpython.com/blog/python/inner-functions-what-are-they-good-for/ Let’s look at t ...