• 5.git远程仓库的创建（http,ssh）

    目录

     大致步骤：

    hover的小知识点：

    offsetX： 鼠标坐标到元素的左侧的距离

    offsetWidth： 除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

    offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

    实现效果：

     完整HTML代码：

     完整VUE代码：

     大致步骤：

    首先我们应该先构思好布局：

    1. 先有一个div存放原始图片
    2. 再有一个div存放放大后的图片
    3. 来一个遮罩层让用户知道自己正在观察哪个区域，并且实现遮罩层跟随鼠标移动而移动
    4. 显示放大后的图片

    OK，大致就是这几个步骤。

    这里在说一下关于代码中的css布局最后三行，在这里我踩了很大一个坑，因为在页面结构中big类是event的邻居兄弟类，而mask类也是兄弟类但是不邻接。并且这两个类的display我最初设置的是none，就是最初没有结构不显示。在我写代码时我使用.event:hover .big,.mask{display:block}发现一直没有效果，并且我开始并没有发现是这里错了，导致纠结了很久。

    1.  .event1:hover + .big ,
    2.    .event1:hover ~ .mask {
    3.     display: block;
    4.    }

    hover的小知识点：

    hover后面一般都是控制子元素，无法控制父元素的效果
    hover更改同级（兄弟）元素属性：
    更改兄弟元素又分两种情况：

    • 需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素，在hover后面使用‘+’号链接就行，就是 .event1:hover + .big 
    • 需要改变的兄弟元素不是当前元素的邻接元素： .event1:hover ~ .mask

    offsetX： 鼠标坐标到元素的左侧的距离

    offsetWidth： 除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

    offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

           

     

     url图片地址改成自己的啊，不要和我一样！！！！！

    实现效果：

    图片本身就比较糊，不是放大的原因

     

     完整HTML代码：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.    
    6.     <title>放大镜实现title>
    7.     
    8.   head>
    9.   <body>
    10.     <div class="spec-preview">
    11.       <img src="./111jpg.jpg" />
    12.       <div class="event1" id="event1" onmousemove="mouseMove(event)">div>
    13.       <div class="big">
    14.         <img src="./111jpg.jpg"  id="bigImg"/>
    15.       div>
    16.       <div class="mask">div>
    17.     div>
    18.   body>
    19.   <style>
    20.     .spec-preview {
    21.       position: relative;
    22.       width: 400px;
    23.       height: 400px;
    24.       border: 1px solid #ccc;
    25.     }
    26.     .spec-preview>img {
    27.       width: 100%;
    28.       height: 100%;
    29.     }
    30.  
    31.      .event1 {
    32.       width: 100%;
    33.       height: 100%;
    34.       position: absolute;
    35.       top: 0;
    36.       left: 0;
    37.       z-index: 998;
    38.     }
    39.     .mask {
    40.       width: 50%;
    41.       height: 50%;
    42.       background-color: rgba(0, 255, 0, 0.3);
    43.       position: absolute;
    44.       left: 0;
    45.       top: 0;
    46.       display: none;
    47.     }
    48.  
    49.     .big {
    50.       width: 100%;
    51.       height: 100%;
    52.       position: absolute;
    53.       top: -1px;
    54.       left: 105%;
    55.       border: 1px solid rgb(212, 11, 11);
    56.       /* //把下面这行代码去掉，试着理解为什么上面需要乘以-2 */
    57.       overflow: hidden;
    58.       z-index: 998;
    59.       display: none;
    60.       background: white;
    61.     }
    62.     .big img {
    63.       /* 这里的宽高实现放大两倍的效果 */
    64.       width: 200%;
    65.       max-width: 200%;
    66.       height: 200%;
    67.       position: absolute;
    68.       left: 0;
    69.       top: 0;
    70.     }
    71.    .event1:hover + .big ,
    72.    .event1:hover ~ .mask {
    73.     display: block;
    74.    }
    75.  
    76.   style>
    77.   <script>
    78.   // var event1=document.getElementById('event1')
    79.   // console.log(event1)
    80.   var big=document.getElementById('bigImg')
    81.   //获取遮罩层dom实现遮罩层跟随鼠标位置移动
    82.   var mask = document.querySelector('.mask');
    83.   function mouseMove(event){
    84.     // console.log(big.style)
    85.         //offsetX：鼠标坐标到元素的左侧的距离
    86.       //offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和
    87.       let left = event.offsetX - mask.offsetWidth / 2;
    88.       //offsetY：鼠标坐标到元素的顶部的距离
    89.       //offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
    90.       let top = event.offsetY - mask.offsetHeight / 2;
    91.       //  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的
    92.         //超出图片左侧
    93.       if (left <= 0) left = 0;
    94.       //超出图片右侧
    95.       if (left >= mask.offsetWidth) left = mask.offsetWidth;
    96.       if (top <= 0) top = 0;
    97.       if (top >= mask.offsetHeight) top = mask.offsetHeight;
    98.       //  修改元素的left|top属性值
    99.       //遮罩层
    100.       mask.style.left = left + "px";
    101.       mask.style.top = top + "px";
    102.       //放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的
    103.         //与css中width：200%，height：200%相对应，建议以后放大倍数为2n
    104.       big.style.left = -2*left + "px";
    105.       big.style.top =  -2*top + "px";
    106.   }
    107.    
    108.   script>
    109. html>

    认识到一个元素能够跟随鼠标移动而移动那么肯定是使用了定位，这是必须得知道的

     完整VUE代码：

     :src的意思是动态绑定一个图片资源地址

    1. <template>
    2.   <div class="spec-preview">
    3.     <img :src="imgObj.imgUrl" />
    4.     <div class="event" @mousemove="handler">div>
    5.     <div class="big">
    6.       <img :src="imgObj.imgUrl" ref="big" />
    7.     div>
    8.     <div class="mask" ref="mask">div>
    9.   div>
    10. template>
    11.  
    12. <script>
    13.  
    14. export default {
    15.  methods:{
    16.     handler(event){
    17.      let big=this.$refs.big
    18.      //获取遮罩层dom实现遮罩层跟随鼠标位置移动
    19.      let mask=this.$refs.mask;
    20.      //offsetX：鼠标坐标到元素的左侧的距离
    21.      //offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和
    22.      let left=event.offsetX-mask.offsetWidth/2;
    23.      //offsetY：鼠标坐标到元素的顶部的距离
    24.      //offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
    25.      let top=event.offsetY-mask.offsetHeight/2;
    26.     //  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的
    27.     if(left<=0)left=0;
    28.     if(left>=mask.offsetWidth)left=mask.offsetWidth;
    29.     if(top<=0)top=0;
    30.     if(top>=mask.offsetHeight)top=mask.offsetHeight
    31.     //  修改元素的left|top属性值
    32.     //遮罩层
    33.     mask.style.left=left+'px';
    34.     mask.style.top=top+'px'
    35.     //放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的
    36.     big.style.left=-2*left+'px'
    37.     big.style.top=-2*top+'px'
    38.     }
    39.     }
    40. }
    41.  
    42. script>

    放大镜就分享到这里，如有问题，欢迎指出~~~~~~如果对你有帮助欢迎点赞收藏一波哟

  • 相关阅读:
    SpringCloud Stream消息驱动
    Strus2 系列漏洞
    Python Asyncio 之网络编程方法详解
    vue中关闭eslint的检测，eslint的配置，及格式化文件时的配置
    Java手写插入排序和算法案例拓展
    Android Jetpack之ViewModel、LiveData
    初识Kafka
    1.7.3、计算机网络体系结构分层思想举例
    学习SpringMVC（1）
    记录SpringCloud使用Zookeeper做服务中心遇到的问题
  • 原文地址：https://blog.csdn.net/weixin_59334478/article/details/126809818