直播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/，如需转载，请注明出处，否则将追究法律责任。
上一篇：
短视频程序源码，iOS系统判断网络
下一篇：
php直播源码，动态设置背景渐变色实现
请登录后发表评论
登录
全部评论
