如何使用JavaScript制作网页中跟随鼠标移动的图形？

最新推荐文章于 2023-09-08 09:01:59 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-09-08 09:01:59 发布

阅读量744

点赞数 3

分类专栏： JavaScript CSS3 HTML5 文章标签： js javascript css html dom

本文链接：https://blog.csdn.net/m0_47015897/article/details/115442070

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

注：本案例主要演示网页中的几个坐标属性的用法（clientX，clientY，pageX，pageY），如有疑问可去B站观看尚硅谷李立超老师的JS教程（https://www.bilibili.com/video/BV1YW411T7GX?p=112&spm_id_from=pageDriver）。

效果图：
在这里插入图片描述
源码及解析：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>练习</title>
        <style>
            #box1{
                height: 100px;
                width: 100px;
                background-color: aqua;
                position: absolute;
            }
            #bd{
                width: 1000px;
                height: 1000px;
            }
        </style>
        <script>
            window.onload = function(){
                var box1 = document.getElementById("box1");
                var bd = document.getElementById("bd");
                
                document.onmousemove = function(e){
                    //去除版本缺陷
                   	/* 
                        在IE8中，响应函数被触发时，浏览器不会传递事件对象，
                            在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
                     */
                    e = e || window.e;

                    /* 
                        获取到鼠标的坐标
                            clientX和clientY
                            用于获取鼠标在当前的可见窗口的坐标
                            div的偏移量，是相对于整个页面的

                            pageX和pageY可以获取鼠标相对于当前页面的坐标
                                但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不可使用
                     */

                    var cx = e.clientX;
                    var cy = e.clientY;
                    
                    /* 
                        获取滚动条滚动的距离
                            chrome认为浏览器的滚动条是body的，可以供过body.scrollTop来获取
                            火狐等浏览器认为浏览器的滚动条是html的
                     */

                    
                    var stY = document.documentElement.scrollTop;
                    var stX = document.documentElement.scrollLeft;
                    
                    cy += stY;
                    cx += stX;

                    console.log(cx+"  "+cy+"  "+stX+"  "+stY);

                    box1.style.left = cx-box1.clientHeight/2+2+"px";
                    box1.style.top = cy-box1.clientWidth/2+2+"px";
                };
            };  
        </script>
    </head>
    <body id="bd">
        <div id="box1"></div>
    </body>
</html>

希望本案例对你有所帮助，加油！

Etui۹(･༥･´)و ̑̑

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用JavaScript制作网页中跟随鼠标移动的图形？

注：本案例主要演示网页中的几个坐标属性的用法（clientX，clientY，pageX，pageY），如有疑问可去B站观看尚硅谷李立超老师的JS教程（https://www.bilibili.com/video/BV1YW411T7GX?p=112&spm_id_from=pageDriver）。效果图：源码及解析：<!DOCTYPE html><html> <head> <meta charset="UTF-8"&gt
复制链接

扫一扫