您的位置：首页 > Web前端 > JavaScript

KISSY(JS)炫动导航，缓动应用实例（^_^）

2014-09-12 16:28 337 查看

一个基于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航