封装获取【样式】的函数
function getStyle(obj,name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
}
1.逐渐变淡 && 向上升
<span id="txt">Fireming</span>
span {
opacity: 0;
position: absolute;
}
var span = document.getElementById('txt')
var timer1 = null
var timer2 = null
document.onclick = function(e) {
span.style.opacity = '1'
var mouseX = e.clientX
var mouseY = e.clientY
span.style.left = mouseX - span.offsetWidth/2 + 'px'
span.style.top = mouseY - span.offsetHeight + 'px'
Fade(span,0,1,10)
Move(span,mouseY - 100,1,15)
}
function Fade(obj,to,speed,time) {
clearInterval(timer1)
var alpha = obj.style.opacity * 100
speed = (to / 100) > obj.style.opacity ? speed : (-1*speed)
timer1 = setInterval(function() {
if(alpha === to){
clearInterval(timer1)
return
}
alpha += speed
obj.style.opacity = alpha / 100
},time)
}
function Move(obj,to,speed,time){
clearInterval(timer2)
speed = to > obj.offsetTop ? speed : (-1*speed)
timer2 = setInterval(function() {
if(obj.offsetTop === to){
clearInterval(timer2)
return
}
obj.style.top = obj.offsetTop + speed + 'px'
},time)
}