【无标题】

最新推荐文章于 2024-07-25 10:18:55 发布

海南金福珠

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量99

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/wangpangzidan/article/details/124646920

版权

JavaScript DOM操作鼠标事件元素移动动态效果

关键词由CSDN通过智能技术生成

鼠标移动（js）

文章目录

鼠标移动（js）
一、效果图
二、html
三.chicken.js文件

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

在这里插入图片描述

二、html

<body>
    
</body>
<script src="chicken.js"></script>
<script>
    chicken();
</script>

三.chicken.js文件

代码如下（示例）：

function chicken()
{
    // let声明一个变量,o是声明一个对象
    // 创建一个标签div
    let oDiv = document.createElement('div');
    oDiv.id='chicken';
    // 声明变量用let
    for(let i=0;i<20;i++)
    {
        // 产生20小鸡
        // 创建标签,加到div里
        let oAside = document.createElement('aside');
        oDiv.appendChild(oAside);
       
    }
     // document最高文档对象,祖先
    document.body.appendChild(oDiv);
    // querySelectorAll(查询所有子标签)得到一个数组
    let aAside = oDiv.querySelectorAll("aside");
    // alert(aAside.length);
    // onmousemove鼠标移动,小鸡移动
    document.onmousemove = function(ev)
    {
        // 控制台显示
        
        // 兼容性表达式
        let e = ev || Event;
        for(let i=aAside.length-1;i>0;i--)
        {
            // console.log(aAside[i-1]);
            // 小鸡逐渐变大
            aAside[i-1].style.width=aAside[i].offsetWidth+1+'px';
            aAside[i-1].style.height=aAside[i].offsetHeight+1+'px';
            aAside[i].style.left=aAside[i-1].offsetLeft+'px';
            aAside[i].style.top=aAside[i-1].offsetTop+40+'px';
        }
        // pageX距离文档左边的距离
        aAside[0].style.left=e.pageX+'px';
        aAside[0].style.top=e.pageY+20+'px';
    }
}

注释：所有项目来源自老师课堂讲授

海南金福珠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

鼠标移动（js）文章目录鼠标移动（js）一、效果图二、html三.chicken.js文件提示：以下是本篇文章正文内容，下面案例可供参考一、效果图二、html<body> </body><script src="chicken.js"></script><script> chicken();</script>三.chicken.js文件代码如下（示例）：function chicken(
复制链接

扫一扫