>我有一个示例代码:
JavaScript:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
}
function positionButton(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
在 html 中:
<div id="button" style="position: absolute; opacity: 1; z-index: 100; width:27px; height:20px; overflow:hidden">
test test
</div>
<script type="text/javascript" src="script.js"></script>
<script>
var bootstrap = new bootstrap('button');
bootstrap.init();
</script>
当我运行代码时,结果没有运行事件鼠标移动,如何解决?
按钮的样式。您的代码:
width:27px;height:20px;
我改为
width:60px;height:50px;
我在 IE9.It 作品上尝试过。
运行我创建的这个 jsFiddle,对您的代码稍作修改:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
};
function positionButton(e) {
e = e || window.event;
var cursor = {
x: 0,
y: 0
};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
var bootstrap = new bootstrap('button');
bootstrap.init();
它与Chrome,Safari和FFX一起正常工作。
您的浏览器控制台中是否有任何错误?
脚本.js是否正确下载?
您使用的是什么浏览器?