尝试动手制作javascript放大镜效果


Posted in Javascript onDecember 25, 2015

本文实例为大家介绍了基于javascript实现放大镜效果的原理和代码,分享给大家供大家参考,具体内容如下:

原理:

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

尝试动手制作javascript放大镜效果

HTML部分:

<html>
<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>

以上就是本文的全部内容,希望对大家实现javascript放大镜效果有所帮助。

Javascript 相关文章推荐
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
使用js 设置url参数
Jul 08 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
理解javascript中DOM事件
Dec 25 #Javascript
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
PHP 图片上传代码
2011/09/13 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python二叉树的实现实例
2013/11/21 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python实现小球弹跳效果
2019/05/10 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python3列表List入门知识附实例
2020/02/09 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
大四自我鉴定范文
2013/10/06 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
银行服务感言
2014/03/01 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android