下载地址

用Sticky插件制作的提示信息显示按钮特效|按钮标签

2014-02-16 02:43:00 admin

用Sticky插件制作的提示信息显示按钮特效

用Sticky插件制作的提示信息显示按钮特效

插件的源代码如下:

// Sticky v1.0 by Daniel Raftery// http://thrivingkings.com/sticky//// http://twitter.com/ThrivingKings (function( $ )    {         // Using it without an object    $.sticky = function(note, options, callback) { return $.fn.sticky(note, options, callback); };         $.fn.sticky = function(note, options, callback)         {        // Default settings        var position = 'top-right'; // top-left, top-right, bottom-left, or bottom-right                 var settings =            {            'speed'         :   'fast',  // animations: fast, slow, or integer            'duplicates'    :   true,  // true or false            'autoclose'     :   5000  // integer or false            };                 // Passing in the object instead of specifying a note        if(!note)            { note = this.html(); }                 if(options)            { $.extend(settings, options); }                 // Variables        var display = true;        var duplicate = 'no';                 // Somewhat of a unique ID        var uniqID = Math.floor(Math.random()*99999);                 // Handling duplicate notes and IDs        $('.sticky-note').each(function()            {            if($(this).html() == note && $(this).is(':visible'))                {                 duplicate = 'yes';                if(!settings['duplicates'])                    { display = false; }                }            if($(this).attr('id')==uniqID)                { uniqID = Math.floor(Math.random()*9999999); }            });                 // Make sure the sticky queue exists        if(!$('body').find('.sticky-queue').html())            { $('body').append('
 '); } // Can it be displayed? if(display) { // Building and inserting sticky note $('.sticky-queue').prepend(' '); $('#' + uniqID).append(''); $('#' + uniqID).append('' + note + ''); // Smoother animation var height = $('#' + uniqID).height(); $('#' + uniqID).css('height', height); $('#' + uniqID).slideDown(settings['speed']); display = true; } // Listeners $('.sticky').ready(function() { // If 'autoclose' is enabled, set a timer to close the sticky if(settings['autoclose']) { $('#' + uniqID).delay(settings['autoclose']).fadeOut(settings['speed']); } }); // Closing a sticky $('.sticky-close').click(function() { $('#' + $(this).attr('rel')).dequeue().fadeOut(settings['speed']); }); // Callback data var response = { 'id' : uniqID, 'duplicate' : duplicate, 'displayed' : display, 'position' : position } // Callback function? if(callback) { callback(response); } else { return(response); } } })( jQuery );

本例CSS :

div.sticky-queue    {     position:fixed;    background:#fff;    border:1px solid #999;    box-shadow:0px 0px 5px #bbb;    -moz-box-shadow:0px 0px 5px #bbb;    -webkit-box-shadow:0px 0px 5px #bbb;    width:200px;    }div.sticky-note    { padding-right:20px; }div.sticky    {    font-size:12px;    color:#555;    display:none;    padding:10px;    position:relative;    }img.sticky-close    {    position:absolute;    top:10px;    right:10px;    height:14px;    width:14px;    cursor:pointer;    }          .top-right    { right:20px; }.top-left    { left:20px; }.top-right, .top-left    {    top:-2px;    border-bottom-right-radius:6px;    border-bottom-left-radius:6px;    -moz-border-radius-bottomright:6px;    -moz-border-radius-bottomleft:6px;    -webkit-border-bottom-right-radius:6px;    -webkit-border-bottom-left-radius:6px;    }.bottom-right    { right:20px; }.bottom-left    { left:20px; }.bottom-right, .bottom-left    {    bottom:-2px;    border-top-right-radius:6px;    border-top-left-radius:6px;    -moz-border-radius-topright:6px;    -moz-border-radius-topleft:6px;    -webkit-border-top-right-radius:6px;    -webkit-border-top-left-radius:6px;    } .border-top-right, .border-top-left    { border-top:1px solid #999; }.border-bottom-right, .border-bottom-left    { border-bottom:1px solid #999; }

 

脚本素材特效之家为建站爱好者及设计师提供最优秀的jQuery特效,JS特效,HTML5特效,CSS3特效,网页特效代码,javascript特效,js代码大全,js代码下载
本文标签: 按钮特效插件