Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 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>
来源: http://www.phperz.com/article/17/0701/326931.html