js让页面动起来 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

透明度动画

实现思路:

每次均匀改变opacity值(ie的filter值),达到改变透明度的效果

效果

logo运动


实现步骤:

对元素绑定鼠标移入移出事件

window.onload = function(){
    var container=document.getElementById('container');
    container.onmouseover = function(){
        moveStart(10,100);
    };
    container.onmouseout = function(){
        moveStart(-10,30);
    }
};

编写moveStart()函数

  1. 对于ie和Firefox等浏览器不同处理
    在ie浏览器中透明度的设置:filter: alpha(opacity:50);

在其他浏览器中:opacity: 0.5;

  1. 并没有container.offseAlpha属性
    在后续章节里将会提到用js获取属性的方法,在此处我们用var alpha代替
  2. 对于clearInterval(timer);代码段的解释
    可将moveStart中的第一个clearInterval(timer);删除,将鼠标快速移入移出元素,你会发现元素会出现闪烁。
    这是因为在进行移入移出操作不停调用moveStart,在未达到clearInterval的条件时就已经开始了下一个函数,而上一个定时器并未关闭,透明度增加和减少交替进行,就形成了闪烁的情况。

代码内容

var timer=null;
var alpha = 50;
function moveStart(oSpeed,oTarget){
    clearInterval(timer);
    timer=setInterval(function(){
        if(oTarget === alpha){
            clearInterval(timer);
        }
        else{
            alpha += oSpeed;
            container.style.filter = 'alpha(opacity:'+alpha+');'
            container.style.opacity = alpha/100.0;
        }
    },30);
}
在右侧moveStart函数中补上clearInterval(timer);,消除bug