怎么在网页中实现链接从旁边飘过来的效果

jianzhifei 2011-11-23 04:22:30
怎么实现我下面的链接从页面的左边或者左上角飘过来的显示效果,求各位高手帮帮忙!
div id="selectMenuTag1" style="display: none" class="minmetals-t-minmetals-listmenu-wid">
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit">集团职能部门</p>
<ul>
<li><a href="#">办公厅</a></li>
<li><a href="http://human-resource.minmetals.com.cn/default.jsp" target="_blank">人力资源部</a></li>
<li><a href="http://strategy.minmetals.com.cn/default.jsp" target="_blank">企业规划发展部</a></li>
<li><a href="#">财务总部</a></li>
<li><a href="http://investmgt.minmetals.com.cn/default.jsp" target="_blank">投资管理部</a></li>
<li><a href="#">资本运营部</a></li>
<li><a href="http://party.minmetals.com.cn/default.jsp" target="_blank">直属党委办公室</a></li>
<li><a href="http://info.minmetals.com.cn/labour/default.jsp" target="_blank">工会</a></li>
<li><a href="http://info.minmetals.com.cn/anti-corruption/outline.jsp?column_no=01" target="_blank">纪检监察部</a></li>
</ul>
</div>
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit"> </p>
<ul>
<li><a href="#">审计部</a></li>
<li><a href="http://legal.minmetals.com.cn/default.jsp" target="_blank">法律事务部</a></li>
<li><a href="#">信息管理部</a></li>
<li><a href="http://tech-hse.minmetals.com.cn/default.jsp" target="_blank">健康安全环保部</a></li>
<li><a href="#">风险管理部</a></li>
<li><a href="#">资产管理公司</a></li>
<li><a href="#">离退休干部部</a></li>
<li><a href="#">行政事务部</a></li>
</ul>
</div>
</div>
...全文
145 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
jianzhifei 2011-11-25
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 nihaox1 的回复:]
JScript code

<!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 ht……
[/Quote]怎么使用相对位置来实现呢?因为使用绝对位置后,网页窗口变小后,漂浮的文字会重叠
hzynver1024 2011-11-24
  • 打赏
  • 举报
回复
过来学习一下了呢。。。
萧萧可乐 2011-11-23
  • 打赏
  • 举报
回复

<!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>Untitled Document</title>
</head>
<body>
<div id="selectMenuTag1" style="position:absolute; left:1000px;" class="minmetals-t-minmetals-listmenu-wid">
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit">集团职能部门</p>
<ul>
<li><a href="#">办公厅</a></li>
<li><a href="http://human-resource.minmetals.com.cn/default.jsp" target="_blank">人力资源部</a></li>
<li><a href="http://strategy.minmetals.com.cn/default.jsp" target="_blank">企业规划发展部</a></li>
<li><a href="#">财务总部</a></li>
<li><a href="http://investmgt.minmetals.com.cn/default.jsp" target="_blank">投资管理部</a></li>
<li><a href="#">资本运营部</a></li>
<li><a href="http://party.minmetals.com.cn/default.jsp" target="_blank">直属党委办公室</a></li>
<li><a href="http://info.minmetals.com.cn/labour/default.jsp" target="_blank">工会</a></li>
<li><a href="http://info.minmetals.com.cn/anti-corruption/outline.jsp?column_no=01" target="_blank">纪检监察部</a></li>
</ul>
</div>
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit"> </p>
<ul>
<li><a href="#">审计部</a></li>
<li><a href="http://legal.minmetals.com.cn/default.jsp" target="_blank">法律事务部</a></li>
<li><a href="#">信息管理部</a></li>
<li><a href="http://tech-hse.minmetals.com.cn/default.jsp" target="_blank">健康安全环保部</a></li>
<li><a href="#">风险管理部</a></li>
<li><a href="#">资产管理公司</a></li>
<li><a href="#">离退休干部部</a></li>
<li><a href="#">行政事务部</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=st();
var mid=screen.availWidth/2; //在这里改变居中的数值!!
function st()
{
var a=document.getElementById("selectMenuTag1");
a.style.left=(parseInt(a.style.left)-10)+"px";
if(parseInt(a.style.left)!=mid)t=setTimeout('st()',50);
}
</script>
</html>
jianzhifei 2011-11-23
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 nihaox1 的回复:]
JScript code

<!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 ht……
[/Quote]嗯,谢谢您!怎么让它停在页面中间而不是停在页面最左边呢
萧萧可乐 2011-11-23
  • 打赏
  • 举报
回复

<!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>Untitled Document</title>
</head>
<body>
<div id="selectMenuTag1" style="position:absolute; left:1000px;" class="minmetals-t-minmetals-listmenu-wid">
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit">集团职能部门</p>
<ul>
<li><a href="#">办公厅</a></li>
<li><a href="http://human-resource.minmetals.com.cn/default.jsp" target="_blank">人力资源部</a></li>
<li><a href="http://strategy.minmetals.com.cn/default.jsp" target="_blank">企业规划发展部</a></li>
<li><a href="#">财务总部</a></li>
<li><a href="http://investmgt.minmetals.com.cn/default.jsp" target="_blank">投资管理部</a></li>
<li><a href="#">资本运营部</a></li>
<li><a href="http://party.minmetals.com.cn/default.jsp" target="_blank">直属党委办公室</a></li>
<li><a href="http://info.minmetals.com.cn/labour/default.jsp" target="_blank">工会</a></li>
<li><a href="http://info.minmetals.com.cn/anti-corruption/outline.jsp?column_no=01" target="_blank">纪检监察部</a></li>
</ul>
</div>
<div class="minmetals-t-minmetals-listmenu-bro">
<p class="minmetals-t-minmetals-listmenu-bro-tit"> </p>
<ul>
<li><a href="#">审计部</a></li>
<li><a href="http://legal.minmetals.com.cn/default.jsp" target="_blank">法律事务部</a></li>
<li><a href="#">信息管理部</a></li>
<li><a href="http://tech-hse.minmetals.com.cn/default.jsp" target="_blank">健康安全环保部</a></li>
<li><a href="#">风险管理部</a></li>
<li><a href="#">资产管理公司</a></li>
<li><a href="#">离退休干部部</a></li>
<li><a href="#">行政事务部</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=st();
function st()
{
var a=document.getElementById("selectMenuTag1");
a.style.left=(parseInt(a.style.left)-10)+"px";
if(parseInt(a.style.left)>10)t=setTimeout('st()',10);
}
</script>
</html>



不知道 是不是你要的效果

87,990

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧