jquery简洁动态提示特效 js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery简洁动态提示特效 js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简洁的jquery动态提示特效</title>
    <link rel="stylesheet" href="css/jquery.notice.css" type="text/css" />
    <script src="js/jquery-1.4.2.js"></script>
    <script src="js/jquery.notice.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('a').click(function () {
                jQnotice('Your notification message !');
            });
        });
    </script>
</head>
<body>
    <a href="#" style="position:absolute; left:45%; top:200px; font-size:24px; color:#444444; text-decoration:none;">Click me</a><br>
    <br>
    <br>
    <br>
</body>
</html>

JS代码(jquery.notice.js):

/* jQuery Notice Plugin * * This plug-in allows you to show a little notice box. * * @author:Vincent Composieux * @homepage:http://vincent.composieux.fr * @date 20/06/2010 */
(function($){
	$.notice ={
	show:function(message){
	/** Configuration */
var top = 5;
	var left = 15;
	var fadeoutDuration = 1000;
	/** Launch the notification */
$('html,body').animate({
	scrollTop:0}
);
	$('<div></div>').attr('id','notice').css('left',(50-left)+'%').css('top',(0+top)+'px').appendTo('body').text(message);
	/** Switch off the notification */
setTimeout(function(){
	$('#notice').animate({
	opacity:0,top:'-20px'}
,fadeoutDuration);
}
,2000);
	setTimeout(function(){
	$('#notice').remove();
}
,3000);
}
}
jQnotice = function(message){
	$.notice.show(message);
}
;
}
)(jQuery);

CSS代码(jquery.notice.css):

body,html{font-family:Verdana,Arial;font-size:12px;background-color:#111111;color:#FFFFFF;}
a{color:#FFCC00;}
#notice{position:absolute;background-image:url('../images/notice.png');width:250px;height:35px;text-align:center;padding:15px 0 0 0;font-size:11px;color:#467618;}

附件:下载该文件资源,减少时间成本(增值服务)