利用jquery實現模擬flash動畫按鈕



23 89 30



特效描述:利用jquery實現 模擬flash 動畫按鈕,利用jquery實現模擬flash動畫按鈕

代碼結構

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

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

3. HTML代碼

<div class="headeline"></div>
<!--演示內容開始-->
<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.cqetom.live//" target="_blank"><em>立即安裝</em><span>4.0正式版(11月30日)&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>
<!--演示內容結束-->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 圖片滑動 圖片滑塊 鼠標滑過 鼠標懸停 跟隨鼠標移動 按鈕樣式
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子