首 页
创意产业
设计资讯
UI设计
平面设计
设计教程
网站建设
站长学院
素材下载
软件下载
当前位置:
首页
>>
网站建设
>> 正文
简单的伸缩效果
文章来自:设计学院 | 发表时间:2007-10-23 11:49:42
Source Code to Run
<!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>设计学院-ui163 缩放栏</title> <link href="../images/aa.ico" rel="shortcut icon"/> <style type="text/css"> <!-- #xx{border:#1989D7 1px solid;overflow:hidden;background:#E9FDFE;} #xx h4{margin:0;color:#fff;padding:5px 10px;font-size:12px;background:#1989D7 url('collapsed_yes.gif') no-repeat 180px center; cursor:pointer; } #xx .h42{background:#1989D7 url('collapsed_no.gif') no-repeat 180px center; } #xx p{font-size:12px;padding:5px;line-height:18px;margin:0;} --> </style> </head> <body> <div id="xx" style="width:200px;height:24px;"> <h4>栏目标题</h4> <p>Div+CSS,Div CSS教程,CSS2.0,XHTML教程,CSS Templates,CSS Web Design,Web Standards,Div CSS网页布 局,Web标准网页,ui,ue,design,web design,firework,flash,photoshop,网站制作,建站程序,网页设计 </p> </div> <script type="text/javascript"> var xx=document.getElementById("xx"); var xx2=xx.getElementsByTagName("h4")[0]; function myfunc(){ var i=parseInt(xx.style.height.replace("px","")) if(i<200){ i+=10; xx.style.height=i+"px"; }else{ clearInterval(t); xx2.onclick=function(){t2=setInterval(myfunc2,10)} xx2.title="点击收缩"; xx2.className="h42"; } } function myfunc2(){ var i=parseInt(xx.style.height.replace("px","")) if(i>24){ i-=10; xx.style.height=i+"px"; }else{ clearInterval(t2); xx2.onclick=function(){t=setInterval(myfunc,10)} xx2.title="点击展开"; xx2.className=""; } } xx2.onclick=function(){t=setInterval(myfunc,10)} </script> </body> </html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
相关文章
HashMap 使用
用js按比例重定图片尺寸
利用JS获取IE客户端IP及MAC的实现
JS Switch
几种常用禁止修改输入框的方法
javascript读写cookie的一个小demo
[教程]iframe 的用法与注意事项
如何用javascript控制上传文件的大小
javascript DOM模型之取得节点
用 onerror 获取错误信息
从A页面连接到B页面后并直接把B页面的隐藏层显示
如何制作随滚动条上下移动的广告层?
这是一个图片渐现特效
JS的&&和&,||和|运算符两个不同点
用jS实现flash文件的无刷新点选展示
网页实用技巧:随机显示不同页面背景