这是代码
<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;
}
关于javascript - 在 WordPress 中集成 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31048248/