代码如下

 <!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. ROC和AUC介绍以及如何计算AUC

    原文:http://alexkong.net/2013/06/introduction-to-auc-and-roc/ 为什么使用ROC曲线 既然已经这么多评价标准,为什么还要使用ROC和AUC呢?因 ...

  2. c语言排序算法总结

    一.希尔(Shell)排序法 /* Shell 排序法 */ #include <stdio.h> void sort(int v[],int n) {      int gap,i,j, ...

  3. PHP用反撇号（`，也就是键盘上ESC键下面的那个，和~在同一个上面）执行外部命令

    例如: echo `whoami`; // 导出数据库,要导入的文件夹必须要有可写权限, -u -p之后的内容必须要紧挨着写 echo `mysqldump -h localhost -u$DbUse ...

  4. javaweb学习总结十五(web开发的相关概念以及常用服务器介绍)

    一:java web开发的相关概念 1:web分为静态web和动态web 2:模拟web服务器 web页面如果想让外部网络访问,必须通过网络程序读取资源,流程: a:用户通过浏览器访问网络程序 b:网 ...

  5. 怎么在html页面和js里判断是否是IE浏览器

    HTML里: HTML代码中,在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了.在HTML代码中, ...

  6. Hibernate悲观锁/乐观锁

    如果需要保证数据访问的排它性,则需对目标数据加"锁",使其无法被其它程序修改 一,悲观锁 对数据被外界(包括本系统当前的其它事务和来自外部系统的事务处理)修改持保守态度,通过数据库 ...

  7. 【数论】UVa 11526 - H(n)

    What is the value this simple C++ function will return? long long H(int n) { ; ; i <= n; i=i+ ) { ...

  8. C# 实现远程控制软件的关键技术

    一.服务器端多线程Socket技术    用TcpListener进行侦听,接受客户端连接,有客户端连进来后开启处理线程处理数据,代码如下:    using System; using System ...

  9. Emmet 语法大全（缩写语法/sublime 插件）

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  10. HDOJ2026首字母变大写

    首字母变大写 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...