[JavaScript]简单跟随鼠标移动的文字

最新推荐文章于 2022-05-27 11:55:19 发布

转载最新推荐文章于 2022-05-27 11:55:19 发布 · 179 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/trampt/archive/2009/09/09/1563129.html

文章标签：

#javascript #xhtml #ViewUI

本文提供了一个使用JavaScript实现的简单示例，演示如何创建一个可以跟随鼠标移动的浮动窗口。通过监听鼠标移动事件并更新元素的位置，使得页面中的一个自定义窗口能够随着用户的鼠标移动而移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Simple Example</title>
<script type="text/javascript">
    function New(aClass,aParams)
    {
        function new_()
        {
            aClass.Create.apply(this,aParams);
        }
        new_.prototype=aClass;
        return new new_();
    }
    function BindAsListener(obj,handler)
    {
        return function(e)
        {
            return handler.call(obj);
        }
    }
    function addEventHandler(obj,oEventType,handler)
    {
        if(obj.addEventListener)
        {
            obj.addEventListener(oEventType,handler,false);
        }
        else if(obj.attachEvent)
        {
            obj.attachEvent("on"+oEventType,handler);
        }
        else
        {
            obj["on"+oEventType]=handler;
        }
    }
    var Float=
    {
        Create:function()
        {
            this._obj=document.createElement("div");

            this._obj.innerHTML="hello world";

            this._obj.style.cssText="position:absolute;border:1px solid #ccc;";

            document.body.insertBefore(this._obj, document.body.childNodes[0]);

            addEventHandler(document.body,"mousemove",BindAsListener(this,this.MouseMove));
        },
        MouseMove:function(ev)
        {
            ev=ev||window.event;
            this._obj.style.left=ev.pageX?ev.pageX:ev.clientX;
            this._obj.style.top=ev.pageY?ev.pageY:ev.clientY;
        }
    }

</script>
</head>
<body>
<div id="c"></div>
</body>
<script type="text/javascript">var ob=New(Float,[]);</script>
</html>

转载于:https://www.cnblogs.com/trampt/archive/2009/09/09/1563129.html