zoukankan      html  css  js  c++  java
  • 03JavaScript程序设计修炼之道 2019-06-27_21-51-24 图片跟随


    18event-demo.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            img {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <img src="img/cxy.jpeg" alt="">
        <script>
            var oImg = document.querySelector("img");
            document.onmousemove = function(e) {
                var e = e || event;
                var x = e.pageX;
                var y = e.pageY;
                // 设置图片的坐标
                oImg.style.left = (x-60) + "px";
                oImg.style.top = (y-60) + "px";
            }
        </script>
    </body>
    </html>

     

  • 相关阅读:
    spring mvc 总结
    linux安装tomcat及优化
    mysql支持emoji表情
    面试问题
    linux安装jdk mysql
    webstorm 介绍
    spring 总结
    UML工具
    js bom dom
    awt多线程聊天
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11108902.html
Copyright © 2011-2022 走看看