这篇文章主要为大家详细介绍了基于 JavaScript 实现放大镜放大购物图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一难点:不让黄盒子出界
二难点:让大盒子相应移动(比例)
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>我的放大镜</title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .box{
- margin: 100px;
- position: relative;
- }
- .small{
- width: 350px;
- height: 350px;
- border: 1px solid #999;
- position: relative;
- }
- .select{
- display: none;
- width: 100px;
- height: 100px;
- background: rgba(255,255,0,0.4);
- position: absolute;
- left: 0;
- top: 0;
- cursor: move;
- }
- .big{
- display: none;
- position: absolute;
- left: 360px;
- top: 0;
- width: 450px;
- height: 450px;
- border: 1px solid #ccc;
- overflow: hidden;
- }
- .big img{
- position: absolute;
- left: 0;
- top: 0;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <div class="small" id="smallbox">
- <img src="images/001.jpg" alt="">
- <div class="select" id="mask" style="display:none;"></div>
- </div>
- <div class="big" id="bigbox">
- <img src="images/0001.jpg" alt="">
- </div>
- </div>
- <script>
- var smallbox = document.getElementById('smallbox');
- var bigbox = document.getElementById('bigbox');
- var mask = document.getElementById('mask');
- var bigImg = bigbox.children[0];
- smallbox.onmouseover = function(){
- mask.style.display = "block";
- bigbox.style.display = "block";
- }
- smallbox.onmouseout = function(){
- mask.style.display = "none";
- bigbox.style.display = "none";
- }
- smallbox.onmousemove = function(event){
- var event = event || window.event;
- var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
- var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
- //不让黄盒子出界
- if(x < 0){
- x = 0;
- }else if(x > smallbox.offsetWidth - mask.offsetWidth){
- x = smallbox.offsetWidth - mask.offsetWidth;
- }
- if(y<0) {
- y = 0;
- }else if(y > smallbox.offsetHeight - mask.offsetHeight){
- y = smallbox.offsetHeight - mask.offsetHeight;
- }
- mask.style.left = x + "px";
- mask.style.top = y + "px";
- bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x
- bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px";
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0530/328396.html