原理：

A:放大镜   B：小图片

C：大图片可视区域

D：大图片

鼠标的位置应该在放大镜的中央，所以鼠标位置为：clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth;

　　　　　　　　　　　　　　　　　　　　　　　clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight;

鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的，因为当放大镜A的右边框移动到与小图B的右边框重合时，大图D也应该移动到了右边框与C的右边框重合的地方

　　　　　　　　所以，他们的移动比例是：(D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>放大镜效果</title>

<style>

*{

margin:0;

padding:0;

}

#demo{

position: relative;

margin:30px 50px;

width: 1000px;

height: 600px;

border: 1px solid #000;

}

#zhezhao{

position: absolute;

z-index:2;

background:red;

width:402px;

height:402px;

left: 20px;

top:20px;

opacity: 0;

}

#small{

position: absolute;

width:402px;

height:402px;

left: 20px;

top:20px;

border: 1px solid #000;

z-index: 1;

}

#small img{

position: absolute;

}

#big{

position: relative;

top: 20px;

left: 460px;

width:500px;

height:500px;

border: 1px solid #000;

overflow: hidden;

display: none;

z-index: 1;

}

#big img{

position: absolute;

}

#glass{

position: absolute;

width:100px;

height: 100px;

opacity: 0.3;

background:orange;

display: none;

}

</style>

</head>

<body>

<div id='demo'>

<div id='zhezhao'> </div>

<!-- 在ie浏览器中，当鼠标在放大镜上是，浏览器并不认为鼠标同样在小图的div上，所以加个遮罩层 兼容ie-->

<div id='small'>

<img src='images/small.png' alt=''>

<div id='glass'></div>

</div>

<div id='big'>

<img src='images/big.jpg' alt='' >

</div>

</div>

</body>

</html>

js部分：

<script>

window.onload=function(){

var demo =document.getElementById('demo');

var small =document.getElementById('small');

var big =document.getElementById('big');

var glass =document.getElementById('glass')

var image =document.getElementById('big').getElementsByTagName('img')[0];

var zhezhao=document.getElementById('zhezhao');

zhezhao.onmouseover=function(){

glass.style.display='block'

big.style.display='block'

}

zhezhao.onmouseout=function(){

glass.style.display='none'

big.style.display='none'

}

//弄清楚clientX，offsetLeft，left的关系，注意区分

zhezhao.onmousemove=function(ev){

var event=ev

var left=event.clientX-demo.offsetLeft-small.offsetLeft-glass.offsetWidth/2;

var top =event.clientY-demo.offsetTop -small.offsetTop -glass.offsetHeight/2;

if(left<0){

left=0;

}else if(left>(small.offsetWidth-glass.offsetWidth)){

left=small.offsetWidth-glass.offsetWidth

}

if(top<0){

top=0;

}else if(top>(small.offsetHeight- glass.offsetHeight)){

top=small.offsetHeight- glass.offsetHeight

}

glass.style.left =left+'px';

glass.style.top =top+'px';

var percent=(image.offsetWidth-big.offsetWidth)/(small.offsetWidth-glass.offsetWidth)

image.style.left=-percent*left+'px'

image.style.top =-percent*top+'px'

}

}

</script>

照着别人的demo自己试着做了个放大镜效果的更多相关文章

  1. Unity中做放大镜 效果

    孙广东  2015.8.16 事实上和 小地图都几乎相同了. 还是要借助 还有一个相机 目的: 这篇文章的主要目的是  要给你一个想法  怎样做放大境效果 . 在unity中能够简单的实现放大镜效果啊 ...

  2. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  3. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

  4. #004 C语言大作业学生管理系统试着做

    链表不会用 文件不会使 在这种情况下就边写边做 希望这个月能做完这个作业 #include<stdio.h> #include<stdlib.h> #include<st ...

  5. XCode 如何真机运行别人的demo项目

    iOS应用安装到真机需要证书和mobileprovision 文件,拿到别人的项目 是没有这些的 ,也就运行不起来. 要想运行起来, 需要选中项目,  target - > 修改 bundlei ...

  6. 要过年啦，用canvas做了个烟火效果

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 要过年了,过年想到的就是放烟火啦....于是就用canvas写了个放烟火的效果,鼠标点击也会产生烟火,不过不要产生太多烟火哦,一个烟火散出 ...

  7. 使用CollectionView做横向滑动分页效果：

    一开始几页滑动是没有问题的,等滑到三四个页面之后,就出现奇怪的缝隙,一开始死活找不到原因,最后在layout的代理方法minimumLineSpacingForSectionAtIndex返回值设置为 ...

  8. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  9. 用bootstrap的tab插件做一个图层切换效果（感觉会误导淫们，大家当乐子看吧）

    小伙伴们啊,我JS真的是个渣渣,所以总想要偷懒,于是为了实现效果就把tab插件给改了(各位大神轻拍啊,我是小白,很纯洁滴,小心脏也很脆弱)…… 最近做的项目为了考虑以后的移动设备兼容性,所以用了Boo ...

随机推荐

  1. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  2. seajs中spm压缩工具使用

    seajs是个好东西,用起来很方便,但是她的压缩工具spm确不被网友看好,因为使用起来很麻烦,捯饬了一天多,终于勉强能压缩了,这里就简单记录一下. 按照地址:http://www.zhangxinxu ...

  3. 享元模式及C++实现

    享元模式(flyweight) flyweight是轻量级的意思,中文这边翻译成享元,更容易让人理解一些. 享元模式是为了应对大量细粒度对象重复的问题.程序中存在大量细粒度的对象,每次要使用时都必须创 ...

  4. 【转】基于CXF Java 搭建Web Service (Restful Web Service与基于SOAP的Web Service混合方案)

    转载:http://www.cnblogs.com/windwithlife/archive/2013/03/03/2942157.html 一,选择一个合适的,Web开发环境: 我选择的是Eclip ...

  5. 网络拥塞控制与NS2仿真

    准备工作: 1. 安装virtual box 虚拟机,并安装虚拟机增强功能,并配制共享文件夹. 共享文件夹自动挂载后的路径为/media/sf_xxx文件夹,xxx为所起的文件名. 解决virtual ...

  6. SNF开发平台WinForm之十-Excel导入-SNF快速开发平台3.3-Spring.Net.Framework

    7.1运行效果: 2.Excel导入开发实现 2.1. 创建窗体,修改命名空间 新增的窗体命名“FrmImport表名”,这个导入窗口比较其它窗口会特殊一些,需要继承BaseFormImport父级窗 ...

  7. 详解SPI中的极性CPOL和相位CPHA

    SPI由于接口相对简单(只需要4根线),用途算是比较广泛,主要应用在 EEPROM,FLASH,实时时钟,AD转换器,还有数字信号处理器和数字信号解码器之间.即一个SPI的Master通过SPI与一个 ...

  8. 3-5年的PHPer常见的面试题

    看到有很多,的总结一下,比较适合有一定经验的PHPer 1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲 ...

  9. Access导出csv 内容添加双引号 vba

    要求:导出的csv文件,用文本工具打开时,文字内容需要有双引号,如下:"1","name1","name2","" 我之 ...

  10. Knockout 新版应用开发教程之"text"绑定

    目的 DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上 典型的常用元素 <span>或者<em>习惯性的用来显示文本,但是在技术上来说你可以用任何元素的. ...