这是代码

<head>
    <style>
        #divtoshow {position:absolute;display:none;}
        #onme {width:100%;height:100%;cursor:pointer}
    </style>
    <script type="text/javascript">
        var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
        var offX = 30;             /*X offset from mouse position*/
        var offY = 50;             /*Y offset from mouse position*/

        function mouseX(evt) {
            if (!evt)
                evt = window.event;
            if (evt.pageX)
                return evt.pageX;
            else if (evt.clientX)
                return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);
            else return 0;
        }
        function mouseY(evt) {
            if (!evt)
                evt = window.event;
            if (evt.pageY)
                return evt.pageY;
            else if (evt.clientY)
                return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
            else
                return 0;
        }
        function follow(evt) {
            var obj = document.getElementById(divName).style;
            obj.left = (parseInt(mouseX(evt))-offX) + 'px';
            obj.top = (parseInt(mouseY(evt))-offY) + 'px';
        }

       document.onmousemove = follow;
    </script>
</head>

<body>
    <div id="divtoshow">
        <img src="http://www.rw-designer.com/cursor-preview/35050.png">
    </div>
    <br><br>
    <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>
        Mouse over this
    </div>
</body>


此代码用于使对象(在我的情况下为图像)跟随鼠标指针。我已经将javascript放在了标签中,但我希望将html应用于整个网站,而不是一页或一篇文章。
我该怎么做?

最佳答案

尝试这个:-

//For adding javascript and css
    add_action('wp_enqueue_scripts','wdm_test_script');
    function wdm_test_script(){ ?>
        <style>
            #divtoshow {position:absolute;display:none;}
            #onme {width:100%;height:100%;cursor:pointer}
            </style>
            <script type="text/javascript">
            var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
            var offX = 30;          /*X offset from mouse position*/
            var offY = 50;          /* Y offset from mouse position*/

            function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX)          return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
            function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

            function follow(evt) {
                var obj = document.getElementById(divName).style;
                obj.left = (parseInt(mouseX(evt))-offX) + 'px';
                obj.top = (parseInt(mouseY(evt))-offY) + 'px';
        }
           document.onmousemove = follow;
           </script>
    <?php }
//For adding content to all pages
    add_filter('the_content','wdm_demo_content',1,1);
    function wdm_demo_content($content){
        ob_start();
    ?>
        <div id="divtoshow"><img src="http://www.rw-designer.com/cursor-preview/35050.png"></div>
            <br><br>
            <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>Mouse over this</div>

    <?php
    $contents = ob_get_contents();
    ob_end_clean();
    return $contents.$content;
    }

09-11 12:01