继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

笔记,遗留的两个疑问

路过的小白成长ing
关注TA
已关注
手记 13
粉丝 51
获赞 518
var timer = null;
var timer2 = null;
var flag = 0;

window.onload = function(){     
    var slip = document.getElementById('wrap');
    var Blocks = document.getElementById('listpanel').getElementsByTagName('div'); 
    slip.onmouseover = function(){
        move(0);
    }
    slip.onmouseout = function(){
        move(-280);
    }
    for(var i = 0;i < Blocks.length;i++)
    {
        var id = Blocks[i];
        id.onmouseover = function(){
            change(id, 0.3, 1);
        }

        id.onmouseout =  function(){
            change(id, 1, 0.3);
        }
    }   
}

function change(id, num, alpha){
    clearInterval(timer2);
    timer2 = setInterval(function(){
    if(num == 0.3){
        if(id.style.opacity > 0.3) alpha -= 0.1;
    }else{
        if(id.style.opacity < 1) alpha += 0.1;
    }
    if(id.style.opacity == num){
        clearInterval(timer2);
    }
    else id.style.opacity = alpha; },100);
}       

function move(Target){
    var slip = document.getElementById('wrap');
    clearInterval(timer);
    timer = setInterval(function(){
        var speed = 0;
        if(slip.offsetLeft > Target) speed = -10;
        if(slip.offsetLeft < Target) speed = 10;
        if(slip.offsetLeft == Target){
        clearInterval(timer);       
        }else slip.style.left = slip.offsetLeft + speed + 'px';},60);
}   

疑问:①绑定事件onmouseout = function(){
change();
}直接使用change()会自动运行
②遍历绑定事件只有最后一个有效

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP