基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效。该选项卡特效集合了扁平风格设计和按钮点击波特效。是一款设计的非常不错的Material Design 风格作品。效果图如下:
实现的代码。
hmtl代码:
<div class="htmleaf-container">
<br />
<br />
<br />
<div class="htmleaf-content bgcolor-3">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li class="slider"></li>
</ul>
</div>
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</div>
<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>
<script>
$("ul li").click(function (e) { // make sure we cannot click the slider
if ($(this).hasClass('slider')) {
return;
} /* Add the slider movement */ // what tab was pressed
var whatTab = $(this).index(); // Work out how far the slider needs to go
var howFar = 160 * whatTab; $(".slider").css({
left: howFar + "px"
}); /* Add the ripple */ // Remove olds ones
$(".ripple").remove(); // Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height(); // Add the element
$(this).prepend("<span class='ripple'></span>"); // Make it round!
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
} // Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2; // Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
</script>
css代码:
body {
font-family: 'Raleway', sans-serif;
/*background: #2C3E50;*/
} ul {
font-size:;
position: relative;
padding:;
width: 480px;
margin: 40px auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} li {
display: inline-block;
width: 160px;
height: 60px;
background: #DA4453;
font-size: 16px;
text-align: center;
line-height: 60px;
color: #fff;
text-transform: uppercase;
position: relative;
overflow: hidden;
cursor: pointer;
} .slider {
display: block;
position: absolute;
bottom:;
left:;
height: 4px;
background: #46CFB0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
} /* Ripple */ .ripple {
width:;
height:;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
position: absolute;
opacity:;
} .rippleEffect {
-webkit-animation: rippleDrop .6s linear;
animation: rippleDrop .6s linear;
}
@-webkit-keyframes
rippleDrop { 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity:;
}
}
@keyframes
rippleDrop { 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity:;
}
}
via:http://www.w2bc.com/Article/38841
基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效的更多相关文章
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- Jquery 数组操作(转)
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
- 【jsp】Servlet与jsp之间的传值
Servlet与JSP 之间的传值有两种情况:JSP -> Servlet, Servlet -> JSP. 通过对象 request和 session (不考虑 application) ...
- Tensorflow运行程序报错 FailedPreconditionError
1 FailedPreconditionError错误现象 在运行tensorflow时出现报错,报错语句如下: FailedPreconditionError (see above for trac ...
- rsync的基本使用
1,本地同步文件: rsync -avz --delete /home/ /backups/ 注意:在指定复制源时,路径是否有最后的 “/” 有不同的含义,例如: /home: 表示将整个 /home ...
- Ubuntu局域网下利用client联网
Ubuntu是一个非常好的Linux操作系统,可是对于刚刚安装使用它的新手来说如何用Ubuntu连入网络却是一大难关.如今就记录一下自己在Ubuntu下上网的过程. ★client 将client解压 ...
- Android调用系统软键盘
/** * * @MethodName:closeInputMethod * @Description:关闭系统软键盘 * @throws */ public void closeInputMetho ...
- fcitx五笔的安装[zz]
Fcitx──小企鹅输入法:Free Chinese Input Toy for X是国产软件的精品,是一个以GPL方式发布的.基于XIM的简体中文输入法集合(原为G五笔),包括五笔.五笔拼音.二笔. ...
- 安装 Express
首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通过 npm init 命令为你的应用创建 ...
- [LeetCode] Contains Duplicate & Contains Duplicate II
Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your funct ...
- ios获取文件的MD5值
一般我们在使用http或者socket上传或者下载文件的时候,经常会在完成之后经行一次MD5值得校验(尤其是在断点续传的时候用的更 多),校验MD5值是为了防止在传输的过程当中丢包或者数据包被篡改,在 ...