这个效果如何实现,多谢 有一个DIV,高度不固定,我想做一个函数,实现这个效果点一个按钮后,div逐渐消失,例如高度从100逐渐减少到0,最后消失;再点一下按钮,div高度从0再逐渐增加到100 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 window.setInterval//隔段时间改变div高度 <div id="f" style="width:60;height:60;border:2px solid #cccccc;padding:20px;position:absolute;z-index:10;background:url('images/window.jpg');"> <span id="lt" style="color:#red;font-size:14px;height:20px;background-color:#8866ff;"></span><input type="button" value="×" style="font-size:14px;height:20px;width:20px;color:#009900;font-weight:bold;" title="关闭窗口"; onClick="t2=t2+t3"></input><!--添加浮动新闻--><a target=_blank href='#' style="font-size:13px;"><br /><br />网上成绩查询定于1月20日上午8:00开放!</a></div>var w=250;var h=200;var d=document.body;var l=(d.clientWidth-w)/2;var t=(d.clientHeight-h)/2;var ft=1;var step=50;var time=10;var t1=ft*1000/step;var t2=60;var t3=(w-t2)*time/ft+w;var t4=0;var t5=time;var t6=t2;function flashad(){if(l<0||t<0){t2+=t3;}if(t2>=t3){t5=0;if(t4>t6){t4-=(w-t6)/t1;} else{clearTimeout(timer);f.style.display="none";return;}} if(t2<=w){t4=t2;t5=time;}if(t2>w&&t2<t3){t5=Math.floor(time-(t2-w)/(w-t6)*ft);} t2+=(w-t6)/t1;f.style.width=t4-50;f.style.height=(t6*h/w)+(t4-t6)*(h-t6*h/w)/(w-t6)-30; f.style.left=(t4-t6)*l/(w-t6)+d.scrollLeft-250;f.style.top=100+(t4-t6)*t/(w-t6)+d.scrollTop; lt.style.width=t4+28;lt.innerText=t5+"秒后自动关闭 "; var timer=setTimeout("flashad()",step);}flashad(); 这个可以用jQuery的tigger,很方便 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>openDiv.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var speed = 50; var maxheight = 450; //点击checkBox引发此函数 function divPopup(event, item){ var ruleDiv = document.getElementById("smsDiv"); if(item.checked){ DivShow(ruleDiv); }else{ DivHide(ruleDiv); } } //DIV展开与收起的两个函数 function DivShow(item) { var temp = item.style.height; item.style.height = parseInt(temp.substring(0, temp.length - 2)) + speed + "px"; temp = item.style.height; if(parseInt(temp.substring(0, temp.length - 2)) < maxheight){ setTimeout(function () { DivShow(item); }, 100); } } function DivHide(item) { var temp = item.style.height; item.style.height = parseInt(temp.substring(0, temp.length - 2)) - speed + "px"; temp = item.style.height; temp = parseInt(temp.substring(0, temp.length - 2)); if(temp > 0){ setTimeout(function () { DivHide(item); }, 100); } } </script> </head> <body> <input type="checkbox" onclick="divPopup(event, this)"/> <div id="smsDiv" style="border: 1px solid red; width: 200px; height: 200px; background-color: #CCCCFF;"></div> </body></html> <!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=gb2312" /> <title>无标题文档</title> <style> #aa { width: 500px; height: 30px; line-height: 30px; background: red; } #bb { width: 500px; height: 300px; background: yellow; } #saa { float: right; color: #FFF; font-weight: bold; cursor: pointer; } .a1 { background: black; width: 50px; height: 30px; } .a2 { background: blue; width: 50px; height: 30px; } </style> </head> <body> <div id="aa"> <span id="saa" class="a1"></span> </div> <div id="bb"></div> <div style="width: 500px; height: 300px; background: green; display: none;"></div> <script type="text/javascript"> function $(id){return document.getElementById(id)} var b = 300; function aaa() { var bb = document.getElementById('bb'); if(b <= 300) { b += 5; if (b > 300) {return;} bb.style.height = b+"px"; } setTimeout("aaa()", 50); } function bbb(){ var bb = document.getElementById('bb'); if(b >= 0){ b -= 5; if (b < 0) {return;} bb.style.height = b+"px"; } setTimeout("bbb()", 50); } $('saa').onclick = function() { if($('saa').className == "a1"){ //$("bb").style.display = "none"; $('saa').className = "a2"; //setTimeout("bbb()",1000); bbb(); } else { //$("bb").style.display = "block"; $('saa').className = "a1"; //setTimeout("aaa()",1000); aaa(); } } </script> </body></html>当然,如果用jquery就很简单了 <script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $('#btnShow').click(function(event){ $('#divPop').slideToggle(500); }); });</script></head><body><div> <input type="button" id="btnShow" value="显示提示文字" /></div><div id="divPop" style="background-color:#f0f0f0; border:1px solid #000; display:none; width:300px; height:100px;"></div> 如何让页面刷新后所选下拉列表框的值不变 点击按钮后,url为什么会改变? 关于这个图片滚动,我遇到了问题了 页面中JS冲突请教高手如何解决 js 禁止鼠标滑轮滚动的事件是什么? 为啥FILTER:progid:DXImageTransform.Microsoft.Gradient(非信任站点)无效 js动态树解析xml 求不规则TABLE赋值问题~`` 如何定议滚动条的颜色? JS里面为什么可以这样写,求哥哥们解答 急!!!JS对象内部访问问题 选项卡js扩展修改,如何将"selected"设定为变量?
<div id="f" style="width:60;height:60;border:2px solid #cccccc;padding:20px;position:absolute;
z-index:10;background:url('images/window.jpg');">
<span id="lt" style="color:#red;font-size:14px;height:20px;background-color:#8866ff;"></span>
<input type="button" value="×" style="font-size:14px;height:20px;width:20px;color:#009900;font-weight:bold;" title="关闭窗口"; onClick="t2=t2+t3"></input><!--添加浮动新闻-->
<a target=_blank href='#' style="font-size:13px;">
<br /><br />网上成绩查询定于1月20日上午8:00开放!
</a></div>var w=250;var h=200;var d=document.body;var l=(d.clientWidth-w)/2;var t=(d.clientHeight-h)/2;var ft=1;
var step=50;var time=10;var t1=ft*1000/step;var t2=60;var t3=(w-t2)*time/ft+w;var t4=0;var t5=time;var t6=t2;
function flashad(){if(l<0||t<0){t2+=t3;}if(t2>=t3){t5=0;if(t4>t6){t4-=(w-t6)/t1;}
else{clearTimeout(timer);f.style.display="none";return;}}
if(t2<=w){t4=t2;t5=time;}if(t2>w&&t2<t3){t5=Math.floor(time-(t2-w)/(w-t6)*ft);}
t2+=(w-t6)/t1;f.style.width=t4-50;f.style.height=(t6*h/w)+(t4-t6)*(h-t6*h/w)/(w-t6)-30;
f.style.left=(t4-t6)*l/(w-t6)+d.scrollLeft-250;f.style.top=100+(t4-t6)*t/(w-t6)+d.scrollTop;
lt.style.width=t4+28;lt.innerText=t5+"秒后自动关闭 ";
var timer=setTimeout("flashad()",step);}
flashad();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>openDiv.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var speed = 50;
var maxheight = 450;
//点击checkBox引发此函数
function divPopup(event, item){
var ruleDiv = document.getElementById("smsDiv");
if(item.checked){
DivShow(ruleDiv);
}else{
DivHide(ruleDiv);
}
}
//DIV展开与收起的两个函数
function DivShow(item) {
var temp = item.style.height;
item.style.height = parseInt(temp.substring(0, temp.length - 2)) + speed + "px";
temp = item.style.height;
if(parseInt(temp.substring(0, temp.length - 2)) < maxheight){
setTimeout(function () {
DivShow(item);
}, 100);
}
}
function DivHide(item) {
var temp = item.style.height;
item.style.height = parseInt(temp.substring(0, temp.length - 2)) - speed + "px";
temp = item.style.height;
temp = parseInt(temp.substring(0, temp.length - 2));
if(temp > 0){
setTimeout(function () {
DivHide(item);
}, 100);
}
}
</script>
</head>
<body>
<input type="checkbox" onclick="divPopup(event, this)"/>
<div id="smsDiv" style="border: 1px solid red; width: 200px; height: 200px; background-color: #CCCCFF;"></div>
</body>
</html>
<!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=gb2312" />
<title>无标题文档</title>
<style>
#aa {
width: 500px;
height: 30px;
line-height: 30px;
background: red;
}
#bb {
width: 500px;
height: 300px;
background: yellow;
}
#saa {
float: right;
color: #FFF;
font-weight: bold;
cursor: pointer;
}
.a1 {
background: black;
width: 50px;
height: 30px;
}
.a2 {
background: blue;
width: 50px;
height: 30px;
}
</style>
</head> <body>
<div id="aa">
<span id="saa" class="a1"></span>
</div>
<div id="bb"></div>
<div style="width: 500px; height: 300px; background: green; display: none;"></div>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var b = 300;
function aaa() {
var bb = document.getElementById('bb');
if(b <= 300) {
b += 5;
if (b > 300) {return;}
bb.style.height = b+"px";
}
setTimeout("aaa()", 50);
}
function bbb(){
var bb = document.getElementById('bb');
if(b >= 0){
b -= 5;
if (b < 0) {return;}
bb.style.height = b+"px";
}
setTimeout("bbb()", 50);
}
$('saa').onclick = function() {
if($('saa').className == "a1"){
//$("bb").style.display = "none";
$('saa').className = "a2";
//setTimeout("bbb()",1000);
bbb();
} else {
//$("bb").style.display = "block";
$('saa').className = "a1";
//setTimeout("aaa()",1000);
aaa();
}
}
</script> </body>
</html>
当然,如果用jquery就很简单了
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnShow').click(function(event){
$('#divPop').slideToggle(500);
});
});
</script>
</head><body>
<div>
<input type="button" id="btnShow" value="显示提示文字" />
</div>
<div id="divPop" style="background-color:#f0f0f0; border:1px solid #000; display:none; width:300px; height:100px;">
</div>