JS jQuery 點擊頁面漂浮出文字


看到有些網站點擊頁面任意地方都會彈出文字出來 感覺很炫酷 但其實實現方法很簡單 哇哈哈哈~~~

// 調用 ( e, 消失毫秒, 數組, 向上漂浮距離)
$(document).click(function(e){    
    var list = ['學而時習之', '不亦說乎', '有朋自遠方來', '不亦樂乎', '人不知而不慍', '不亦君子乎', '三人行 必有我師焉', '擇其善者而從之', '其不善者而改之', '學而不思則罔', '思而不學則殆'];
    textUp( e, 2000, list, 200 )
})
function textUp( e, time, arr, heightUp ){
    var lists = Math.floor(Math.random() * arr.length);
    var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
    var $i = $('<span />').text( arr[lists] );
    var xx = e.pageX || e.clientX + document.body.scroolLeft;
    var yy = e.pageY || e.clientY + document.body.scrollTop;

    $('body').append($i);
    $i.css({
        top: yy,
        left: xx,
        color: colors,
        transform: 'translate(-50%, -50%)',
        display: 'block',
        position: 'absolute',
        zIndex: 999999999999
    })  
    $i.animate({
        top: yy - ( heightUp ? heightUp : 200 ),
        opacity: 0
    }, time, function(){
        $i.remove();
    })            
}

這邊穿梭進入演示空間


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM