zoukankan      html  css  js  c++  java
  • 案例:跟随鼠标移动的图片

    ① 鼠标不断的移动,使用鼠标移动事件:mousemove

    ② 在页面中移动,给document注册事件

    ③ 图片要移动距离,而且不占位置,所以需要使用绝对定位

    核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片

    这个案例的原理可以用于商城网页的放大商品图的效果。

    <style>
        img {
                position: absolute;
        }
    </style>
    
    <body>
        <img src="images/angel.gif" alt="">
        <script>
            var pic = document.querySelector('img');
            document.addEventListener('mousemove', function(e) {
                // 1. mousemove只要鼠标移动1px,就会触发这个事件
                // 2. 核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片
                var x = e.pageX;
                var y = e.pageY;
                console.log('x坐标是' + x + ', y坐标是' + y);
                // 3. 千万不要忘记给 left 和 top添加px单位
                // 使鼠标在图片的正中间显示
                pic.style.left = x -50 + 'px';
                pic.style.top = y - 40 + 'px';
            });
        </script>
    </body>
  • 相关阅读:
    数据规范化(normalization)
    《穷爸爸富爸爸》笔记
    期望,方差,协方差,相关系数,协方差矩阵,相关系数矩阵,以及numpy实现
    numpy array和mat的乘法
    matlab多图排列
    POJ 3463
    POJ 3463
    Poj2449 第k短路
    Poj2449 第k短路
    POJ 3013
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12940661.html
Copyright © 2011-2022 走看看