JS实现搜狐视频风格的记录片列表展示

line-height

list

81 浏览量更新于2024-08-30 收藏 46KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

本文将详细介绍如何使用JavaScript模拟搜狐视频记录片列表的展示效果。首先，我们会在HTML结构中创建一个基本的布局，使用`<html>`、`<head>`和`<body>`标签，并设置页面的基本样式，确保所有元素的外边距和内边距为0，消除默认样式影响。CSS部分定义了一个名为`#list`的容器，它具有300px宽度和500px高度，带有1像素的灰色边框，居中显示。 `#list.lis`是一个类，用于创建列表项，它的宽度、高度都设置为300px，行高为50px，底部有1像素的下划线边框。这个类中的`ul`元素设置了无序列表样式，使得列表看起来整洁。每个列表项`li`元素开始时是隐藏的（`display:none`），这样可以实现动态加载或按需显示的效果。在每个列表项内部，我们有以下几个部分： 1. `span`元素：宽度为30px，高度为30px，用于显示索引，文本居中对齐，背景颜色为深蓝色，字体白色。这可能是用来表示记录片的编号或序列号。 2. `p`元素：宽度为150px，用于显示记录片的标题或简介，行高为30px。 3. `.index`类的`div`元素：用于存放索引图标，宽度为50px，高度为150px，使用`display: inline-block`使其与文本并排。如果需要添加鼠标悬停效果，可能会包含`.blur`子类，使字体加粗并改变颜色，如蓝色。 4. 图像区域：`img`元素，宽高均为120px，用于显示记录片的封面图片，通过浮动和内联块元素布局与标题和索引一起显示。 5. `.desc`类的`div`元素：用于显示更详细的描述信息，使用相对定位，通常会包含更多的文本内容，但具体内容未在给定的部分中提供。通过JavaScript，你可以监听用户的交互（如点击事件）来动态控制`.lisulli`元素的`display`属性，实现类似滚动或点击加载更多记录片的效果。这种设计思路可以让页面在保持简洁的同时，提供丰富的视觉体验和交互性，适合于需要逐个展示并管理大量记录片的场景。如果你需要实现类似的功能，可以参考这篇文章提供的代码结构和CSS样式，结合具体的业务逻辑进行定制化开发。

资源详情

资源推荐

js仿搜狐视频记录片列表展示效果仿搜狐视频记录片列表展示效果

本文实例为大家分享了js搜狐视频记录片列表展示效果，供大家参考，具体内容如下

<html>

<head>

<title>无标题文档</title>

<style>

*{margin:0;padding:0;}

ul{list-style:none;}

#list{width:300px;height:500px;margin:40px auto;border:1px solid #ccc;}

#list .lis{width:300px;height:auto;line-height:50px;border-bottom:1px solid #ccc;float:left;}

#list .lis ul {width:300px;height:50px;}

#list .lis ul li {width:300px;height:50px;line-height:50px;display:none;}

#list .lis ul li span {display:inline-block;margin:10px;width:30px;height:30px;text-align:center;line-height:30px;background:#3366FF;color:#fff;}

#list .lis ul li p {display:inline-block;width:150px;height:50px;line-height:30px;}

#list .lis ul li div.index {float:left;width:50px;height:150px;display:line-block;}

#list .lis ul li div.index span.blur {font-weight:bold;background:#fff;color:blue;}

#list .lis ul li img {width:120px;height:120px;margin:15px;float:left;display:inline-block;}

#list .lis ul li div.desc {position:relative;float:left;width:100px;height:150px;}

#list .lis ul li div.desc p {position:absolute;left:0px;top:20px;color:#000;width:100px;height:30px;line-height:30px;}

#list .lis ul li div.desc a {width:60px;height:30px;position:absolute;bottom:5px;right:5px;text-decoration:none;background:blue;color:#fff;font-

size:20px;padding:5px;border-radius:8px;dispaly:inline-block;line-height:30px;text-align:center;}

#list .lis ul li:first-child{display:block;}

</style>

window.onload = function (){

var oUl = document.getElementById('list');

var aUl = oUl.getElementsByTagName('ul');

var lis = oUl.getElementsByClassName('lis');

var arr = [

['小兵张嘎', 'img/1.png', '小兵张嘎的简介'],

['大耳朵图图', 'img/2.png', '大耳朵图图的简介'],

['海贼王', 'img/3.png', '海贼王的简介'],

['火影忍者', 'img/4.png', '火影忍者的简介'],

['奥特曼', 'img/1.png', '奥特曼的简介'],

['熊出没', 'img/2.png', '熊出没的简介'],

['小鬼到家', 'img/3.png', '小鬼到家的简介'],

['游戏王', 'img/4.png', '游戏王的简介'],

['哈利波特', 'img/1.png', '哈利波特的简介'],

];

for ( var i = 0; i < aUl.length; i ++ ) {

var aLi = aUl[i].getElementsByTagName('li');

aLi[0].getElementsByTagName('span')[0].innerHTML = i + 1;

aLi[0].getElementsByTagName('p')[0].innerHTML = arr[i][0];

var aSpan = aLi[1].getElementsByTagName('span');

var index = i + 1;

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38703787

粉丝: 5
资源: 889

JS实现搜狐视频风格的记录片列表展示

折叠菜单效果

仿淘宝商品列表js展示效果 jquery效果 ajax效果

uniapp仿抖音视频滑动效果

js仿抖音视频垂直滑动功能

html5实现视频列表js代码,JavaScript实现html5视频播放器列表

vue仿 bilibili 视频播放器

uni-app 仿抖音视频滑动效果

uniapp仿抖音小视频

html5 css js 仿真翻页

js 实现列表展开的效果

threejs 展示 信息列表

制作一个爱心代码视频介绍，（包含效果展示、代码讲解）

JavaScript js 仿password功能

vue实现瀑布流展示视频列表并实现向下滚动加载更多

js使用video和select循环播放视频列表，既可以在select中选择要播放的视频，当不选择的时候，循环播放视频列表请给我写个详细完整的例子

h5仿抖音上下滑动切换视频

videojs展示视频标题

html仿网易云课堂

二级导航中二级列表显示不出悬停效果

鸿蒙开发中实现视频列表js代码和hml代码

最新资源

threejs 展示信息列表