jQnotice允许您轻松地显示一个通知顶部的提示动画,你的网站只有一个简单的代码。
HTML
<a href="#" style="position:absolute; left:45%; top:200px; font-size:24px; color:#444444; text-decoration:none;">Click me</a>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
jQnotice('Your notification message !');
});
});
</script>
(function($) {
$.notice = {
show: function(message) {
/** Configuration */
var top = 60;
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);