<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直播</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script src="static/js/flexible.js" type="text/javascript" ></script>
<script src="static/js/jquery.min.js" type="text/javascript" ></script>
<script src="static/js/swiper.min.js" type="text/javascript" ></script>
</head>
<body>
<!--搜索-->
<div class="search">
<input type="text" placeholder="搜索感兴趣的直播和视频"><i></i>
</div>
<!--轮播图-->
<div class="slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="static/picture/slider1.png"></div>
<div class="swiper-slide"><img src="static/picture/slider2.png"></div>
<div class="swiper-slide"><img src="static/picture/slider3.png"></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!--快捷导航-->
<div class="quick-nav">
<ul>
<li>
<img src="static/picture/icon-love.png">
<p>主播关注</p>
</li>
<li>
<img src="static/picture/icon-fav.png">
<p>视频收藏</p>
</li>
<li>
<img src="static/picture/icon-buy.png">
<p>我购买的</p>
</li>
<li>
<img src="static/picture/icon-fenlei.png">
<p>全部分类</p>
</li>
</ul>
</div>
<!--占位-->
<div class="holder"></div>
<!--热门推荐-->
<div class="hot">
<div class="title">
<div><i></i>热门推荐</div>
<a>更多<i></i></a>
</div>
<ul>
<li>
<div class="img">
<img src="static/picture/pic1.png">
</div>
<div class="desc">
<div class="t">今天带着小哈户外直播去了..</div>
<div class="info">
<span>酷酷炫炫、</span>
<span><i class="eye"></i>1.2万</span>
</div>
</div>
<div class="tips">
<span class="l">直播</span>
<span class="r">免费</span>
</div>
</li>
<li>
<div class="img">
<img src="static/picture/pic2.png">
</div>
<div class="desc">
<div class="t">带大家看看我们医院</div>
<div class="info">
<span>欣欣154</span>
<span><i class="play"></i>652</span>
</div>
</div>
<div class="tips">
<span class="l dark">13:05</span>
<span class="r">免费</span>
</div>
</li>
<li>
<div class="img">
<img src="static/picture/pic3.png">
</div>
<div class="desc">
<div class="t">产品发布会现场直播</div>
<div class="info">
<span>jack、李</span>
<span><i class="eye"></i>342</span>
</div>
</div>
<div class="tips">
<span class="l">直播</span>
<span class="r">私人</span>
</div>
</li>
<li>
<div class="img">
<img src="static/picture/pic4.png">
</div>
<div class="desc">
<div class="t">直击微创外科论坛会议现场.</div>
<div class="info">
<span>刘明主治医师</span>
<span><i class="eye"></i>148</span>
</div>
</div>
<div class="tips">
<span class="l">直播</span>
<span class="r money"><i></i>10</span>
</div>
</li>
</ul>
</div>
<!--尾部导航-->
<div class="foot-nav">
<ul>
<li class="item home active">
<i></i>
<p>首页</p>
</li>
<li class="item cate">
<i></i>
<p>全部</p>
</li>
<li class="middle">
</li>
<li class="item news">
<i></i>
<p>资讯</p>
</li>
<li class="item mine">
<i></i>
<p>我的</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//轮播图 用的是swiper组件
swiper = new Swiper('.slider .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 3,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
observer:true,
observeParents:true,
on: {
progress: function(progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 0.8 + 'rem';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
// 导航切换高亮显示
$('.foot-nav ul li.item').click(function() {
$('.foot-nav ul li').removeClass('active')
$(this).addClass('active')
})
</script>
手机移动端在线视频直播app主页模板
版权申诉
48 浏览量
2022-07-12
22:31:19
上传
评论 1
收藏 729KB RAR 举报
Zp_demo.demohuo.top_65.rar （34个子文件） 
Zp_demo.demohuo.top_65 
index.html 5KB static css 
swiper.min.css 19KB style.css 6KB image 
icon-play.png 1KB nav-cate-active.png 2KB nav-cate.png 2KB nav-my.png 2KB icon-hot.png 2KB icon-right-btn.png 1KB nav-home.png 1KB icon-search.png 1KB icon-history.png 2KB nav-news.png 1KB tag-bg.png 5KB nav-zhibo.png 6KB icon-gold.png 2KB nav-home-active.png 2KB nav-my-active.png 2KB nav-news-active.png 1KB icon-eye.png 1KB picture pic3.png 49KB icon-fenlei.png 5KB pic1.png 52KB icon-buy.png 5KB slider3.png 111KB pic2.png 66KB slider2.png 180KB icon-love.png 5KB pic4.png 49KB slider1.png 104KB icon-fav.png 5KB js flexible.js 1KB jquery.min.js 94KB swiper.min.js 109KB资源评论
