原理：

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. PS1--cannot be loaded because the execution of scripts is disabled on this system

    在nagiosXI上,通过nsclient++ 引用plugin “check_ms_win_disk_load”(https://outsideit.net/check-ms-win-disk-lo ...

  2. android判断EditText输入的数字、中文还是字母方法

    String txt = edInput.getText().toString(); Pattern p = Pattern.compile("[0-9]*");      Mat ...

  3. 利用SSIS发送邮件

    璎Nicole珞 博客园 闪存 首页 新随笔 联系 管理 订阅 随笔- 15  文章- 0  评论- 0  SSIS 利用发送邮件服务 Send Email Task   1. 在SSIS中如何发送邮 ...

  4. SQL 触发器 instead of | insert

    create trigger tgr_Insert on A instead of insert as print 'Hello World' go insert into A values('100 ...

  5. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

  6. 使用NPOI导出excel

    NPOI下载地址http://npoi.codeplex.com/releases 从项目中引用NPOI.bll和NPOI.OOXML.bll 引用命名控件 using NPOI.HSSF.UserM ...

  7. Java知多少（106）程序与数据库连接

    一个网络关系数据库应用系统是一个三层次结构.客户机与服务器采用网络连接,客户机端应用程序按通信协议与服务器端的数据库程序通信:数据库服务程序通过SQL命令与数据库管理系统通信. Java程序与数据库连 ...

  8. 优化LibreOffice如此简单

    对于开源软件的支持者和粉丝来说,LibreOffice 无疑是 Microsoft Office 的最佳替代品,而且它已在过去的许多版本迭代中迎来了许多巨大改进.然而,通过用户的手动配置,我们还是有办 ...

  9. 听声辨位识DUMP

    要处理的dump成千上万,每个都用眼睛去看也太累了,不如用耳朵听好了.相信经过一段时间适应,一定可以做到凭听就解决dump分析.(逃 DumpMusican 这个小exe只需要把dump路径作为参数传 ...

  10. python之网络爬虫

    一.演绎自已的北爱 踏上北漂的航班,开始演奏了我自已的北京爱情故事 二.爬虫1 1.网络爬虫的思路 首先:指定一个url,然后打开这个url地址,读其中的内容. 其次:从读取的内容中过滤关键字:这一步 ...