栏目导航

热点推荐

阅览排行

您当前的位置是：主页>网络编程>Javascript教程>

Javascript之逃走的按钮

www.jz123.cn 2009-12-25 来源: 中国建站责任编辑(袁袁) 我要投递新闻

　一、由来

　　曾有一些“纯属娱乐”的网页，有一些有奖问答题，但又故意让你点不到正确的答案:当你鼠标

　　一靠近按钮，按钮就逃开了。自己也试着做了一个，供大家学习娱乐。

　　二、原理

　　其实非常简单：当鼠标放到按钮上面时，改变按钮的位置(赋随机值)。

　　三、代码

　　代码

　　<!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";
　　}
　　function cancel() {
　　alert("你已放弃领奖，谢谢！");
　　window.close();
　　}
　　</script>
　　</html>

　　四、注意

　　(1) style下的属性在被赋值之前为空。

　　(2) 记得要在style.top/left等之后加上px，否则对于许多浏览器都不能正确设置该值。

点击浏览当日最新新闻资讯

顶一下

上一篇：玩转Javascript之JQ实现双色表格下一篇：JSON详细学习之JSON in JavaScript

栏目导航

热点推荐

阅览排行

Javascript之逃走的按钮

相关文章列表

评论总数：0 条 [ 查看全部 ] 网友评论