原理：

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. 提高Java代码质量：使用枚举定义常量（转）

    一.分析  常量的声明是每一个项目中不可或缺的,在Java1.5之前,我们只有两种方式的声明:类常量和接口常量.不过,在1.5版之后有了改进,即新增了一种常量声明方式,枚举常量.代码如下: enum ...

  2. sql server版本

    10.00.1600 :SQL 2008 10.50.1600:SQL 2008 R2 10.50.2500:SQL 2008 R2 SP1

  3. Web API 入门系列- 从一个示例开始

    1.新建Web API项目 2.新建bookModel 3.新建book web api 控制器 为了简单方便,演示系统使用内存集合持久化书籍. 4.测试web api 我们怎么方便测试web api ...

  4. 树莓派 HC-SRO4超声波测距模块的使用

    先上个图 这个模块的针脚跟之前玩的那三个有所区别,除了VCC和GND两个针脚,还多了两个Trig和Echo针脚,分别是输出和输入,Trig我接的是20针脚,Echo是21 该模块的工作原理为,先向TR ...

  5. 搭建windows下filezilla FTP服务器

    FTP服务器必不可少,鉴于serv-u越来越冗余繁多的设置,个人还是比较喜欢简单.干净,满足需求即可的东东,所以选择filezilla.更主要的原因是ta是开元免费使用的,虽然免费,功能却齐全,我发现 ...

  6. 什么是https？

    很久之前注意到了https这个新出来的协议,当时感觉到只是一个加密的协议,然后没有什么关注,只知道他和http的区别就在于加密,最近突然很多人问起了这个https到底是什么?于是上网查了查资料,总结之 ...

  7. Spring基础—— 泛型依赖注入

    一.为了更加快捷的开发,为了更少的配置,特别是针对 Web 环境的开发,从 Spring 4.0 之后,Spring 引入了 泛型依赖注入. 二.泛型依赖注入:子类之间的依赖关系由其父类泛型以及父类之 ...

  8. JS浏览器全屏

    //全屏 function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el ...

  9. Winform里面的缓存使用

    缓存在很多情况下需要用到,合理利用缓存可以一方面可以提高程序的响应速度,同时可以减少对特定资源访问的压力.本文主要针对自己在Winform方面的缓存使用做一个引导性的介绍,希望大家能够从中了解一些缓存 ...

  10. SVN 忽略文件但不删除文件

    SVN忽略一些不必要的文件但不删除 如果svn仓库中有一些不希望被别人提交的文件 该如何忽略掉对这个文件的更改但又不删除这个文件呢? 在找了一堆解决方案后得出了如下结论 去除要被忽略文件的版本控制 基 ...