jquery鼠标移动、点击页面出现爱心

以你之姓@ 2022-09-08 00:08 226阅读 0赞

## 爱心 ##

1、css画一个爱心

.main{ 
        width: 20px;
        position: fixed;
    }
    // 圆形一 .disc1{ 
        width: 20px;
        height: 20px;
        border-radius: 100%;
        /*background: red;*/
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    // 圆形二 .disc2{ 
        width: 20px;
        height: 20px;
        border-radius: 100%;
        /*background: red;*/
        position: absolute;
        top: 0;
        right: -14px;
        z-index: 2;
    }
    // 正方形 .square{ 
        width: 20px;
        height: 20px;
        /*background: red;*/
        transform: rotateZ(45deg);
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 1;
    }

## 事件 ##

2、在点击事件和移动事件 触发时向body中添加元素

// 颜色数组
    const color = ['bg-red', 'bg-orange', 'bg-yellow', 'bg-olive', 'bg-green', 'bg-cyan', 'bg-blue', 'bg-purple', 'bg-mauve', 'bg-pink', 'bg-brown', 'bg-grey', 'bg-gray', 'bg-black', 'bg-white', 'bg-gradual-red', 'bg-gradual-orange', 'bg-gradual-green', 'bg-gradual-purple', 'bg-gradual-pink', 'bg-gradual-blue']
    // 添加元素
    let addElement = function(top, left) { 
    	let bg = color[Math.floor(Math.random() * (color.length - 1 + 1) + 1)]
    	$('body').append(` <div class="main" style="top: `+ (top-15) +`px; left: ` + (left-15) + `px;"> <div class="disc1 `+ bg + `"></div> <div class="disc2 `+ bg + `"></div> <div class="square `+ bg + `"></div> </div> `)
    	$('.main').animate({ 
    	    opacity: 0,
    	    top: '-=100px'
    	}, function (e) { 
    		// 动画结束时删除自己，以免页面元素生成过多
    	    $(this).remove()
    	})
    }
    
    $(document).ready(function() { 
    	// 鼠标点击
        $(document).on('click', function(event) { 
            addElement(event.pageY, event.pageX)
        })
    	
    	// 鼠标移动
    	$(document).on('mousemove', function(event) { 
    		addElement(event.pageY, event.pageX)
    	})
    })

## 用到的背景色 ##

.bg-red{ background-color:#e54d42;}
    .bg-orange{ background-color:#f37b1d;}
    .bg-yellow{ background-color:#fbbd08;}
    .bg-olive{ background-color:#8dc63f;}
    .bg-green{ background-color:#39b54a;}
    .bg-cyan{ background-color:#1cbbb4;}
    .bg-blue{ background-color:#0081ff;}
    .bg-purple{ background-color:#6739b6;}
    .bg-mauve{ background-color:#9c26b0;}
    .bg-pink{ background-color:#e03997;}
    .bg-brown{ background-color:#a5673f;}
    .bg-grey{ background-color:#8799a3;}
    .bg-gray{ background-color:#f0f0f0;}
    .bg-black{ background-color:#333;}
    .bg-white{ background-color:#fff;}
    .bg-gradual-red{ background-image:linear-gradient(45deg,#f43f3b,#ec008c);}
    .bg-gradual-orange{ background-image:linear-gradient(45deg,#ff9700,#ed1c24);}
    .bg-gradual-green{ background-image:linear-gradient(45deg,#39b54a,#8dc63f);}
    .bg-gradual-purple{ background-image:linear-gradient(45deg,#9000ff,#5e00ff);}
    .bg-gradual-pink{ background-image:linear-gradient(45deg,#ec008c,#6739b6);}
    .bg-gradual-blue{ background-image:linear-gradient(45deg,#0081ff,#1cbbb4);}