KISSY(JS)炫动导航,缓动应用实例(^_^)
一个基于KISSY的简单的动画导航,效果还不错,有点像flash的效果。鼠标移到每一个连接上,背景滑块会迅速移到该链接下方,同时平滑改变大小,自适应链接尺寸,并伴随来回的轻微波动,动感相当不错,呵呵,废话不多说了,看demo吧。
效果查看: http://www.seejs.com/demos/examples/animNav/index.html
特别感谢评论中各位提出的由于在各个链接中快速移动导致的bug,现在已经做了简单的处理,效果应该好多了,呵呵...
1. [代码][JavaScript]代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KISSY动画导航</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.nav {
position: relative;
margin: 0 auto;
width: 990px;
_height: 51px;
background-color: #000;
font: 14px/1.5 '微软雅黑';
color: #fff;
}
.block {
position: absolute;
z-index: 9;
left: 0;
top: 0;
width: 0;
height: 0;
border-radius: 4px;
background-color: #f00;
}
.nav-list {
position: relative;
_position: absolute;
z-index: 10;
padding-left: 20px;
overflow: hidden;
}
.nav-list .item {
float: left;
padding: 15px 20px;
}
.nav-list .item a {
color: #fff;
}
</style>
</head>
<body>
<div id="Y_nav" class="nav">
<span id="Y_block" class="block"></span>
<ul class="nav-list">
<li class="item"><a href="" target="_blank">首页</a></li>
<li class="item"><a href="" target="_blank">淘宝网</a></li>
<li class="item"><a href="" target="_blank">天猫商城</a></li>
<li class="item"><a href="" target="_blank">一淘UX团队PC&广告</a></li>
<li class="item"><a href="" target="_blank">京东、当当、卓越亚马逊等等</a></li>
</ul>http://www.huiyi8.com/hehua/
</div>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<script>
(function(S){
var D = S.DOM, E = S.Event;
var box = D.get("#Y_nav"), block = D.get("#Y_block"), eles = D.query(".item", "#Y_nav");
var cur = 0, cur_w = D.outerWidth(eles[cur]), cur_h = D.outerHeight(eles[cur]) - 8, cur_l = eles[cur].offsetLeft, cur_t = eles[cur].offsetTop + 4;
var _t = null;
new S.Anim(block, {"left":cur_l,"top":cur_t,"width":cur_w,"height":cur_h}, 0.3, "backOut", function(){}).run();
E.on(eles, "mouseenter", function(){
var _this = this;
if(_t){clearTimeout(_t);}
_t = setTimeout(function(){
cur = S.indexOf(_this, eles);
cur_w = D.outerWidth(eles[cur]), cur_h = D.outerHeight(eles[cur]) - 8, cur_l = eles[cur].offsetLeft, cur_t = eles[cur].offsetTop + 4;
new S.Anim(block, {"left":cur_l,"top":cur_t,"width":cur_w,"height":cur_h}, 0.5, "backOut", function(){}).run();
}, 200);
});
})(KISSY);
</script>
</body>
</html>
最新文章
- 浅谈微信小程序对于创业者,意味着什么?
- SharePoint 2013 Designer系列之数据视图筛选
- [问题记录.VisualStudio]TFS项目映射问题解决
- 使用Dnsmasq搭建本地dns服务器上网
- asm单机dg dbca报错ORA-01031 CRS-2676,rman restore主库控制文件报错ORA-15081
- android loginDemo +WebService用户登录验证
- 详解YUV与RGB数据格式-2016.01.20
- CentOS下修复grub引导程序
- Codeforces Round #188 (Div. 2) B. Strings of Power 水题
- EMS电子面单接口对接使用-免费版
- Managing Data in Containers
- 使用MVC4,Ninject,EF,Moq,构建一个真实的应用电子商务SportsStore
- 201621123040《Java程序设计》第4周学习总结
- 大数据处理架构hadoop
- STL--sort源码分析
- Eclipse显示行号
- Adams输出宏代码
- JFrame绝对布局
- 调用OpenCVSharp进行拍照
- MySQL数据库----事务处理
热门文章
- 篇章三:[AngularJS] 使用AngularCSS動態載入CSS
- sparkstreaming+socket workCount 小案例
- Android Studio 使用笔记:工具窗口浮动与布局恢复
- COM线程单元
- Hp服务器 iLO3 使用方法
- OpenCV玩耍(一)批量resize一个文件夹里的所有图像
- 详解Maven项目利用java service wrapper将Java程序生成Windows服务
- Django之stark组件的使用和总结
- Android Studio 1.1 使用介绍及导入 jar 包和第三方依赖库
- shell if判断-n