CSS制作漂亮的苹果风格Dock Menu(源文件)

2008-02-23 08:40:30来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

效果如下:

1、下载本实例中的所有内容:

点击这里下载源文件

2、插入代码:

在<head>标签里放入下面代码:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

3. 设置

把下面代码放到<body>标签内。

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4.添加或移除项目

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

允许的浏览器:IE 6, IE 7, Opera 9, Firefox 2, Safari 2

  原文连接:http://www.ndesign-studio.com/blog/mac/css-dock-menu

关键词:
【推荐给好友】【关闭】
最新五条评论
查看全部评论
评论总数 0 条
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:实例讲解深入学习CSS网页定位元素

下一篇:深入学习网页技术CSS中选择符的应用