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. RHEL7 富规则删除

    1. 查看已经创建好的富规则 firewall-cmd --list-rich-rules 2. 删除富规则(******代表已经创建好的完整富规则内容) firewall-cmd --remove- ...

  2. raise EnvironmentError("%s not found" % (mysql_config.path,)) EnvironmentError: mysql_config not found 解决办法

    报错信息如下: Downloading https://pypi.tuna.tsinghua.edu.cn/packages/a5/e9/51b544da85a36a68debe7a7091f068d ...

  3. 模拟 SQLSERVER 死锁

    环境: sqlserver 2008   事务(进程 ID (n))与另一个进程被死锁在锁资源上,并且已被选作死锁牺牲品.请重新运行   死锁原理: 如两个任务 任务1,已经锁定R1,再进行请求R2& ...

  4. Spark SQL编程指南（Python）【转】

    转自:http://www.cnblogs.com/yurunmiao/p/4685310.html 前言   Spark SQL允许我们在Spark环境中使用SQL或者Hive SQL执行关系型查询 ...

  5. 【Linux技术】ubuntu常用命令

    查看软件xxx安装内容:dpkg -L xxx查找软件库中的软件:apt-cache search 正则表达式查找软件库中的软件:aptitude search 软件包查找文件属于哪个包:dpkg - ...

  6. mysql关联更新update

    https://blog.csdn.net/babyfish13/article/details/78082844 ****************************************** ...

  7. RelativeLayout.LayoutParams

    通过id设置相对兄弟元素对齐. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  8. java基础篇---文件上传(smartupload组件)

    文件上传几乎是所有网站都具有的功能,用户可以将文件上传到服务器的指定文件夹中,也可以保存在数据库中,本篇主要说明smartupload组件上传. 在讲解smartupload上传前,我们先来看看不使用 ...

  9. Android 面试知识集1

    今晚在复习Android基础的时候,找到了一些很有价值的基础知识,分享给给位Android的开发者.这些是基础知识,同时也可以当做面试准备.面试题其实是很好的基础知识学习,有空会好好整理相关基础知识. ...

  10. java中的元数据

    java中的Annotation和C#中的Attribute相似. 写法上差别较大 @Target(ElementType.METHOD) @Retention(RetentionPolicy.CLA ...