原理：

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. Linux/Ubuntu sudo不用输入密码的方法

    通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubunt ...

  2. MSSQL大数据量增加字段耗时对比

    单个数据表记录数为1亿4千万条. 一.测试同时增加两个允许为空的字段. ALTER TABLE [dbo].[XRecord] ADD [sType] int,[cType] int GO 开始时间: ...

  3. 菜鸟学Windows Phone 8开发(2)——了解XAML

    本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 主要是想通过翻译本系列文章来巩固下基础知识顺带学习下英语和练习下自己的毅力 本文地址:http://channel9.m ...

  4. ubuntu14.04编译安装Git2.7

    在开源中国看文章, 随意之间, 在软件资讯栏看到git 2.7的信息. 一直在使用在git 1.9.1, 心中突感, 这个git 2.7是个什么东西, 怎么git的版本更新有如此快么. 印象里, 老外 ...

  5. 为什么移动Web应用程序很慢（译）

    前些日子,看到Herb Sutter在自己的博客中推荐了一篇文章<Why mobile web apps are slow>,在推荐里他这样写道: “I don’t often link ...

  6. 【转】SAPI中的IspeechRecoContext（接口）

    IspeechRecoContext自动化接口定义一个识别上下文. 什么是一个识别上下文? 一个识别上下文就是应用程序和SAPI共同作用来实现语音识别的最主要方法.它就是用来允许应用程序来开始.停止识 ...

  7. sql语句查询数据库表结构信息

    开发中经常用到查询指定表及其字段的信息,以下是我整理的SQL语句查询方法,供自己平时使用也提供给大家参考! 1.适用MS SQL SERVER: SELECT 表名 = then d.name els ...

  8. BlocksKit初见:一个支持将delegate转换成block的Cocoa库

    简介 项目主页: https://github.com/zwaldowski/BlocksKit BlocksKit 是一个开源的框架,对 Cocoa 进行了扩展,将许多需要通过 delegate 调 ...

  9. iOS二十种超酷时尚艺术滤镜汇总【附源码】

    本文总结了20种ios滤镜都是基于GPUImage的,有3种滤镜是GPUImage库中包含的,还有17种是Instagram中的经典滤镜,集成在一个项目中.使用GPUImage可以非常容易创建我们自己 ...

  10. [Latex]生成Vertical Timeline

    Vertical TimeLine 用Latex生成一个竖直的VerticalTimeline的想法来源于今天翻看王老师的教师寄语,有感于学院走过的操作系统实验的艰辛之路,遂产生了写一个"小 ...