标签归档:动画

页面加载完成 出现提示框动画(仿马蜂窝)

前段时间看到马蜂窝旅游频道后,会有个红色的提示框,能很显眼的提示页面的重点部分。。。

用的jQuery动画方法,还挺好用的,值得好好摸索。。。这次就先做个 提示框动画

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>PHP圈</title>
</head>
<body>
<p><img class="logo" src="http://www.zjcampus.com/rs/img/logo.png" width="186" height="69"></p>
<script type="text/javascript" src="http://www.zjcampus.com/rs/js/jquery.js"></script>
<script>
(function($){

	/**
	 * 提示框
	 * 参数 to 结束地方的节点
	 */
	var alertBox = function(to){
		var to_p = $(to).position()
		var objNewDiv = $('<div>',{'style':'border:#FF0000 3px solid; width:99%; height:99%;position:absolute; left:0; top:0;'});
		$(objNewDiv).appendTo('body');
		objNewDiv.animate({left:to_p.left, top:to_p.top, width:$(to).width(), height:$(to).height()},2000,function(){
			//动画完后 在延时1秒
			objNewDiv.delay(1000).hide(0,function(){ objNewDiv.remove();});
		});
	}

	alertBox('.logo');
})(jQuery);
  </script>
</body>
</html>