jQuery+CSS制作超酷的动态按钮特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS制作超酷的动态按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用jQuery和CSS制作超酷的动态按钮</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-bp.js"></script>
    <script type="text/javascript" src="js/navigation.js"></script>
</head>
<body>
    <div id="header"></div>
    <div id="navigation" class="container">
        <div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>
        <div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
        <div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
        <div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
        <div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
    </div>
    <div class="container">
        <div class="content">
            <div id="content-title"></div>
            <!-- the rest of the content-->
        </div>
    </div>
</body>
</html>

JS代码(navigation.js):

var site_url = '';
	var nav = [ '#home','#about','#services','#solutions','#contact' ];
	$(document).ready(function(){
	setBkgPos();
	for ( i = 0;
	i < nav.length;
	i++ ){
	$(nav[i]).bind( 'mouseover',mMouseOver );
	$(nav[i]).bind( 'mouseout',mMouseOut );
	$(nav[i]).bind( 'click',mClick );
}
for ( i = 0;
	i < nav.length;
	i++ ){
	// element with �active� class will start animationif ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
	$(nav[i]).animate({
	backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}
'}
,"fast",function(){
	$(this).children().animate({
	backgroundPosition:'(0px -40px)'}
,20).animate({
	backgroundPosition:'(0px -20px)'}
,"fast");
	$(this).animate({
	backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'}
,"fast").animate({
	backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'}
,"fast");
	var parent = this;
	$(this).children().animate({
	backgroundPosition:'(0px -45px)'}
,"fast",function(){
	$(parent).animate({
	backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'}
,"fast");
	$(parent).css({
	backgroundImage:'url(img/nav.png)'}
);
}
);
}
);
	break;
}
}
}
);
	function _getHPos( id ){
	for ( i = 0;
	i < nav.length;
	i++ ){
	if ( '#' + id == nav[i] ){
	return i*(-98);
}
}
return 0;
}
function setBkgPos(){
	for ( i = 0;
	i < nav.length;
	i++ ){
	$(nav[i]).css({
	backgroundPosition:i*(-98) + 'px -25px'}
);
	$(nav[i] + ' div').css({
	backgroundPosition:'0px -60px'}
);
}
}
function mMouseOver(e){
	// element with �active� class will ignore this event and do nothingif ( this.className.indexOf('active') >= 0 ){
	return;
}
$(this)// stop any animation that took place before this.stop()// step 1. change the image file.css({
	backgroundImage:'url(img/nav-over.png)',cursor:'pointer'}
)// step.2 move up the navigation item a bit.animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}
'}
,"fast",// this section will be executed after the step.2 is donefunction(){
	$(this).children()// step. 3 move the white box down.animate({
	backgroundPosition:'(0px -40px)'}
,20)// step 4. move the white box down.animate({
	backgroundPosition:'(0px -20px)'}
,"fast");
	$(this)// step 4. move the navigation item down.animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'}
,"fast")// step 5. move the navigation item to its final position.animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'}
,"fast");
	// store the parent element id for later usagevar parent = this;
	$(this).children()// step 5. move the white box to its final position.animate({
	backgroundPosition:'(0px -45px)'}
,"fast",// this section will be executed after the step.5 is donefunction(){
	// step.6 change the image to its original image$(parent).css({
	backgroundImage:'url(img/nav.png)'}
);
}
);
}
);
}
function mMouseOut(e){
	// element with �active� class will ignore this event and do nothingif ( this.className.indexOf('active') >= 0 ){
	return;
}
$(this)// stop any animation that took place before this.stop()// step.1 move down navigation item.animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}
,"fast",// this section will be executed after the step.1 is donefunction(){
	// step.2 white box move really fast$(this).children().animate({
	backgroundPosition:'(0px 70px)'}
,"fast");
	// step 3. move navigation item up$(this).animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}
,"fast",// this section will be executed after the step.3 is donefunction(){
	// step 4. move navigation item ot its original position$(this).animate({
	backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}
,"fast",// this section will be executed after the step.4 is donefunction(){
	// move white box to its original position,ready for next animation$(this).children().css({
	backgroundPosition:'0px -60px'}
);
}
)}
)}
).css({
	backgroundImage:'url(img/nav.png)',cursor:''}
);
}
function mClick(e){
	location.href = this.id;
}

CSS代码(main.css):

body{background:url(../img/body-bkg.png) repeat scroll;margin:0;padding:0;}
.container{margin:0pt auto;width:950px;}
#header{background:url(../img/hdr-bkg.png) repeat-x scroll;height:181px;position:absolute;z-index:100;top:0px;left:0px;width:100%;}
#navigation{height:60px;}
#home,#home div,#about,#about div,#services,#services div,#solutions,#solutions div,#contact,#contact div{height:80px;position:absolute;width:97px;float:left;}
#home,#about,#services,#solutions,#contact{background-image:url(../img/nav.png);background-attachment:scroll;background-repeat:no-repeat;top:171px;}
#home{background-position:0px -25px;margin-left:6px;}
#about{background-position:-98px -25px;margin-left:105px;}
#services{background-position:-196px -25px;margin-left:204px;}
#solutions{background-position:-294px -25px;margin-left:303px;}
#contact{background-position:-392px -25px;margin-left:402px;}
#home div,#about div,#services div,#solutions div,#contact div{background-image:url(../img/white.png);background-attachment:scroll;background-repeat:no-repeat;background-position:0px -60px;}
.pri-nav a{display:block;text-decoration:none;text-indent:-30000px;}
.content{margin-top:160px;}
#content-title{background:url(../img/content-title.png) no-repeat scroll;height:323px;position:absolute;width:100%;}

附件:下载该文件资源,减少时间成本(增值服务)