代码如下

 <!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. 机器学习经典算法详解及Python实现--基于SMO的SVM分类器

    原文:http://blog.csdn.net/suipingsp/article/details/41645779 支持向量机基本上是最好的有监督学习算法,因其英文名为support vector  ...

  2. 最新搭建GIT服务器仓库

    新开了一个项目,现在需要将代码放在公司GIT服务器上面.所以这里需要了一些问题..记录一下.因为原来公司这边的服务器的git用户都是创建好的.这里没有创建.需要的可以看看:http://www.cnb ...

  3. 琐碎-hadoop2.2.0目录结构

    之前了解了一下0.20.2和1.1.0.以后现在主流肯定是2.x吧,包含了之前没有的yarn bin Hadoop最基本的管理脚本和使用脚本,这些脚本是sbin目录下管理脚本的基础实现,用户可以用这些 ...

  4. Codec工具类

    import java.math.BigInteger; import org.apache.commons.codec.DecoderException; import org.apache.com ...

  5. ArcGIS Server 10.2 实战（五）spatial etl tool 格式转换服务

    上不同的地图服务平台对地图文件格式的要求多种多样,arcgis使用的文件很难应用于其他平台上,因此需要有格式转换的服务来克服这种使用不同平台带来的麻烦,下面以TIFF格式转GEOTIFF格式为例. 首 ...

  6. oracle checkpoint 详解

    Oracle checkpoint详解 topcheckpoint扫盲 top什么是checkpoint 在数据库系统中,写日志和写数据文件是数据库中IO消耗最大的两种操作,在这两种操作中写数据文件属 ...

  7. Java 文件名操作的相关工具类

    项目中的操作文件名的工具类: import java.io.File; import java.util.regex.Matcher; import java.util.regex.Pattern; ...

  8. Sherlock and The Beast

    Sherlock Holmes suspects his archenemy, Professor Moriarty, is once again plotting something diaboli ...

  9. Linux 命令 - id: 显示用户的身份标识

    命令格式 id [OPTION]... [USERNAME] 命令参数 -a 忽略,仅为与其他版本相兼容而设计. -Z, --context 仅显示当前用户的安全环境. -g, --group 仅显示 ...

  10. 随机提取N条记录[多种数据库方法]

    随机提取10条记录的例子: Sql server: select top 10 * from 表 order by newid() Access: SELECT top 10 * FROM 表 ORD ...