专栏首页前端实习日记插件:商品放大镜

插件:商品放大镜

前言

这段代码我哩哩啦啦写了三天多,平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半(我是分两块写的, 先是让module就是那个遮罩层能自由的在图片上跟随鼠标走,剩下的就简单了,遮罩层的left、top乘以一个固定系数就是‘放大图片’的left、top)。好了我的思路就是:只需要一张图片,这张图片像素要大一点,先以缩小的方式展示,然后鼠标移上去之后,在右侧有一个div,里面也放着一个src相同的img,只不过这个img不再是缩小的了。ok 这样就够了!

 写之前先复习一下:(如图)

记住上面的图 上码

HTML

<div class="content">
    <img class="small" src="img/01.png" width="300" />
    <div class="module"></div>
    <div class="large">
        <img src="img/01.png" alt=""/>
    </div>
</div>

css

div.content{
    overflow: hidden;
    position: relative;
}
img.small{
    float: left;
    border:1px solid blue;
}
div.large{
    float: left;
    width:300px;
    height:300px;
    overflow: hidden;
    position: relative;/**/
}
div.large>img{
    width:600px;
    display: none;
    position:absolute;/**/
}
div.module{
    width:150px;
    height:150px;
    background-color: rgba(255,255,255,.3);
    border:1px solid #666666;
    position:absolute ;
    top:0;
    left:0;
    display: none;
}
div.module:hover{
    cursor: move;
}

js

<script>
   $('.content').mousemove(function(e){
       var mx = e.pageX-$(this).offset().left;
       var my = e.pageY-$(this).offset().top;
//           让鼠标在module正中间
     var left = mx-$('.module').width()/2;
       var top = my-$('.module').height()/2;
       if(mx>0&&my>0&&mx<$('.small').width()&&my<$('.small').height()){
//           防止溢出
       var L = (left<0)?0:(left>$('.small').width()-$('.module').width())?$('.small').width()-$('.module').width():left;
           var T = (top<0)?0:(top>$('.small').height()-$('.module').height())?$('.small').height()-$('.module').height():top;
           $('div.module').css('display','block').css('left',L+'px').css('top',T+'px');
//           显示放大照片
       var largeLeft = L*$('.large').width()/$('.module').width();//L*(300/150);
       var largeTop = T*$('.large').height()/$('.module').height();//T*(300/150);
       $('.large>img').css('display','block').css('left',0-largeLeft+'px').css('top',0-largeTop+'px');
        }
为什么left:0-largeLeft? 
因为你好好想想,你鼠标往左移动时候,div.large中的图片却是向右移动的,鼠标向右移动时,div.large中的图片是向左动的。
鼠标向上移动时,div.large中的图片是向下动的。
鼠标向下移动时,div.large中的图片是向上动的。
所以要用0减去!

       else{
           $('div.module').css('display','none');
//           隐藏放大照片
        $('.large>img').css('display','none');
       }
  })
 </script>

是不是很简单,我当时在避免.module溢出的时候费了些时间,

当时我很蠢单独把每个方向都拿出来并且在每个方向下面设置.module的left和top;导致鼠标在移动的时候代码判断使移动发生了冲突,并未达到我想要的效果。   想想虽然要每个方向都要考虑,但是没必要每判断一次给就给.module赋一次值。   把left和top单独拿出来考虑,最后在把left、top赋值给.module 如下,更好。

//                防止溢出
var L = (left<0)?0:(left>$('.small').width()-$('.module').width())?$('.small').width()-$('.module').width():left;
var T = (top<0)?0:(top>$('.small').height()-$('.module').height())?$('.small').height()-$('.module').height():top;
           $('div.module').css('display','block').css('left',L+'px').css('top',T+'px');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter环境搭建记录

    1.下载安装包之后执行flutter doctor报错:zsh: command not found: flutter

    yuezhongbao
  • 原生:点击加入购物车的动画

    yuezhongbao
  • 搭建babel将es6转es5环境

    babel 6与之前版本的区别: 之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel6中...

    yuezhongbao
  • 5G还未商用,6G研究早已开始

    导读:尽管世界上很多人还在疑惑5G网络的完全建成到底需要多长时间,以及这对他们的生活和经济可能产生什么影响,一部分电信研究人员已经开始展望未来的6G时代了。

    华章科技
  • swoole安装时的问题

    waki
  • 2019-08-02hover.css 插件的使用

    用户4344670
  • 【学习】七天搞定SAS(三):基本模块调用

    搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

    小莹莹
  • IBM受生物启发,创造了一个超越传统的人工智能

    听说过FlyHash吗?这个算法的灵感来自于果蝇的嗅觉回路,它可以产生哈希码——物体的数字表示,其性能优于经典算法。但非常可惜的是,由于FlyHash使用随机投...

    AiTechYun
  • 优秀程序员必备的15大技能

    1.分享 尽可能地使用开源,并且如果有能力的话也可以把自己的成果分享给大家。整个社会的智慧结晶肯定比一些大公司自管自闭门造车要好。 2.公平的心态 不要以为你的...

    用户1667431
  • 如何为Hadoop集群选择正确的硬件

    当我们想搭建一个Hadoop大数据平台时,碰到的第一个问题就是我们到底该如何选择硬件。

    Fayson

扫码关注云+社区

领取腾讯云代金券