`
jeasony
  • 浏览: 199473 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

【翻译】超酷仿苹果机桌面js+Css飞行菜单

    博客分类:
  • js
阅读更多



演示在这里

基于Jquery和Fisheye,在IE 6, IE 7, Opera 9, Firefox 2, and Safari 2测试通过
原文:http://www.ndesign-studio.com/blog/design/css-dock-menu/

使用方法:

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]–>

第一部分是javascript,第二部分是css,最后一段是ie6的hack

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、插入菜单。
如果在页面顶部,则插入以下代码(注意:<span>在<img>之后)

复制内容到剪贴板
代码:
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

如果在页面底部,则插入以下代码(注意:<span>在<img>之前)

复制内容到剪贴板
代码:
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

另:此人另外的一些设计也相当出色:icon和wp模板

分享到:
评论

相关推荐

    网页特效-导航菜单-超酷仿苹果机桌面飞行菜单

    网页特效-导航菜单-超酷仿苹果机桌面飞行菜单

    超酷仿QQ导航菜单(JS+CSS)

    超酷仿QQ导航菜单(JS+CSS),可以在同一窗口浏览所有链接页面,清新的QQ皮肤界面一定为你的网站增色不少,因为它使用了“可控制的页面内滚动区域”技术,可以让同一内嵌框架网页添加无数链接菜单,加入了可移动层...

    CSS+div+js组合强大实现超酷菜单

    是一款CSS+div+js组合强大实现超酷菜单,比较简洁灵活,

    超酷的js+css3实现的3D标签云特效

    【标题】:“超酷的js+css3实现的3D标签云特效”指的是利用JavaScript(js)和CSS3技术创建的一种动态视觉效果,它将传统的标签以三维立体的形式展现出来,给用户带来更加生动和有趣的交互体验。这种特效通常用于...

    JS+CSS超酷3D照片墙

    JS+CSS=&gt;超酷3D照片墙,不下不知道,下了想推荐!

    水晶风格超酷超炫丽导航菜单js+java源代码02

    水晶风格超酷超炫丽导航菜单js+java源代码02

    水晶风格超酷超炫丽导航菜单js+java源代码01

    水晶风格超酷超炫丽导航菜单js+java源代码01

    水晶风格超酷超炫丽导航菜单js+java源代码03

    水晶风格超酷超炫丽导航菜单js+java源代码03

    HTML5+CSS3超酷动态表单 HTML5+CSS3超酷动态表单网页特效.zip

    本资源"HTML5+CSS3超酷动态表单 HTML5+CSS3超酷动态表单网页特效.zip"显然是一个包含一系列使用这两种技术实现的创新表单设计和交互效果的集合。 首先,我们来详细了解一下HTML5在动态表单中的应用。HTML5引入了新...

    css3超酷3D旋转导航菜单特效

    本案例中,我们关注的是"css3超酷3D旋转导航菜单特效",这是一个利用CSS3 3D Transforms技术实现的创新性交互设计。这个特效使得网站的导航菜单在用户悬停时展现出立体的旋转效果,增强了用户体验和视觉吸引力。 ...

    div+css学习资料和19个超酷菜单

    压缩包中的"div+css学习资料"可能包含教程、实例代码、讲解视频等内容,这些资料可以帮助初学者快速掌握`div+css`布局技巧,并通过实际操作提升技能。19个超酷菜单的示例可以作为练习项目,通过模仿和修改这些菜单的...

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4种漂亮的CSS3鼠标拖动滑块样式代码15个漂亮的css3单选按钮美化动画代码]5款漂亮的jQuery拖动滑块选值特效5款实用的jQuery...

    js+div+css超酷多种弹出层 兼容各大浏览器

    本文档将详细介绍一个基于 JavaScript (简称JS)、DIV 和 CSS 的实现方案,该方案不仅能够支持多种类型的弹窗展示(包括 iframe 内容),还特别注重于不同浏览器间的兼容性处理。 #### 二、核心知识点详解 ##### 1....

    12种超酷的css+div 导航菜单

    本资源“12种超酷的css+div 导航菜单”提供了一组创新且美观的导航菜单设计,旨在提升用户体验并增强网站的整体视觉效果。下面,我们将详细探讨这些CSS和HTML(div)技术在创建导航菜单中的应用及其相关知识点。 1....

    超酷响应式css3+jquery多级导航菜单效果

    "js"和"css"目录分别包含了项目的JavaScript脚本和CSS样式表,它们是实现这个响应式菜单的核心。 在实际应用中,这个多级导航菜单可以灵活地嵌入到各种网站模板中,无论是企业网站还是个人博客,都能为用户提供直观...

    html+JS+CSS特效(居家旅行必备之良品)

    超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,下拉菜单,自由拖动的面板.

    354个CSS3特效源码合集(HTML+CSS+JavaScript)

    354个CSS3特效源码合集(HTML+CSS+JavaScript): HTML5跨浏览器纯CSS工具提示特效, 炫酷CSS3鼠标滑过图片动画特效, 移动手机APP滑动手指切换图片特效,2种不可思议的纯CSS3 loading加载动画特效等等。

    基于jquery+css3来实现的超酷相册效果的代码.rar

    这个压缩包文件名为"基于jquery+css3来实现的超酷相册效果的代码.rar",表明它包含了一组编程代码,用于创建具有视觉吸引力的相册展示效果。这种效果通常会涉及动态过渡、滑动、缩放和旋转等动画,以提升用户在浏览...

    JS、CSS超酷3D照片墙

    "JS、CSS超酷3D照片墙"就是一个这样的例子,它结合了JavaScript(JS)和层叠样式表(CSS)的力量,为用户提供了一种立体、动态的图片展示方式,让用户仿佛置身于一个3D空间中浏览照片。 **JS在3D照片墙中的作用** ...

    超酷jQuery+CSS3翻页时钟动画.zip

    在本项目"超酷jQuery+CSS3翻页时钟动画.zip"中,我们可以探索一系列前沿的前端技术,包括HTML5、jQuery、JavaScript以及CSS3。这个项目的核心是创建一个动态且引人注目的翻页时钟,它利用了这些技术的强大力量,将...

Global site tag (gtag.js) - Google Analytics