尝试动手制作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中valueOf函数与toString方法深入理解
Dec 02 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
深入理解Python变量与常量
2016/06/02 Python
python决策树之CART分类回归树详解
2017/12/20 Python
一份python入门应该看的学习资料
2018/04/11 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
年度考核自我评价
2014/01/25 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
投标保密承诺书
2014/05/19 职场文书
项目经理任命书
2014/06/04 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
初三毕业感言
2015/07/31 职场文书
大学生党课感想
2015/08/11 职场文书
求职信如何撰写?
2019/05/22 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS