原生js实现放大镜特效
更新时间：2017年03月08日 10:32:19 作者：Vampire-blog
这篇文章主要为大家详细介绍了原生js实现放大镜特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下
掌握页面元素定位和移动
放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置
技术点：事件捕获、定位
offsetLeft与style.left的对比：
1）offsetLeft是与父级元素的距离，不包过滚动条的距离
2）style.left返回的是字符串，如30px，offsetLeft返回的是数值30
3）style.lft是可读写的，offsetLeft是只读的，所以要改变div的位置只能修改style.left
4）style.left的值需要事先定义，否则取到的值为空
难点：计算：如何让小图片的放大镜和大图片同步移动
距离定位图解：
具体代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box{
position: relative;
z-index: 1;
}
#float-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark{
position: absolute;
display: block;
width: 400px;
height: 255px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
#big-box img{
position: absolute;
z-index: 5;
}
</style>
<script>
window.onload=function(){
var $=function(id){
return document.getElementById(id);
}
var Demo = $("demo");
var SmallBox = $("small-box");
var Mark = $("mark");
var FloatBox = $("float-box");
var BigBox = $("big-box");
var BigBoxImage = BigBox.getElementsByTagName("img")[0];
Mark.onmouseover = function(){
FloatBox.style.display = "block";
BigBox.style.display = "block";
}
Mark.onmouseout = function(){
FloatBox.style.display = "none";
BigBox.style.display = "none";
}
Mark.onmousemove = function(e){
var _event = e||window.event//兼容多个浏览器的参数模式
var left = _event.clientX - Demo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth/2;
var top = _event.clientY - Demo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight/2;
if(left < 0){
left = 0;
}else if(left > Mark.offsetWidth - FloatBox.offsetWidth){
left = Mark.offsetWidth - FloatBox.offsetWidth;
}
if(top < 0){
top = 0;
}else if(top > Mark.offsetHeight - FloatBox.offsetHeight){
top = Mark.offsetHeight - FloatBox.offsetHeight;
}
FloatBox.style.left = left + 'px';
FloatBox.style.top = top + 'px';
var percentX = left / (Mark.offsetWidth - FloatBox.offsetWidth);
var percentY = top / (Mark.offsetHeight - FloatBox.offsetHeight);
BigBoxImage.style.left = -percentX * (BigBoxImage.offsetWidth - BigBox.offsetWidth)+'px';
BigBoxImage.style.top = -percentY * (BigBoxImage.offsetHeight - BigBox.offsetHeight)+'px';
}
}
</script>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="img/macbook-small.jpg" />
</div>
<div id="big-box">
<img src="img/macbook-big.jpg" />
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了javascript回到顶部特效，具有一定的参考价值，感兴趣的朋友可以参考一下2016-07-07
JavaScript正则表达式exec/g实现多次循环用法示例
这篇文章主要介绍了JavaScript正则表达式exec/g实现多次循环用法,结合实例形式分析了javascript正则表达式g修饰符相关使用技巧,需要的朋友可以参考下2017-01-01
本文主要介绍了Mysql内储存JSON字符串根据条件进行查询，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了JavaScript多种页面刷新方法小结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了JS学习笔记之贪吃蛇小游戏demo,结合实例形式详细分析了javascript实现贪吃蛇小游戏的原理、步骤与相关实现技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了简单实现节流函数和防抖函数过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
uni-app弹出层uni-popup使用及修改默认样式的方法实例
我们在使用uniapp开发的时候,有时可以使用uniapp自有的样式模板,这样可以提高开发效率,下面这篇文章主要给大家介绍了关于uni-app弹出层uni-popup使用及修改默认样式的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了JavaScript实现前端分页控件的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。2016-10-10
最新评论