hyljava

統計

隨筆 - 110
文章 - 1
評論 - 47
引用 - 0

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

文章分類

文章檔案

2012年4月 (1)

相冊

me

搜索

閱讀排行榜

評論排行榜

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>

<script type='text/javascript' src='http://www.veryhuo.com/Res/share/jscss/Liehuo_r.js?btn=r3.gif' charset=utf-8></script>
<br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火網，原文：http://www.veryhuo.com/a/view/29262.html

posted on 2012-05-22 08:24 何云隆閱讀(363) 評論(0) 編輯收藏所屬分類: JS

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 解決SoapUI的Request URL不支持大寫 JSP中EL表達式三元(三目)運算符的使用 jquery校驗輸入框內容通過js事件獲取元素中的屬性值 miniui超級強悍UI js中動態生成表格監聽鍵盤按下鍵的值（兼容IE與其他瀏覽器）文本框中只能是數字輸入或者是字母輸入刷新窗口的方法 js中對象冒充示例