一阶段项目整理第二次(ul,li 为块状元素可以代替div使用,背景图片的透明度渐变问题)

今天的问题整理:

1.ul  li  块状元素,可以是代替div用,网页大部分的布局都是ul,li做的。

2.网页加载完成的js效果(div的背景图片透明度渐变)

  加一个定时器,并附加一个函数

    例子:setInterval(bb,80);

定义一个变量,值大的时候是可以从深到浅的。值小的时候是可以从浅到深。

    var val = 0.001;           var val = 100;

判断那个变量小于等于1的时候就运行下面的方法
        if(val <= 1){                 if(val >= 0){   
//  找到要渐变的那个div
        var aa = document.getElementById('sj1_2');
//变量的值*4的透明度输出到样式(opacit是透明度)  //变量的值 /100 的透明度输出到样式(opacit是透明度)       
        aa.style.opacity = val*4;                                    aa.style.opacity = val/100;
//每次这个变量都+0.01     //每次这个变量都处以100
        val+=0.01;                    var - -;

 1 //页面加载完成
 2 window.onload = function(){
 3 //    定时器,没0.08秒执行一次,并有一个函数名
 4     setInterval(bb,80);
 5 //    一个值赋值给一个变量
 6     var val = 0.001;
 7 // 运行定时器的那个函数
 8     function bb(){
 9 //    判断那个变量小于等于1的时候就运行下面的方法
10         if(val <= 1){
11 //  找到要渐变的那个div
12         var aa = document.getElementById('sj1_2');
13 //变量的值*4的透明度输出到样式(opacit是透明度)
14         aa.style.opacity = val*4;
15 //每次这个变量都+0.01
16         val+=0.01;
17         }
18     }
19 };
背景图片的透明度渐变(从浅到深)

//页面加载完成
window.onload = function(){
//    定时器,没0.08秒执行一次,并有一个函数名
    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;
      
//页面加载完成
window.onload = function(){
//    定时器,没0.02秒执行一次,并有一个函数名
    setInterval(bb,20);
//    一个值赋值给一个变量
    var val = 100;
// 运行定时器的那个函数
    function bb(){
//    判断那个变量大于等于0的时候就运行下面的方法
        if(val >= 0){
//  找到要渐变的那个div
        var aa = document.getElementById('sj1_2');
//变量的值 /100 的透明度输出到样式(opacit是透明度)
        aa.style.opacity = val/100;
//每次这个变量都减减
        val--;
        }
    }
};
图片背景的透明度渐变(从深变浅)
原文地址:https://www.cnblogs.com/baobaoa/p/8748816.html