网页漂浮物的一点尝试

alenalen [楼主]

中级会员

帖子: 168
体力: 464
威望: 5
离线: 9 天

1^# 大中小发表于 2008-6-27 14:28

我的初衷不是做浮动广告,
但是我的导航菜单被theworld当广告给杀了,
于是有了以下的想法.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#sub{
  list-style:none;
  position:absolute;
  left:50%;
  top:160px;
}
#sub li{
  position:absolute;
  width:120px;
  height:90px;
  padding:0px;
}
#sub a{
  text-decoration:none;
  display:block;
  width:80px;
  height:60px;
  border:1px dotted #f99;
  background-color:#fee;
  color:#f90;
  line-height:60px;
  text-align:center;
  margin:15px 20px;
}
#sub a img{
  display:none;
  height:40px;
  border:0px;
}
#sub a:hover{
  width:114px;
  height:84px;
  border:3px solid #ADCD3C;
  background-color:#EFF7FF;
  color:#92B0DD;
  line-height:30px;
  margin:0px;
}
#sub a:hover img{
  display:block;
}
</style>
<ul id="sub">
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
</ul>
<script type="text/javascript">
var x=230,y=100,actdt=Math.PI/160,t0=0,p2=2*Math.PI;
var line=document.getElementById('sub').getElementsByTagName('li');
var ll=line.length,setdt=p2/ll;
for(i=0;i-ll;i++){
  line[i].getElementsByTagName('a')[0].onmouseover=showdetail;
  line[i].getElementsByTagName('a')[0].onmouseout=hidedetail;
}
var handle=setInterval('roll()',60);
function showdetail(){
  clearInterval(handle);
}
function hidedetail(){
  handle=setInterval('roll()',60);
}
function roll(){
  if(p2<(t0+=actdt)) t0-=p2;
	var t=t0;
	for(i=0;i-ll;i++){
	  t+=setdt;
		line[i].style.left=Math.floor(x*Math.sin(t))-60+'px';
		line[i].style.top=Math.floor(y*Math.cos(t))-45+'px';
	}
}
</script>

提示：您可以先修改部分代码再运行

以上代码用改变top和left来实现浮动,被干掉了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#sub{
  list-style:none;
  position:absolute;
  left:50%;
  top:160px;
  padding:0;
}
#sub li{
  position:absolute;
  width:120px;
  height:90px;
  padding:0px;
  margin:0;
}
#sub a{
  text-decoration:none;
  display:block;
  width:80px;
  height:60px;
  border:1px dotted #f99;
  background-color:#fee;
  color:#f90;
  line-height:60px;
  text-align:center;
  margin:15px 20px;
}
#sub a img{
  display:none;
  height:40px;
  border:0px;
}
#sub a:hover{
  width:114px;
  height:84px;
  border:3px solid #ADCD3C;
  background-color:#EFF7FF;
  color:#92B0DD;
  line-height:30px;
  margin:0px;
}
#sub a:hover img{
  display:block;
}
</style>
<ul id="sub">
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
  <li><a href="#">……<img src="icon/nonimg.gif" /></a></li>
</ul>
<script type="text/javascript">
var x=230,y=100,actdt=Math.PI/160,t0=0,p2=2*Math.PI;
var line=document.getElementById('sub').getElementsByTagName('li');
var ll=line.length,setdt=p2/ll;
for(i=0;i-ll;i++){
  line[i].getElementsByTagName('a')[0].onmouseover=showdetail;
  line[i].getElementsByTagName('a')[0].onmouseout=hidedetail;
}
var handle=setInterval('roll()',60);
function showdetail(){
  clearInterval(handle);
}
function hidedetail(){
  handle=setInterval('roll()',60);
}
function roll(){
  if(p2<(t0+=actdt)) t0-=p2;
	var t=t0;
	for(i=0;i-ll;i++){
	  t+=setdt;
		line[i].style.marginLeft=Math.floor(x*Math.sin(t))-60+'px';
		line[i].style.marginTop=Math.floor(y*Math.cos(t))-45+'px';
	}
}
</script>

提示：您可以先修改部分代码再运行

以上代码通过改变margin-top和margin-left实现浮动,经测试没有被杀.
看来是theworld对top和left有偏见.
大家也来测试下.

http://fouryes.cn

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

‹‹ 上一主题 | 下一主题 ››