代码如下

 <!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. json对象，使用 “ . ”获取值是，不能使用变量作为属性名。

    var he={'aa':"aa",'bb':'bb'}; var chun={'cc':"aa",'dd':'mm'}; c=he.aa; n=chun.c; ...

  2. Java中数组的快排

    描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据都是占一行,有三个字符组成, ...

  3. (转载)ubuntu创建、删除文件及文件夹，强制清空回收站方法

    mkdir 目录名         => 创建一个目录 rmdir 空目录名      => 删除一个空目录 rm 文件名 文件名   => 删除一个文件或多个文件 rm –rf 非 ...

  4. SQL Server 格式化时间format

    select format(sysdatetime(),'yyyy-MM-dd HH:mm:ss'); SQL Server 2012才开始有这功能 这种样式很像oracle的to_char(sysd ...

  5. JMX笔记(一)

    上篇 JMX初体验 使用HtmlAdaptorServer提供的界面实现了调用MBean,除此之外,还可以使用rmi方式连接调用MBeanServer 要连接,自然要有url:service:jmx: ...

  6. vsftp实现ftps加密传输数据

    FTP明文传输数据,不太安全,ftp+ssl可以实现传输加密=ftps 01.创建FTP用户 user -d /ftp_www  -s /sbin/nologin mvpbang echo " ...

  7. Ubuntu 14.0操作系统，修改默认打开方式的方法

    Ubuntu 14.0 有内置的视频播放器 Totem,但是使用起来不太习惯,所以在系统的软件中心 下载了gnome Mplayer和s Mplayer,都有打开上次播放的忆功能,只是gnome Mp ...

  8. Android drawable xml 各种小知识

    摘抄自网络. 圆角或者各种变种背景, <?xml version="1.0" encoding="utf-8"?> <shape xmlns: ...

  9. cv::mat转换成QImage的问题

    在进行cv::mat转换为QImage过程中,经常出现问题: cv::Mat image; ...QImage img=QImage((const unsigned char*)(image.data ...

  10. Cocos2d-x优化中图片优化

    在2D游戏中图片无疑是最为重要的资源文件,它会被加载到内存中转换为纹理,由GPU贴在精灵之上渲染出来.它能够优化的方面很多,包括:图片格式.拼图和纹理格式等,下面我们从这几个方面介绍一下图片和纹理的优 ...