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. python2和Python3异同总结

    1. python3 异常不再接收逗号(,)作为参数: ## python3 中这样可以正常运行 try: print("在这里执行的代码,有异常进入except") except ...

  2. C++文件读写 打开方式等比较全

    要求:掌握文本文件读写的方法了解二进制文件的读写方法 C++文件流:fstream // 文件流ifstream // 输入文件流ofstream // 输出文件流 //创建一个文本文件并写入信息// ...

  3. kafka配置参数详解【收藏】

    3.1      Broker  Configs 基本配置如下: -broker.id -log.dirs -zookeeper.connect Topic-level配置以及其默认值将在下面讨论. ...

  4. Ubuntu上搭建Hadoop环境（单机模式+伪分布模式）【转】

    [转自:]http://blog.csdn.net/hitwengqi/article/details/8008203 最近一直在自学Hadoop,今天花点时间搭建一个开发环境,并整理成文. 首先要了 ...

  5. 【Python】打印object对象

    print (object .__dict__) print (dir(object))

  6. maven 添加jetty 支持

    maven jetty run 即可 配置  <plugin> <groupId>org.mortbay.jetty</groupId> <artifactI ...

  7. python dict与list

    本文实例讲述了python中字典(Dictionary)用法.分享给大家供大家参考.具体分析如下: 字典(Dictionary)是一种映射结构的数据类型,由无序的“键-值对”组成.字典的键必须是不可改 ...

  8. C# Null 赋值

    在此之前,我们先看一段程序: class Program    {        static void Main(string[] args)        {            Childre ...

  9. Android 异步任务——AsyncTask (附使用AsyncTask下载图片Demo)

    我们编程的时候经常需要处理同步任务和异步任务,在Android里面存在一个特性,就是UI线程是不安全的线程.所谓UI线程不安全也就是我们的主线程(进程启动的第一个线程)不能在线程外操作主线程的资源.因 ...

  10. Spirng MVC启动流程

    以Tomcat为例,想在Web容器中使用Spirng MVC,必须进行四项的配置: 修改web.xml,添加servlet定义.编写servletname-servlet.xml( servletna ...