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. 记一次docker问题定位(perf，iostat等性能分析)

    背景 最近参与的项目是基于 OpenStack 提供容器管理能力,丰富公司 IaaS 平台的能力.日常主要工作就是在开源的 novadocker 项目(开源社区已停止开发)基础上进行增强,与公司的其他 ...

  2. HTML5学习笔记（十四）：变量作用域

    在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量: function foo() { var x ...

  3. 菜鸟学SSH（一）——Struts实现简单登录（附源码）

    从今天开始,一起跟各位聊聊java的三大框架——SSH.先从Struts开始说起,Struts对MVC进行了很好的封装,使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时 ...

  4. .NET+MVC+Alipay的Sdk版单笔转账到支付宝账户接口

    public class AliPayController : Controller { // GET: AliPay public ActionResult Index() { return Red ...

  5. Mysql 管理和备份

    mysqladmin用于管理MySQL服务器的客户端,mysqladmin执行管理操作的客户程序,可以用它来创建或删除数据库,重载授权表,将表刷新到硬盘上,以及重新打开日志文件,检索版本.进程,以及服 ...

  6. 每日英语：Booming Tech Sector Redraws the Map

    China's high-tech companies have made their mark on the nation's economy. Now, with growing cash and ...

  7. Kafka 协议实现中的内存优化【转】

    Kafka 协议实现中的内存优化   Jusfr 原创,转载请注明来自博客园 Request 与 Response 的响应格式 Request 与 Response 都是以 长度+内容 形式描述, 见 ...

  8. nginx源码分析：打开监听套接字的流程

    问题源于在分析nginx的源码时,找了半天没有找到nginx是怎么把监听套接字读事件添加到事件循环中的,后经过仔细的分析,终于搞明白,于是记录一下. 在上一篇module机制中介绍了nginx添加mo ...

  9. LeetCode: Jump Game Total 解题报告

    Jump GameGiven an array of non-negative integers, you are initially positioned at the first index of ...

  10. Docker考前突击

    dockerfile 介绍 镜像(Image)     容器(Container)     仓库(Repository)