H5仿爱奇艺选集横向滚动

最新推荐文章于 2021-08-01 16:02:22 发布
最新推荐文章于 2021-08-01 16:02:22 发布
阅读量1k 收藏 4
点赞数
分类专栏： html
文章来源：原创地址
本文链接：https://blog.csdn.net/weixin_40013817/article/details/105768657
版权

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/animation.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/box.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/color.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/flex.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/text.css"/>
	<script src="../../js/vue.js"></script>
	<script>
        (function (doc, win) { // 移动端适配
            var docEl = doc.documentElement,
                isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                dpr = 1,
                scale = 1 / dpr,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function () {
                var width = docEl.clientWidth;
                if (width / dpr > 375) {
                    width = 375 * dpr;
                }
                // 乘以100，px : rem = 100 : 1
                docEl.style.fontSize = 100 * (width / 375) + 'px';
            };
            recalc()
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
        })(document, window);
	</script>
	<style>
		#page li {
			height: 0.5rem;
			width: 50px;
			text-align: center;
			margin-left: 0.2rem;
			list-style: none;
			border-radius: 0.04rem;
			line-height: 0.5rem;
		}

		#page li span {
			color: white;
			font-size: 0.2rem;
		}

		#page li:first-child {
			margin-left: 0px !important;
		}
	</style>
</head>
<body class="bg-blue" style="font-size: 0.05rem;">
<div id="app" style="overflow: hidden">
	<ul id="page" class="row-scroll">
		<li :style="{background: index === bgIndex ? 'chocolate' : 'rgba(51,58,68,1)'}"
			v-for="(page, index) in tvInfos.pages" :key="index">
			<span>{{page.num}}</span>
		</li>
	</ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                bgIndex: 0,
                tvInfos: {
                    pages: [
                        {
                            num: 1,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                        {
                            num: 2,
                            src: 'http://mpvideo.qpic.cn/shg_3862243085_50000_891eb692d73e4aaaac815a6d81e43166.f10002.mp4?dis_k=08729fdd550ec08b1c87f715a6896400&dis_t=1586864983'
                        },
                        {
                            num: 3,
                            src: 'https://youku.cdn2-okzy.com/20200401/8661_fafefc37/index.m3u8'
                        },
                        {
                            num: 4,
                            src: 'https://iqiyi.cdn8-okzy.com/20200414/7791_885d80f3/index.m3u8'
                        },
                        {
                            num: 5,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                        {
                            num: 6,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                        {
                            num: 7,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                        {
                            num: 8,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                        {
                            num: 9,
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'
                        },
                    ],
                }
            }
        },
    })
</script>
</body>
</html>

css

.row-scroll {
    display:-webkit-flex;display: flex;display:-webkit-box;
    margin-top: 0.11rem;width: 100%;overflow-x: scroll;height: 0.5rem;
    -webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:space-between;
    justify-content:space-between;
}

::-webkit-scrollbar { display: none !important; }

 

wflynn
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web期末网站设计大作业 HTML+CSS+JS仿爱奇艺官网影视网站
HTML网页设计
07-27 2610
网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板
仿爱奇艺H5影视站源码.rar
01-06
1.以常见的影视站为例为开发者提供h5页面开发的示例 2. 采用了许多先进的h5交互实现方式，旨在为开发者开发移动页面时提供思路 3. 需php环境支持以填充前端数据 一些关键技术点 1. h5页面的机型自适应 2. ajax动态载入数据 3. 前端对后端数据的处理 4. 页面后退的ajax状态缓存 5. 加载时展示加载动画提升用户等待体验 6. 滑动轮播 7. 菜单滑动 8. 其他一些你可能关注的技术点 ###########环境依赖 1. php 2. 缓存目录cache需要有读写权限 3. 可定期删除cache目录下非当日缓存文件夹
仿爱奇艺H5电影站v1.1源码
博客模板下载
02-22 3644
简介： 一个近乎纯前端的H5影视程序，高仿爱奇艺APP界面，资源全面，更新及时，搜索功能强大，VIP影视免费看，微商公号吸粉利器。本影视站源码采用PHP实时抓取可用资源，以文本缓存方式缓存存储，程序运行非常快速。免费源码，无需授权，无后门，简单纯净，前端代码无混淆，方便二次开发修改，无需安装，即传即用。本程序无需费心管理，让不懂程序开发又没有太多时间经常更新数据的朋友，可以快速搭建一个属于自已的电影网站。 更新日志： 修正无法全屏播放bug 轮播升级为自动采集 其他优化 http://demopen.ge
仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）
热门推荐
欢迎关注公众号：【码农突围】，公号后台回复9999，可以获取一份500页的LeetCode刷题笔记。
08-26 1万+
请尊重分享成果，转载请注明出处：http://blog.csdn.net/hejjunlin/article/details/52327435再度公布一个好消息：我操，Android-Universal-Image-Loader，EventBus, glide，greenrobot 作者给我点赞了，这。。。 前言：本篇只是一个介绍这个一个类库，具体实现思路代码会下篇中进行分析出来，仿爱奇艺视频，腾讯
Android--仿爱奇艺 首页轮播图
浮生的博客
07-30 4128
前因近期打开爱奇艺的时候，突然发现它首页的轮播图跟以前不一样了，左右两个图都能显示一部分，且有滑动时缩放的效果，一直不知咋样实现，然后在鸿洋的微信公众号中看到了一篇仿魅族Banner效果的文章，最后在参考中放出了链接，然后就参考了这篇文章，就在此做个记录。废话不多说了，先上个效果图 后果布局文件<?xml version="1.0" encoding="utf-8"?> <LinearLayout
android爱奇艺轮播图,一个仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图类库(示例代码)...
weixin_30446557的博客
05-31 286
前言：本篇只是一个介绍这个一个类库，具体实现思路代码会下篇中进行分析出来，如果觉得还行，欢迎点个star。SuperIndicatora superindicatorlibray for viewpager, banner仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图专业轮播图库，没有之一也可以应用于广告位banner支持无限循环(4->5，5->1)，可以自己设定点的样试图片支持设...
免费仿爱奇艺官网影视网站模板html
09-16
<!DOCTYPE html> 爱奇艺-中国领先的视频门户，高清影视剧，网络视频在线观看 <div class="layer"></div> 爱情保卫战" />
h5实现移动端横向滚动tab，并响应内容
01-10
在移动Web开发中，创建一个具有横向滚动Tab的界面是一个常见的需求，这通常用于展示多个类别或选项，而有限的屏幕空间无法垂直排列所有内容。本文将深入探讨如何使用HTML5技术来实现移动端的横向滚动Tab，并且这些...
纯H5前端仿爱奇艺APP影视源码.txt
最新发布
03-26
纯H5前端仿爱奇艺APP影视源码.txt
H5仿ios选择弹窗/多级联动选择
07-23
一、H5仿iOS选择弹窗 iOS的弹窗通常具有清晰的视觉效果，如半透明背景、圆角矩形按钮以及简洁的动画效果。在H5中，我们可以使用HTML、CSS和JavaScript来构建这样一个弹窗。首先，我们需要创建HTML结构，包括一个主...
模拟爱奇艺本地视频播放器app.zip
04-03
基本功能：用户通过注册并登录到系统上，然后点击不同的电影海报可以播放电影，还可以通过筛选不同种类对电影内容进行过滤，还可以收藏电影。 系统配置 本软件要求在手机（平板电脑）上运行，要求1GB以上运行内存，100MB以上存储，Android 4.x以上版本操作系统。 主界面主要有3部分构成，最上面得是搜索框，中间是分类筛选，最下面得是电影列表。搜索框的主要功能是通过输入关键词对库里已有的电影进行过滤，同时旁边话有个查看收藏按钮，可以显示已经收藏的电影。分类筛选区域主要来过滤不同类别的电影信息，例如点击2020可以查看只在2020年上映的电影。电影列表区域主要展示电影的基本信息，包括电影海报和电影名字，方便用户直观展示电影的信息，最下面还有收藏按钮，点击可以添加收藏或者取消收藏。 登录界面主要通过输入用户名和密码进行系统校验，校验正确后可以正常登入系统，对于新用户来说可以注册新的用户，点击下面的注册按钮跳转到注册页面。 注册界面可以通过输入用户名和密码进行注册，密码需要二次确认，必须保证二次输入的密码保持一致才可以正常注册。
自己写的仿爱奇艺综艺频道轮播图，没有淡入淡出效果
weixin_30799995的博客
02-17 168
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' /> <script src='js/jquery.js'&...
仿IQIYI界面
zhangfy068的专栏
04-06 360
  底部菜单 采用5个不同的Linerlayout，每一个LineLayout包含一个ImageView和一个TextView。 使用TabHost。       
仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析
欢迎关注公众号：【码农突围】，公号后台回复9999，可以获取一份500页的LeetCode刷题笔记。
09-12 5586
背景：仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）只是介绍了如何使用及实现效果，今天将分析其源码及思路。为什么有这个库，在经常开发中，会碰到，显示广告位图片，精彩推荐，及比较好的，希望能直观显示到用户看的。那么Superindicator正是这样的一个类库
仿爱奇艺UI界面(第一天)
Alfredjin_Android的博客
09-20 2893
仿爱奇艺UI界面1、整体布局是一个Activity，再一个Activity界面中填充不同的Fragment。 主界面是一个LinearLayout布局，在布局中放一个FrameLayout用来做显示填充页面的布局，之后再放一个LinearLayout布局， 根据页面显示效果设置权重，在布局中放一个RadioGroup，盛放RadioButton的容器，设置5个RadioButton用来监听点击的页面
优酷html5视频网站,国内主要视频网站的嵌入方式
weixin_28835789的博客
06-04 1116
来一篇水文，整理一下国内各大视频网站的视频嵌入方式，或许有一点用处。爱奇艺、优酷、搜狐视频、腾讯视频、酷6、土豆、乐视。这些视频站绝大多数都采用 Flash 的方式播放，很多也提供了 iframe 的播放方式。根据最新标准应当使用 ，可以添加 作为Fallback。但目前正在逐步地支持 HTML5 的原生 标签，这需要大量的开发工作。因为 会被绝大多数国内手机浏览器劫持产生各种出乎意料的渲染...
javascript--爱奇艺网站首页（轮播图）
张新丁
06-14 4100
实现一个爱奇艺网站首页的轮播图：   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;爱奇艺导航&lt;/title&gt; &lt;style type="text/css&
仿爱奇艺视频播放类APP定制开发视频播放APP制作
07-18 555
仿爱奇艺视频播放类APP定制开发视频播放APP制作 视频类APP是基本上每个人下班之后常用的手机APP应用了。就连上班或者空闲之余也会拿起手机翻看翻看抖音，快手这样的短视频类的APP。而且相对于文字，图片。人们在观看视频的时候获取的信息要更快捷，方便。浪费的时间也更少。所以视频类AP...
仿爱奇艺轮播
08-01 1072
仿爱奇艺轮播 今天和大家分享一个案例-仿爱奇艺轮播 效果图： HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
H5页面滚动优化技术探析
"H5页面滚动加速探索" 在H5页面开发中，页面滚动的性能优化是一个至关重要的课题，因为良好的滚动体验直接影响到用户的交互感受。本文将深入探讨页面滚动存在的性能问题以及如何通过各种技术手段进行改进和优化。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wflynn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值