zoukankan      html  css  js  c++  java
  • 随鼠标移动的图标

    <!DOCTYPE html>
    <html lang="en">
        <head>
    <meta charset="utf-8">
            <style type="text/css">
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>
        </head>
        <body>
            <img src="imgs/snow.gif" id="snow">
            <script type="text/javascript">
                var img = document.getElementById('snow');
                //1.无脑写缓动动画公式
                var leaderX = 0, leaderY = 0;
                var targetX = 0, targetY = 0;
                setInterval(function(){
                    leaderX = leaderX + (targetX - leaderX) / 10;
                    leaderY = leaderY + (targetY - leaderY) / 10;
                    img.style.left = leaderX + 'px';
                    img.style.top = leaderY + 'px';
                }, 10);
                //2.给document注册onclick
                document.onclick = function(event){
                    // alert('11');
                    var evt = event || window.event;
                    targetX = evt.clientX - img.offsetWidth / 2;
                    targetY = evt.clientY - img.offsetHeight / 2;
                }
            </script>
        </body>
    </html>
  • 相关阅读:
    RAID的详细配置
    RAID的基本介绍
    Linux的远程管理
    Linux防火墙iptables的基础
    【oacle入门】表空间类型
    【oracle入门】数据完整性约束
    【oracle入门】数据模型
    【Oracle入门】数据库的二级映像
    【oracle入门】数据库系统结构----三级模式
    【oracle入门】Oracle数据库11g企业版主要优点
  • 原文地址:https://www.cnblogs.com/mmit/p/11257759.html
Copyright © 2011-2022 走看看