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>
  • 相关阅读:
    java 截取pdf
    webService 发送soap请求,并解析返回的soap报文
    常用网址
    扫描文件夹下代码行数
    CodeMIrror 简单使用
    常用 linux 命令(部分)
    windows下RabbitMQ 监控
    一定要写的日志
    创业思路
    10月9日后计划
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12940661.html
Copyright © 2011-2022 走看看