zoukankan      html  css  js  c++  java
  • 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();
        })            
    }
    

    这边穿梭进入演示空间

  • 相关阅读:
    第四次作业
    第三次作业
    Java.14
    Java.13
    JAVA.12
    JAVA.11
    JAVA.10
    JAVA.9
    JAVA.8
    JAVA.7
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9503649.html
Copyright © 2011-2022 走看看