<!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>滑动及Position的定义</title>
<style>
* {margin:0; padding:0;font-size:12px; }
div{list-style:none;height:100px; width:100px;cursor:pointer;margin-top:20px;display:block; height:100px;line-height:100px;position:relative;color:#fff;background:#000}
div ul {margin:0;line-height:20px;display:none;overflow:hidden; width:100px;padding-bottom:20px;background:#c00; position:absolute; top:0px; left:99px; color:#fff;z-index:3; width:0px}
div ul li{line-height:20px;margin:5px;white-space:nowrap;height:20px;width:100px;background:none;margin-right:0;}
</style>
</head>
<script type="text/javascript">
<!--
var a,b,c;
function show(t,s){
var max_h=150;
var $t=t.getElementsByTagName("ul")[0];
var h=$t.clientWidth;
$t.style.display='block';
if(s!=null){window.clearInterval(s);}
var anim = function(){
h += 10;
if(h >= max_h){
$t.style.width = max_h+ "px";
if(s!=null){window.clearInterval(s);}
}
else{
$t.style.width = h+ "px" ;
}
}
s= window.setInterval(anim,20);
}
function hidden(t,s){
var $t=t.getElementsByTagName("ul")[0];
var h=$t.clientWidth;
if(s!=null){window.clearInterval(s);}
var anim = function(){
h -= 10;
if(h <= 10){
$t.style.width = "0px";
$t.style.display='none';
if(s!=null){window.clearInterval(s);}
}
else{
$t.style.width = h+ "px";
}
}
s = window.setInterval(anim,20);
}
//-->
</script>
<body>
<div οnmοuseοver="show(this,a)" οnmοuseοut="hidden(this,a)">望岳•杜甫
<ul id="a1">
<li>岱宗夫如何？齐鲁青未了。</li>
<li>造化钟神秀，阴阳割昏晓。</li>
<li>荡胸生层云，决眦入归鸟。</li>
<li>会当凌绝顶，一览众山小。</li>
</ul>
</div>
<div οnmοuseοver="show(this,b)" id="a2" οnmοuseοut="hidden(this,b)">望岳•杜甫
<ul>
<li>岱宗夫如何？齐鲁青未了。</li>
<li>造化钟神秀，阴阳割昏晓。</li>
<li>荡胸生层云，决眦入归鸟。</li>
<li>会当凌绝顶，一览众山小。</li>
</ul>
</div>
<div οnmοuseοver="show(this,c)" id="a3" οnmοuseοut="hidden(this,c)">望岳•杜甫
<ul>
<li>岱宗夫如何？齐鲁青未了。</li>
<li>造化钟神秀，阴阳割昏晓。</li>
<li>荡胸生层云，决眦入归鸟。</li>
<li>会当凌绝顶，一览众山小。</li>
</ul>
</div>
</body>
</html>
4860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
