ITPub博客

首页 > 应用开发 > C/C++ > 直播app源码开发,网页图片动态效果实现

直播app源码开发,网页图片动态效果实现

原创 C/C++ 作者:zhibo系统开发 时间:2021-01-12 14:23:10 0 删除 编辑

直播app源码开发,网页图片动态效果实现的相关代码,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bilibili.css">
    <link rel="stylesheet" href="bootstrap.min.css">
<style>
    
    
</style>
</head>
<body>
    
    <div id="math">
    <div><img width="3000" height="250" src="images/bg.png"></div>
        <div><img width="1800" height="160" src="images/girl1.png"></div>
        <div><img width="3000" height="250" src="images/grassland.png"></div>
        <div><img width="1800" height="160" src="images/leaf.png"></div>
        <div><img width="1800" height="165" src="images/mushroom.png"></div>
        <div><img width="1950" height="178" src="images/spirit.png"></div>
        <div>
        <div style="width: 450px;">
                  <span><a>主站</a></span>
                  <span><a>番剧</a></span> 
                  <span><a>游戏中心</a></span>
                  <span><a>直播</a></span>
                  <span><a>会员购</a></span>
  <span><a>漫画</a></span>
                  <span><a>赛事</a></span>   
</div>
<div style="width:500px;">
     <div style="width: 500px;">
<div>
  <input type="text" placeholder="Search for...">
  <span>
<button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
            <div>
                <div>
                    <span></span>
                    <span><a>登录</a></span>
                    <span><a>注册</a></span>
                    <button>投稿</button>
                </div>
            </div>
        </div>
        
        
    </div>
        
    <script>
        var math=document.getElementById("math");
        var image=document.getElementsByTagName("img");//选择器,匹配选择器的所有元素
        var window_width=document.documentElement.clientWidth;//获取整个窗口的宽度
        var change=window_width/2/5;//获取鼠标移动2份1屏幕宽度,模糊度发生5px变化的值是多少
        console.log(change);
        var data_image=[
            {x:0,b:4},
            {x:0,b:0},
            {x:0,b:1},
            {x:0,b:4},
            {x:0,b:5},
            {x:0,b:6},
        ]
             function vague(){
            //image[0].style='transform:translate(0px);filter:blur(4px);'; 使不同图片模糊。换用for实现
            //image[1].style='transform:translate(0px);filter:blur(0px);';
            //image[2].style='transform:translate(0px);filter:blur(1px);';
            //image[3].style='transform:translate(0px);filter:blur(4px);';
            //image[4].style='transform:translate(0px);filter:blur(5px);';
            //image[5].style='transform:translate(0px);filter:blur(4px);';
            for(var i in image){
                if(image.hasOwnProperty(i)){
                var imagearry=image[i];
                var data=data_image[i];
                imagearry.style='transition: 0.5s linear; transform:translate('+data.x+'px);filter:blur('+data.b+'px);'; //熟记('+data.x+'px)格式。
            }
            }
        }
        
        var x=0;//x坐标本来的位置
        var x_new=0;//x坐标新的位置
        var x_x=0;//新坐标和原来坐标的差值
        math.onmouseover=function(e){  //设置一个值接收鼠标初始位置的值
              x=e.clientX;
             //console.log(x);
        }
        math.onmousemove=function(e){  //设置一个值接收鼠标移动位置的值,鼠标移动时执行效果
              x_new=e.clientX;
             //console.log(x_new);
              x_x=x-x_new;
              //console.log(x_x);
              for(var i in image){
                if(image.hasOwnProperty(i)){
var mover_new=(6-parseInt(i))*10;
                var imagearry=image[i];
                var data=data_image[i];
                var new_b=Math.abs(data.b+(x_x/change));
var new_data=x_x/mover_new;
                imagearry.style='transform:translate('+new_data+'px);filter:blur('+new_b+'px);'; //熟记('+data.x+'px)格式。
            }
            }
        }
        math.onmouseout=function(e){//鼠标移出恢复初始化
            vague();
        }
         var eye=1;
        timeout=4000;
        function eye_e(){
            if(eye==4){
                eye=1;
                timeout=4000;
            }
            else{
              eye+=1; 
              timeout=35;
               
            }
            image[1].src='images/girl'+eye+'.png';
            setTimeout(()=>{
                eye_e();
            },timeout);
        }
            window.onload=function(){
            vague();
            eye_e();
        }
        
    </script>
</body>
</html>


css代码

*{ margin: 0;padding: 0;} /*初始化*/
#math{
    position: relative;
    width: 100%;
    height: 155px;
    overflow: hidden;
    background-color: aquamarine;
}
.image{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.touxian{
width:40px;
height:40px;
    border-radius:20px;
    background: url(images/kkk.jpg);
    background-size:40px 40px;
    display: inline-block;
}
.tg{
    border: none;
    background-color: #FB7299;
    width: 100px;
    height: 40px;
    border-radius:6px;
    color: white;
}
.right span{
    display: inline-block;
    margin-right: 10px;
}
.right{
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.right span a{
    line-height: 40px;
    color: white;
}
div .spana a{
    color: rgb(19, 123, 241);
    font-size: 16px;
    margin-right: 10px;
}
div.row{
    margin-right: 10px;
    display: inline-block;
}
div.head{
    display: inline-block;
    margin-left: 30px;
    z-index: 100;
}
div.head a{
    color: white;
} 
div.dl{
    z-index: 100;
    display: inline-block;
    margin-right: 30px;
}
div.daohan{
    width: 100%;
    height: 40px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
div.math{
    float: inline-start;
}

以上就是 直播app源码开发,网页图片动态效果实现的相关代码,更多内容欢迎关注之后的文章



来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69978258/viewspace-2749345/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-02

  • 博文量
    197
  • 访问量
    84659