鼠标跟随效果制作 

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>
            window.onload=function(){
                document.onmousemove=function(e){
                    var event=e?e:window.event;//区分IE和火狐
                    $('#haha').css({
                        'top':(event.clientY+5)+'px',
                        'left':(event.clientX+5)+'px',
                        'display':'block'
                    });
                }
            }
        </script>
        <style>
            #test{
                font-weight:bold;
                font-size:30px;
                color:blue;
            }
            
            #haha{
                font-size:14px;
                border:1px solid gray;
                position:absolute;
                display:none
            }
        </style>
    </head>
    <body>
        <p id="haha">我能跟着鼠标移动。</p>
    </body>
</html>

这个例子是应用event对象的典型例子，值得注意的是在IE和火狐中对event对象的调用是有区别的，这里通过一点小技巧实现了浏览器兼容。

posted on 2012-04-12 11:32  crazymus  阅读(242)  评论(0)  编辑  收藏  举报

导航