js | 網頁點擊特效 隨機emoji


js | 網頁點擊特效 隨機emoji

參考了別人的代碼自己改了一下,直接貼上就能用:

<script type="text/javascript">

// 點擊特效
let create_emoji = function(e){
	// 獲取隨機emoji的函數
	let get_rand_emoji = function(){
		// 表情列表
		let emoji_dict = ['😀','😃','😄','😁','😆','😅','😂','🤣','☺','😊','😚','😙','😗','😘','😍','😌','😉','🙃','🙂','😇','😋','😜','😝','😛','🤑','🤗','🤓','😎','🤡','🤠','😖','😣','☹','🙁','😕','😟','😔','😞','😒','😏','😫','😩','😤','😠','😡','😶','😐','😑','😯','😦','😥','😢','😨','😱','😳','😵','😲','😮','😦','🤤','😭','😪','😴','🙄','🤔','😬','🤥','🤐','💩','👺','👹','👿','😈','🤕','🤒','😷','🤧','🤢','👻','💀','☠','👽','👾','🤖','🎃','😺','😸','😹','🙏','👏','🙌','👐','😾','😿','🙀','😽','😼','😻','❤']
		function getRndInteger(min, max) {
		    return Math.floor(Math.random() * (max - min + 1) ) + min;
		}
		return emoji_dict[getRndInteger(0, emoji_dict.length-1)]
	}

	let anim                                    // 動畫計時器
	let increase=0                                 // 動畫位置控制

	let emoji = document.createElement("b")    // 創建一個元素
	emoji.style.color = "#E94F06"     // 設置顏色
    emoji.style.zIndex = 9999         // 設置置於頂層
    emoji.style.position = "fixed" // 設置屏幕絕對定位
    emoji.style.userSelect = "none"       // 設置不可選中
    let x = e.clientX
    let y = e.clientY          // 獲取位置
    emoji.style.left = (x-10)+ "px"
    emoji.style.top = (y-15) + "px"    // 將位置擺到中間
    emoji.innerText = get_rand_emoji()                 // 獲取隨機表情
    emoji.style.fontSize = Math.random() * 10 + 8 + "px"            // 大小
    clearInterval(anim)                // 清除計時器
    let $body = document.getElementsByTagName("body")[0]
    $body.appendChild(emoji)                   // 添加元素
    anim = setInterval(                    // 啟動動畫
    		function(){
    			if (++increase == 150){
    				clearInterval(anim)
    				$body.removeChild(emoji)
    			}
    			// 移動元素
    			emoji.style.top = (y-15) - increase + "px";
	        	emoji.style.opacity = (150 - increase) / 120;
    		}, 
    		10
	);
};

(function() {
    let $html = document.getElementsByTagName("html")[0]

	$html.onclick = function(e) {
        create_emoji(e)
    }
})();

</script>


免責聲明!

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



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