原理：

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. p2p研究

    p2p网络结构 中央集中式结构 无集中式非结构 混合式以超级节点结构 穿透原理 防火墙为克隆型(cone net),对称型(Symmetric NAT) 只有克隆型才能用打洞方式穿透 开源方案 htt ...

  2. Android 使用版本控制工具时添加忽略文件方式

    一.使用SVN管理项目时,添加忽略文件的方式 Android Studio 配合SVN时,添加忽略文件相对简单,首先打开项目的Settings选项,切换到Version Control下的Ignore ...

  3. php生成随机密码(php自定义函数)转自先锋教程网

    php生成随机密码(php自定义函数) 时间:2015-12-16 20:43:49来源:网络 导读:php随机密码的生成代码,使用php自定义函数生成指定长度的随机密码,密码规则为小写字母与数字的随 ...

  4. 回归 从注释开始 appledoc

    好久没有管理这个blog了,些许空虚.不知道今天的回归能否坚持.简单介绍一个第三方注释 -- appledoc appledoc http://gentlebytes.com/appledoc/ 安装 ...

  5. log4net各种Filter使用

    log4net里面的filter类常用的为: 1.DenyAllFilter 拒绝所用的日志输出 <filter type="log4net.Filter.LevelMatchFilt ...

  6. MVC过滤器中获取实体类属性值

    本文地址:http://www.cnblogs.com/outtamyhead/p/3616913.html,转载请保留本地址! 最近在项目遇到了这个问题:获取Action行参中实体类的属性值,主要的 ...

  7. Simplified CommonJS wrapper 与 AMD 标准定义模块差异

    标准的 AMD 模块定义 一个标准的 AMD 模块看起来是这样子: define(['foo', 'foo/bar'], function (foo, bar) { return { doSometh ...

  8. C++的最佳特性（译）

    最近看到了很多优秀的文章,包括<Why mobile web apps are slow>,实在忍不住翻译出来跟大家分享.这篇文章通过大量的实验和参考文献向我们说明移动应用开发所遇到的问题 ...

  9. 链表的实现(Java语言描述)

    代码如下: public interface ListInterface<T> { public T getElem(int i); public boolean insertElem(i ...

  10. Android学习笔记之横向二级菜单实现

    PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图...   这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下 ...