懸浮提示工具（懸浮出現自動消失）

以前作過的提示工具是使用bootstrap的模態窗作的，有人說並很差，須要點擊關閉，設置時間較長

 

可是那個提示工具就是爲了時間較長，必須看到才作的，也就是說，設計之初的目的就是出現錯誤纔看到的反饋。

 

而對於通常的成功提示，非表單驗證的操做提示，須要在操做出現的時候直接反饋結果，並不是在固定位置顯示一段文字

（會影響總體佈局移動）

 

因此作了一個懸浮的提示工具，想法來源於一款遊戲中的提示（具體不說，不想給打廣告）

 

對於css沒有仔細製做，只完成功能和簡單樣式，簡單調用，源碼簡答，位置，大小等本身修改

代碼以下（須要jquery，bootstrap，jquery.easi）

 

/**
     * 懸浮式提示框
     * @author：liuyuhang
     * @param：html：要提示的內容，可注入html，換行使用<br>,內容簡單本身修改
     */
    function lyhFloatTip(html) {
        var random = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000);
        var id = 'tip-' + random;
        var tip = $('<div>').addClass('float-tip text-center form-control').css({//提示內容div
            'background-image' : 'linear-gradient(to right, #555555 0%, #555555 70%, #333333 100%)',
            'color' : 'white',
            'height' : 'auto',
            'min-height' : '40px',
            'position' : 'fixed',
            'top' : '75%',
            'left' : '145px',
            'width' : '400px',
            'z-index' : '3200',
            'border' : '1px solid white',
            'padding' : '10px 10px 10px 50px',
            'box-shadow' : '3px 3px 3px #999999',
            'display' : 'none',
            'opacity' : 0.2,
        }).html(html).attr('id', id);//加入提示內容
        var leftDiv = $('<div>').css({
            'position' : 'fixed',
            'background-color' : 'white',
            'width' : '40px',
            'height' : '30px',
            'margin-top' : '-25px',
            'margin-left' : '-45px',
            'border-radius' : '3px',
            'color' : 'black',
            'padding' : '5px 0px'
        }).html('TIPS');
        tip.append(leftDiv);
        $('body').append(tip.show());//載入div並顯示
        $('#' + id).animate({//懸浮上移動畫
            top : '65%',
            opacity : '1'
        }, 1000, 'easeOutQuart');
        setTimeout(function() {//消失動畫
            $('#' + id).animate({
                opacity : '0'
            }, 1000, 'easeOutQuart');
            setTimeout(function() {//移除
                $('#' + id).remove();
            }, 1000)
        }, 2000);
    }

　　lyhFloatTip('要展現的提示內容');便可調用

點擊效果

 

 

 

顯示到消失一共4秒，時間自行修改