for (let i = 10; i < 20; i++) {
let div = $('<div/>').addClass('kk')
div.css({
left: i * 40,
top: 200
})
$('body').append(div)
}
let zz = sun.throttle(function (e) {
let div = $('<div/>').addClass('zz')
let { pageX, pageY } = e
// let { pageX: zz } = e
//let pageX = e.pageX
//let zz = e.pageX
div.css({
left: pageX,
top: pageY,
'box-shadow': `0 0 20px ${sun.rndColor()}`
})
$('body').append(div)
let rnd = Math.round(Math.random())
let rnd1 = Math.floor(Math.random() * $('.kk').length)
let timer = setInterval(() => {
if (rnd) pageX -= 5
else pageX += 5
pageY -= 5
div.css({
left: pageX,
top: pageY
})
if (pageY < -50) {
// div.remove()
div.css({
left: $('.kk').eq(rnd1).position().left,
top: $('.kk').eq(rnd1).position().top
})
clearInterval(timer)
}
}, 50);
}, 100)
$(window).mousemove(zz)
css部分
.zz {
width: 30px;
height: 30px;
background: url(./heart.png) 0 /100% 100%;
可以设置图片样式
border-radius: 50%;
position: absolute;
}
.kk {
width: 30px;
height: 30px;
position: absolute;
}