最新消息:

第42款插件:jquery.color.js彩色动画插件让菜单不再孤单

菜单插件 杨红伟 2043浏览 0评论

描述:jquery color animations彩色动画插件制作文字悬停彩色渐变动画过渡效果,背景悬停彩色渐变动画过渡效果两种文字/背景悬停彩色渐变动画导航条效果。
图片展示:

1

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:
JS下载:http://www.ijquery.cn/js/jquery.color.js
预览: http://www.ijquery.cn/demo/color
打包下载:http://www.ijquery.cn/demo/color/color.zip
参数说明:和常规插件不一样,请看demo

JS引用代码:(举第1个案例)

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".first a").hover(function(){
$(this).animate({
backgroundColor:"#00aadd"
}, 600);
},function(){
$(this).animate({
backgroundColor:"#303030"
},400);
});
});
</script>

[/js]

HTML代码:(举第1个案例)

[html]

<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">项目案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

[/html]

CSS代码:(举第1个案例)

[css]

/* menu */
#menu{margin:20px auto;width:400px;height:40px;}
#menu ul li{float:left;padding-left:10px;}
.first a{font-family:"微软雅黑","宋体";font-size:18px;color:#fff;text-decoration:none;background:#303030;padding:5px;float:left;display:block;}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址