javascript动画效果之透明度

javascript动画效果之透明度

在编写多块同时触发运动的时候,发现一个BUG,

timer = setInterval(show, 30);本来show是一个自定义函数,
当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化

原版的html和css代码在这里javascript动画效果之透明度

js代码如下

 <script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() { //自定义变量
var div = $("div");
var timer = null;
var alpha = 30; //这里触发进入事件绑定一个无名函数
div.onmouseenter = function() {
//里面为自定义函数,并传参数100为,达到100%的透明度
showDiv(100);
} //同理触发离开事件
div.onmouseleave = function() {
//同理传参数为30,达到30%的透明度
showDiv(30);
} //自定义函数,obj为自定义参数
function showDiv(obj) {
//当前只需要一个定时器,所以需要在每次开始前清除定时器
clearInterval(timer);
//定时器是通过传入的参数obj来自增自减
timer = setInterval(function() {
console.log(alpha);
if (alpha < obj) {
//第一次传参obj为100,alpha为30所以,alpha+10;
alpha += 10;
} else {
//第二次传参obj为30,而alpha为100,所以alpha-10;
alpha -= 10;
}
if (alpha == obj) {
//当相等时,则透明度为30或者100时,所以清除定时器
clearInterval(timer);
} else {
//老版本ie透明度增加或者减少
div.style.filter = 'alpha(opacity: ' + alpha + ');'
//其他浏览器
div.style.opacity = alpha / 100;
}
}, 30);
} }
</script>
04-26 23:01