为了账号安全,请及时绑定邮箱和手机立即绑定

放大镜特效疑惑

标签:
JavaScript

       鼠标悬浮小盒子,出现放大镜与大盒子,反之隐藏。


       鼠标移动,放大镜跟随移动,大图片跟随移动。
     

       先求出放大镜
    
    objSmallBox.onmouseout = funtion (ev) {

        var _event = ev || window.event;  
                    //兼容多个浏览器event参数模式

         left = _event.clientX — objDome.offsetLeft —  objSmallBoxoffsetLeft — objFloatBox.offsetWidth/2
  
         top = _event.clientY — objDome.offsetTop —  objSmallBox.offsetTop —  objFloatBox.offsetHeight/2

          objFloatBox.style.left = left + "px";
          objFloatBox.style.top = top + "px";
               //鼠标移动放大镜跟随鼠标移动

          var percentX = left / (objSmallBox.offsetWidth  -  objFloatBox.offsetWidth);
          var percentY = top / (objSmallBox.offsetHeight  -  objFloatBox.offsetHeight);
                 ① //求得在小盒子中放大镜水平垂直移动距离占小图片宽高减去放大镜宽高的百分比


           objBigBoxImage.style.left = percentX * (objBigBox.offsetWidth  -  objBigBoxImage.offsetWidth) +"px"

          objBigBoxImage.style.top = percentY * (objBigBox.offsetHeight  -  objBigBoxImage.offsetHeight) +"px"
     
              //大图片水平移动距离占大盒子图片宽度–  大盒子宽度的百分比与①的水平百分比相等

             //大图片垂直移动距离占大盒子图片高度–  大盒子高度的百分比与①的垂直百分比相等

                        
            //而要求大图片水平垂直移动距离,需要①的水平垂直百分比分别  *  (大盒子图片宽高 –大盒子宽高)的剩余宽度与高度。

https://img1.sycdn.imooc.com//5bdada15000123ef07620386.jpg
        

   第二种百分比:大图宽/小图宽 =大图移动距离/left
        D / B = ? / X
  
     更变代码部分

             var percentX = objBigBoxImage.offsetWidth / objSmallBox.offsetWidth;
             var percentY = objBigBoxImage.offsetHeight / objSmallBox.offsetHeight;

             objBigBox.style.left = -percentX * left + "px";
             objBigBox.style.top = -percentY * top + "px";
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消