hyljava

js 网页中文本块碰壁反弹特效,有控制按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>碰壁反弹</title>
<style>
#text {width:500px;height:300px;border:10px red solid;margin:0 auto;position:relative;}
#div1 {width:50px;height:50px;border:5px yellow solid;position:absolute;}
</style>
</head>
<body>
<div id="text">
<div id="div1"></div>
</div>
<input type="button" value="开始"/>
<input type="button" value="变大"/>
<input type="button" value="变小"/>
<input type="button" value="停止"/>
</body>
<script type="text/javascript">
var text = document.getElementById("text");
var div1 = document.getElementById("div1");
var a = div1.offsetTop;
var b = div1.offsetLeft;
var id = true;
var id2 = true;
var ss=null;
var qw = 50;
var ge = true;
var gg = true;
function pbft(){
var width = text.clientWidth;
var height = text.clientHeight;
var width2 = div1.offsetWidth;
var height2 = div1.offsetHeight;
var width3 = width - width2;
var height3 = height - height2;
if(id){
if(b<width3){
b++;
this.div1.style.left = b + "px";
}else{
id = false;
}
}else{
if(b>0){
b--;
this.div1.style.left = b + "px";
}else{
id=true;
}
}
if(id2){
if(a<height3){
a++;
this.div1.style.top = a + "px";
}else{
id2 = false;
}
}else{
if(a>0){
a--;
this.div1.style.top = a + "px";
}else{
id2=true;
}
}
}
function dian(){
var da = document.getElementsByTagName("input")[1];
var xiao = document.getElementsByTagName("input")[2];
var stop = document.getElementsByTagName("input")[3];
var kais = document.getElementsByTagName("input")[0];
ade(da,'click',function(){bd()});
ade(xiao,'click',function(){bx()});
ade(stop,'click',function(){tz()});
ade(kais,'click',function(){ks()});
}
// Resources from http://www.veryhuo.com/down
function ade(a,b,c){
if (a.addEventListener)
{
a.addEventListener(b,c,false)
}else{
a["on"+b] = c ;
}
}
function ks(){
if (ss)
{
clearInterval(ss);
}
ss = setInterval(pbft,10);
}
function bd(){
if (qw<=200)
{
qw++;
this.div1.style.width = qw + "px";
this.div1.style.height = qw + "px";
clearTimeout(ge);
gg = setTimeout(bd,20)
}
}
function bx(){
if (qw>50)
{
qw--;
this.div1.style.width = qw + "px";
this.div1.style.height = qw + "px";
clearTimeout(gg);
ge = setTimeout(bx,20)
}
}
function tz(){
clearInterval(ss);
clearTimeout(gg);
clearTimeout(ge);
}
dian();
</script>
</html>
<!-- Liehuo Button BEGIN -->
<script type='text/javascript' src='http://www.veryhuo.com/Res/share/jscss/Liehuo_r.js?btn=r3.gif' charset=utf-8></script>
<!-- Liehuo Button END --><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/29262.html

posted on 2012-05-22 08:24 何云隆 阅读(359) 评论(0)  编辑  收藏 所属分类: JS


只有注册用户登录后才能发表评论。
网站导航: