一阶段第三次整理(定时器,div的透明度和color透明度,滚动条的监听,div的滚动条监听,火狐的滚轮监听)

1.滚动条监听:

1.window.scrolltop。对网页滚动条

      var  divh = document.getElementById("da").scrollTop;  获取div的滚动条高度 ;配合定时器每多少秒获取一次;

2.opacity  设置div的透明度    transparent 是设置color的透明度

3.定时器的代码 setInterval( ,1000)     后面加括号,括号中写function

var 变量 = setInterval( function(){},1000); 后面的数字代表每多少秒执行一次,1000是一秒

也可以在页面加载完成后写setInterval(dh,100);    dh是定时器的变量名, 100是秒数值,每0.1秒执行一次;

可以直接在function中直接调用这个定时器;     function dh(){};

定时器清除的代码:clearInterval(写定时器的变量);   在定时器执行完自己想要的结果后,关掉定时器;

4. 滚动条监听

    windowAddMouseWheel();  
    function windowAddMouseWheel() {  
        var scrollFunc = function (e) {  
            e = e || window.event;  
            if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件  
                if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                    alert("滑轮向上滚动");  
                }  
                if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                    alert("滑轮向下滚动");  
                }  
            } else if (e.detail) {  //Firefox滑轮事件  
                if (e.detail> 0) { //当滑轮向上滚动时  
                    alert("滑轮向上滚动");  
                }  
                if (e.detail< 0) { //当滑轮向下滚动时  
                    alert("滑轮向下滚动");  
                }  
            }  
        };  
        //给页面绑定滑轮滚动事件  
        if (document.addEventListener) {  
            document.addEventListener('DOMMouseScroll', scrollFunc, false);  
        }  
    //滚动滑轮触发scrollFunc方法  
        window.onmousewheel = document.onmousewheel = scrollFunc;  
    }  
滚轮监听的事件添加

在win7系统下,无论IE7, IE10, Opera12,或者是safari5.1,每次往下滚动event.wheelDelta值都是-120.

对于FireFox浏览器(Opera浏览器也有),判断鼠标滚动方向的属性为event.detail, 向下滚动值为3.向上滚动值为-3.
需要注意的是,FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值

//    定时器,没0.08秒执行一次,并有一个函数名============div的透明度渐变
    setInterval(bb,80);
//    一个值赋值给一个变量
    var val = 0.001;
// 运行定时器的那个函数
    function bb(){
//    判断那个变量小于等于1的时候就运行下面的方法
        if(val <= 1){
//  找到要渐变的那个div
        var aa = document.getElementById('sj1_2');
//  找到要渐变的那个div
        var cc = document.getElementById('sj1_3');
//变量的值*4的透明度输出到样式(opacit是透明度)
        aa.style.opacity = val*4;
//变量的值*4的透明度输出到样式(opacit是透明度)
        cc.style.opacity = val*4;
//每次这个变量都+0.01
        val+=0.01;
        }
    } 
// 杂牌广告导航页面加载完成以后每0.1秒获取一次
setInterval(dh,100);
用定时器给一个div的背景图片透明度渐变的代码,以后可以拿出来用

今天写了一天js,感觉js还是很难,很多逻辑上的东西还没有搞懂,继续努力吧

原文地址:https://www.cnblogs.com/baobaoa/p/8765449.html