前段时间看到马蜂窝旅游频道后,会有个红色的提示框,能很显眼的提示页面的重点部分。。。
用的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>