尝试动手制作javascript放大镜效果
更新时间：2015年12月25日 09:53:54 作者：Big_Dot
这篇文章主要介绍了javascript放大镜效果，照着别人的例子，自己试着做了个放大镜效果，感兴趣的小伙伴们可以参考一下
本文实例为大家介绍了基于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
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放大镜效果有所帮助。
相关文章
这篇文章介绍了判断计算字符串长度/判断空的简单方法，有需要的朋友可以参考一下2013-08-08
在前端实现加密算法时,需要特别注意密钥的安全存储和管理,不应将敏感的密钥硬编码在前端代码中,这篇文章主要介绍了前端使用国密sm2和sm4进行加解密的相关资料,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了纯JS实现本地图片预览的方法,基于javascript插件实现本地图片预览功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
javascript getElementsByTagName
DC大神为早期不支持getElementsByTagName的浏览器写的hack，当然与原生的不能同日而言，原生的用到缓存机制呢。2011-01-01
这篇文章主要为大家详细介绍了bootstrap输入框组的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
今天小编就为大家分享一篇关于JSON字符串操作移除空串更改key/value的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JS求解三元一次方程组值的方法,涉及JS数学运算的相关操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要给大家介绍了关于Webpack打包详细流程及代码的相关资料,Webpack是一款非常流行的打包工具,它的主要作用是将项目中的各个模块打包成静态资源,以便于在浏览器中加载和运行,需要的朋友可以参考下2024-01-01
如果在正则表达式中定义了子匹配，那么参数的长度会随着子匹配的个数改变，如果没有定义子匹配，那么长度是固定的。2010-03-03
数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面这篇文章主要给大家介绍了非常全面的12种js数组去重的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论