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

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>


不知道 是不是你要的效果
网页设计实现三个页面的跳转，有文字、图片和超链接
这是一个关于网页设计的实例，展示了如何创建包含文字描述、图片展示和超链接跳转的三页面布局。第一部分描述了作者的家乡，配以图片和相关诗句的链接；第二部分呈现了李白的《将进酒》诗句；第三部分展示了旋转图片的列表。通过简单的HTML和CSS，实现了视觉和交互效果。
HTML链接：带超链接的网页
本文深入讲解HTML超链接的使用，包括锚链接、相对链接、绝对链接及如何在新标签页打开链接。通过实例演示，帮助读者掌握不同类型的链接在网页导航中的应用。
图片上加超链接的方法，实现点击图片跳转到指定网页
了解如何在图片中添加超链接，实现网页跳转和产品推广。只需简单步骤，使用记事本创建HTML文件，插入图片与链接，即可完成设置。
CSS3实现5个常用的网页动画效果
本文介绍了五个使用CSS3实现的常见网页效果，包括按钮弹动、搜索框聚焦扩大、文字提示旋转显示、文字提示平滑移动和文字环绕效果。这些效果简洁实用，适合用于个人博客或其他网站中增强用户体验。
使用锚链接同一个网页的不同部分（不同网页的特定部分）
本文介绍了如何使用锚链接在同一个网页的不同部分间进行跳转，适用于内容丰富的网页。同时，也讲解了如何利用锚链接实现不同网页特定部分的直接访问，提高浏览效率。
JavaScript

87,990

社区成员

224,684

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章