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. Openfire更新服务器名称的方法

    转自:http://blog.csdn.net/vikione/article/details/5996932 Openfire更新服务器名称的方法: 1.登陆openfire管理页面,在主页面下方选 ...

  2. java park unpark

    https://blogs.oracle.com/dave/a-race-in-locksupport-park-arising-from-weak-memory-models https://blo ...

  3. SVN四部曲之SVN设置详解深入

    想知道不同的设置是干什么用的,你只需将鼠标指针在编辑框/选项框上停留一秒钟...一个帮助提示气泡就会弹出来. 常规设置 图 4.68. 设置对话框,常规设置页面 这个对话框允许你指定自己喜欢的语言,同 ...

  4. SVN Cleanup failed to process the following paths错误的解决

    在使用TortoiseSVN工具执行Cleanup操作时经常出现Cleanup failed to process the following paths的错误,具体如下图: 网上搜索了一下,找到了解 ...

  5. 每日英语：A Chinese Soccer Club Has Won Something!

    A 1-1 tie at home was sufficient for Guangzhou Evergrande to clinch the Asian Champions League title ...

  6. python 视频处理，提取视频相关帧，读取Excel

    一共这几个模块: class videoReader 读取视频 class videoFramesExtractor(videoReader):继承了读取视频,主要是用来限制读取视频中的哪些帧,并保存 ...

  7. DIV+CSS兼容解决DIV最大宽度和最小宽度问题

    在制作网页中,我们经常会碰到min/max-width,min/max-height在IE6底下是无效的,这也是web设计师最头疼的问题之一,以下的方法可以解决这些难题,并且比较简约.当然,如果你还有 ...

  8. 3. CNN卷积网络-反向更新

    1. CNN卷积网络-初识 2. CNN卷积网络-前向传播算法 3. CNN卷积网络-反向更新 1. 前言 如果读者详细的了解了DNN神经网络的反向更新,那对我们今天的学习会有很大的帮助.我们的CNN ...

  9. 自己动手写Android框架－数据库框架

    大家在工作中基本上都有使用到数据库框架 关系型:ORMLite,GreenDao 对象型:DB4O,Perst 这些数据库用起来都非常的简单,对于我们Android上来说这些数据库足够我们使用了,但是 ...

  10. [转] javaweb学习-jstl-<c:forEach>中 varStatus的属性简介

    原文地址:http://blog.csdn.net/u010648555/article/details/51093277 varStatus是<c:forEach>jstl循环标签的一个 ...