浪漫制造利器

125 阅读1分钟

 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;
}