代码如下

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title></title>

     <link rel="stylesheet" href="">

     <script type="text/javascript" src="js/common.js"></script>

     <style type="text/css">

         body,div,img{padding:0;margin:0;}

         #main{

             margin:50px;

             position:relative;

         }

         #small{

             width:300px;

             height:187px;

             border:1px solid red;

         }

         #small img{

             width:300px;

             height:187px;

         }

         #small #mark{

             width:50px;

             height:50px;

             background-color: #ccc;

             opacity:0.5;

             position:absolute;

             top:0px;

             left:0px;

             display:none;

         }

         #big{

             width:300px;

             height:187px;

             border:1px solid red;

             position:absolute;

             top:0px;

             left:320px;

             overflow:hidden;

             display:none;

         }

         /*图片想要移动必须绝对定位*/

         #big img {

             position:absolute;

         }

     </style>

     <script type="text/javascript">

         window.onload = function(){

             var oSmall = $('small');

             var oBig = $('big');

             var oMark = $('mark');

             var bigImg = oBig.getElementsByTagName('img')[0];

             oSmall.onmouseover = function(){

                 oMark.style.display = 'block';

                 oBig.style.display = 'block';

             }

             oSmall.onmouseout = function(){

                 oMark.style.display = 'none';

                 oBig.style.display = 'none';

             }

             oSmall.onmousemove = function(e){

                 var ev = e || window.event;

                 //鼠标在small小图里面的距离

                 var x = ev.clientX - oSmall.parentNode.offsetLeft;

                 var y = ev.clientY - oSmall.parentNode.offsetTop;

                 //确定镜头的坐标

                 var markLeft = x - (mark.offsetWidth/2);

                 var markTop = y - (mark.offsetHeight/2);

                 //控制镜头边界

                 //如果距离左边小于0,就重新赋值为0

                 if (markLeft < 0) {

                     markLeft = 0;

                 }

                 //如果距离顶部小于0,就重新赋值为0

                 if (markTop < 0) {

                     markTop = 0;

                 }

                 //如果镜头的右边移动的距离加上本身的宽度大于small小图的宽度，说明右边过界了

                 if (markLeft+oMark.offsetWidth > oSmall.offsetWidth) {

                     markLeft = oSmall.offsetWidth - oMark.offsetWidth;

                 }

                 //如果镜头的下面移动的距离加上本身的高度大于small小图的高度，说明底部过界了

                 if (markTop+oMark.offsetHeight > oSmall.offsetHeight) {

                     markTop = oSmall.offsetHeight - oMark.offsetHeight;

                 }

                 //设置镜头的位置

                 oMark.style.left = markLeft + 'px';

                 oMark.style.top = markTop + 'px';

                 //计算大图移动的比例算法

                 //markLeft/(oSmall.offsetWidth-oMark.offsetWidth) ==

                 //bigLeft/(bigImg.offsetWidth-big.offsetWidth)

                 //

                 var bigLeft = markLeft/(oSmall.offsetWidth-oMark.offsetWidth) * (bigImg.offsetWidth-big.offsetWidth);

                 var bigTop = markTop/(oSmall.offsetHeight-oMark.offsetHeight) * (bigImg.offsetHeight-big.offsetHeight);

                 bigImg.style.left = -bigLeft + 'px';

                 bigImg.style.top = -bigTop + 'px';

             }

         }

     </script>

 </head>

 <body>

     <div id="main">

         <div id="small">

             <img src="img/ktm_small.jpg" alt="">

             <div id="mark"></div>

         </div>

         <div id="big">

             <img src="img/ktm_big.jpg" alt="">

         </div>

     </div>

 </body>

 </html>

用JS写的放大镜的更多相关文章

  1. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  2. vue写出放大镜的效果

    用vue写出放大镜查看图片的效果. 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { i ...

  3. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  4. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  5. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  6. 去它的h5，我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  7. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  8. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  9. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

随机推荐

  1. php常见问题辨析（二）

    一:unset: 1.如果在函数中 unset() 一个全局变量,则只是局部变量被销毁,而在调用环境中的变量将保持调用 unset() 之前一样的值,如果您想在函数中 unset() 一个全局变量,可 ...

  2. oracle时间格式转换问题 ORA-01810: format code appears twice--转

    今天在做报表查询的时候Oracle报错: 信息为 ORA-01810: format code appears twice 原因:由于想java一样转化时间格式,但是Oracle中是不区分大小写的,所 ...

  3. And Then There Was One

    http://poj.org/problem?id=3517 And Then There Was One Time Limit: 5000MS   Memory Limit: 65536K Tota ...

  4. A+B Problem（V）

    描述 做了A+B Problem之后,Yougth感觉太简单了,于是他想让你求出两个数反转后相加的值.帮帮他吧 输入 有多组测试数据.每组包括两个数m和n,数据保证int范围,当m和n同时为0是表示输 ...

  5. Android（java）学习笔记91：泛型接口的概述和使用

    package cn.itcast_06; /* * 泛型接口:把泛型定义在接口上 */ public interface Inter<T> { public abstract void ...

  6. 开发技巧01——改变Toast显示位置

    1.获得Toast对象——Toast toast = Toast.makeText(this, "Top Left!", Toast.LENGTH_SHORT); 2.Toast对 ...

  7. Cisco 交换机的操作

    Cisco的工作模式 Cisco设备有常用模式为:用户模式.特权模式.全局模式.端口模式.首先它们之间呈现出递进关系:用户模式->特权模式->全局模式->端口模式 1.用户模式 交换 ...

  8. LeetCode 142

    Linked List Cycle II Given a linked list, return the node where the cycle begins. If there is no cyc ...

  9. [改善Java代码]不同的场景使用不同的泛型通配符

    Java泛型支持通配符(Wildcard),可以单独使用一个"?"表示任意类,也可以使用extends关键字标识某一类(接口)的子类型,还可以使用super关键字标识某一类(接口) ...

  10. eclipse svn重定位(relocate)

    eclipse 中项目svn 重定向 How to properly perform an SVN relocate on Zend for Eclipse 在eclipse中项目的svn 重定位(r ...