|
一、 由来
曾有一些“纯属娱乐”的网页，有一些有奖问答题，但又故意让你点不到正确的答案:当你鼠标 建站知 识网
一靠近按钮，按钮就逃开了。自己也试着做了一个，供大家学习娱乐。 建站知识网
二、 原理 建站知识网
其实非常简单：当鼠标放到按钮上面时，改变按钮的位置(赋随机值)。
www.zzrv.cn
三、 代码
zzrv.cn
代码 建站知识网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>你中奖 了！！！！</title>
<style>
body {
text-align:center;
}
#d {
margin-left:0 auto;
margin-right:0 auto;
text-align:center;
}
input {
width:100px;
height:40px;
}
</style>
</head>
建站知识网
<body>
<div id="d">
<h2>恭喜你得了一等奖，点击领取：</h2>
<input type="button" onmouseover="move(this);" onclick="alert('骗你 的=_=');" value="确定" />
</div>
</body>
<script type="text/javascript" >
var height = document.documentElement.clientHeight - 100; //按钮可能上下移动的 距离
var width = document.documentElement.clientWidth - 40; //按钮可能左右移动 的距离
function move(obj) {
obj.style.position = "absolute";
obj.style.top = Math.random() * height + "px";
obj.style.left = Math.random() * width + "px";
}
www.zzrv.cn
function cancel() {
alert(" 你已放弃领奖，谢谢！");
window.close();
}
</script>
</html> |
建站知识网
建站知识网
四、 注意
建站知识网
(1) style下的属性在被赋值之前为空。 www.zzrv.cn
(2) 记得要在style.top/left等之后加上px，否则对于许多浏览器都不能正确设置该值。
|
