亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果及回調(diào)函數(shù)的實(shí)例

 更新時(shí)間：2017年12月27日 10:25:53   作者：pengbo518  
下面小編就為大家分享一篇CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果及回調(diào)函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

寫(xiě)期末項(xiàng)目中，朋友提出的 idea ，當(dāng)用戶登錄成功時(shí)歡迎用戶的特效，即歡迎用戶信息從底部上升到頁(yè)面中，之后再退回底部。

他遇到的問(wèn)題是：從底部能出來(lái)提示信息，但是出來(lái)之后就下不去了。

聽(tīng)過(guò)后，考慮之，想到用回調(diào)函數(shù)來(lái)解決這個(gè)Bug，然后模擬登錄成功時(shí)進(jìn)入主頁(yè)（即刷新頁(yè)面），彈出歡迎信息并消失，寫(xiě)了一個(gè)類似這樣的動(dòng)畫(huà)效果。僅供參考：

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>歡迎動(dòng)畫(huà)</title>
		<style>
		 	*{margin:0;padding:0;}
		 	div {
		 		margin:0 auto;
		 		width:100%;
		 		height:700px;
		 		overflow:hidden;
		 		position:relative;
		 	}			
		 	p {
				width:220px;
				height:40px;
				line-height:40px;
				text-align:center;
				display:block;color:#900;
				background:#ccc;
				position:absolute;
				bottom:-40px;
				left:500px;
		 	}
		</style>
	</head>
	<body>
		<div>
			<p>歡迎xxx登錄，祝您購(gòu)物愉快</p>
		</div>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 函數(shù)入口
			$(function(){
			 show();
			});
			// 動(dòng)畫(huà)函數(shù)
			function show(){
				// 獲取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 動(dòng)畫(huà)函數(shù)
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回調(diào)函數(shù)
			  	$("p").animate({"bottom":-p},6000);
			 	});
			
			 	});
			}
		</script>
	</body>
</html>

這里主要用到了css3中的 animate 動(dòng)畫(huà)屬性，結(jié)合 jQuery 實(shí)現(xiàn)動(dòng)畫(huà)執(zhí)行的時(shí)間和方向，最后設(shè)置回調(diào)函數(shù)使提示信息回到初始位置即可。

以上這篇CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果及回調(diào)函數(shù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論