jquery animate方法设置参数flash动画按钮插件


jquery animate方法设置参数flash动画按钮插件
jquery animate方法设置参数flash动画按钮插件以及flash动画按钮等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* bnr-btn */
.bnr-btn{height:109px;width:247px;position:relative;margin:60px auto 0 auto;}
.bnr-btn .download{position:absolute;left:0;top:0;background:url(images/btn01.png) no-repeat;display:block;width:247px;height:28px;padding-top:46px;text-decoration:none;}
.bnr-btn .download:hover{text-decoration:none;}
.bnr-btn .download em{display:block;text-indent:-1000em;overflow:hidden;height:0;}
.bnr-btn .download span{display:block;height:24px;line-height:24px;text-align:center;color:#facd89;cursor:pointer;}
.bnr-btn p{position:absolute;width:100%;top:75px;left:0;background:url(images/btn02.png) no-repeat;padding-top:13px;overflow:hidden;}
</style>
<div class="bnr-btn">
	<a class="download" href="http://www.51qianduan.com/" target="_blank"><em>立即安装</em><span>4.0正式版(11月20日)&nbsp;&nbsp;14MB</span></a>
	<p></p>
</div>
<script type="text/javascript">
$(function(){
	function downLoadBtn(){
		var $downLoadBtn = $('.download'),
			$p = $downLoadBtn.next('p'),
			gcaTimer = false;
			if(gcaTimer){
				clearTimeout(gcaTimer);
				gcaTimer = false;
			}
			$downLoadBtn.mouseenter(function(){
				gcaTimer = setTimeout(function(){
					$downLoadBtn.animate({'margin-top':'-5px'},100,function(){
						$(this).animate({'margin-top':'0'},300);
					});
					$p.animate({'top':'80px'},100,function(){
						$(this).animate({'top':'75px'},300);
					});
				},100);
			}).live('mouseleave',function(){
				if(gcaTimer){
					clearTimeout(gcaTimer);
					catTimer = false;
				}
			});
	};
	downLoadBtn();
});
</script>

相关推荐

  • 利用jquery实现模拟flash动画按钮

    利用jquery实现模拟flash动画按钮以及利用jquery实现、模拟flash、动画按钮等js/jquery网页特效代码下载。

    Border circle 石神千空 2019-12-17 21:50:19 0 0 0

  • flash按钮动画flash动画按钮下载

    flash按钮动画flash动画按钮下载以及flash按钮动画、动画按钮下载等js/jquery网页特效代码下载。

    Border circle 石神千空 2019-12-17 19:14:09 0 0 0

发表评论

相关文章