前端小案例：jquery制作oppo进度条特效

Posted 2021-04-08 学习web前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小案例：jquery制作oppo进度条特效相关的知识，希望对你有一定的参考价值。

腾讯新闻轮播源码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oppo进度条切换</title>
<meta name="Keywords" content="1号店，关键词">
<meta name="Description" content="">
<style>
*{margin:0;padding:0;}
.oppo{width:100%;height:630px;/*像素单位*/}
.pic{width:100%;height:630px;background:#0EC2E9;overflow:hidden;/*超出部分隐藏*/position:relative;/*相对定位参考物*/}
.pic ul li{width:100%;height:630px;list-style:none;/*去掉小黑点*/}
/*图片区*/
/*
.pic ul li img{position:absolute;top:0;left:0;}
*/
/*进度区*/
.bar{width:1178px;height:10px;background:#000;position:absolute;/*移动定位*/left:50%;bottom:30px;margin-left:-590px;/*做外边距*/background:url("images/bar.png") no-repeat center;border-radius:5px;}
.bar p{width:0px;height:10px;background:#ffffff;display:block;}
.text{width:40px;height:40px;background:#ddd;cursor:pointer;/*鼠标划过样式*/line-height:40px;text-align:center;margin:0 auto;}
</style>
</head>
<body>
<!--
容器
div?what? div盒子模型作用：装网页内容怎么区分多个？？？用名字格式 <div class="">
class 在<style> 有标识符 . +oppo => .oppo
-->
<div class="oppo">
<div class="pic">
<ul>
<li style="background:url('images/1.jpg') no-repeat center;">
<img src="images/con1.png">
</li>
<li style="background:url('images/2.jpg') no-repeat center;">
<img src="images/con2.png">
</li>
<li style="background:url('images/3.jpg') no-repeat center;">
<img src="images/con3.png">
</li>
</ul>
<div class="bar">
<p></p>
</div>
</div>
</div>
<div class="text">
按钮
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var i=0;//累加的变量
var timer;
abc()
function abc(){
$("ul li").eq(i).find("img").animate({left:"0px"},500,function(){
$(".bar p").animate({width:"1170px"},8000,function(){
$(".bar p").css("width","0px");
$("ul li").eq(i).find("img").animate({left:"1170px"},500,function(){
i++;//0+1 =1
if(i>2)
i=0;
$("ul li").eq(2).fadeIn(100).siblings().fadeOut(100);
});
});
});
};
setInterval(abc,9200)
</script>
</body>
</html>

感谢 · 转发欢迎大家留言

以上是关于前端小案例：jquery制作oppo进度条特效的主要内容，如果未能解决你的问题，请参考以下文章

前端页面加载进度条的制作

使用jquery.form.js实现文件上传及进度条前端代码

肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！

星球大战jQuery水平进度条特效

前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例