函数传参-仿腾讯视频列表目录

HTML部分

<div class="box">
	<ul>
		<li>
			<p>战狼2：年度最燃国产军事片</p>
			<div>
				<h5>战狼2</h5>
				<span>年度最燃国产军事片</span>
			</div>
		</li>
		<li>
			<p>急诊科医生：张嘉译妙手仁心</p>
			<div>
				<h5>急诊科医生</h5>
				<span>张嘉译妙手仁心</span>
			</div>
		</li>
		<li>
			<p>蓝色星球：BBC最美纪录片</p>
			<div>
				<h5>蓝色星球</h5>
				<span>BBC最美纪录片</span>
			</div>
		</li>
		<li>
			<p>陈奕迅音乐之旅：赞周杰伦太有才</p>
			<div>
				<h5>陈奕迅音乐之旅</h5>
				<span>赞周杰伦太有才</span>
			</div>
		</li>
		<li>
			<p>忘忧镇：赵丽颖林更新全新互动剧</p>
			<div>
				<h5>忘忧镇</h5>
				<span>赵丽颖林更新全新互动剧</span>
			</div>
		</li>
		<li>
			<p>今晚七点半直播：英雄联盟音乐节</p>
			<div>
				<h5>今晚七点半直播</h5>
				<span>英雄联盟音乐节</span>
			</div>
		</li>
		<li>
			<p>喜剧总动员2：陈赫猛灌啤酒</p>
			<div>
				<h5>喜剧总动员2</h5>
				<span>陈赫猛灌啤酒</span>
			</div>
		</li>
		<li>
			<p>极限挑战3：黄渤孙红雷回忆父辈</p>
			<div>
				<h5>极限挑战3</h5>
				<span>黄渤孙红雷回忆父辈</span>
			</div>
		</li>
		<li>
			<p>独家首发：2017里约摇滚音乐节</p>
			<div>
				<h5>独家首发</h5>
				<span>2017里约摇滚音乐节</span>
			</div>
		</li>
		<li>
			<p>演员的诞生：章子怡即兴演皇后</p>
			<div>
				<h5>演员的诞生</h5>
				<span>章子怡即兴演皇后</span>
			</div>
		</li>
	</ul>
</div>

CSS部分

*{
	margin: 0;
	padding: 0;
}
html{
	background: #044e73;
}
.box{
	width: 380px;
	position: absolute;
	right: 100px;
	top: 50px;
	background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 17%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.7) 88%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 17%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 88%,rgba(255,255,255,0) 100%);
}
.box ul{
	padding: 30px 0;
	list-style: none;
	cursor: pointer;
}
.box li div{
	padding: 16px 0;
	background: #f6f9fa;
	display: none;
}
.box li div span,
.box li div h5{
	display: block;
	text-indent: 15px;
}
.box li div span{
	color: #666;
}
.box li div h5{
	font-size: 22px;
	color: #ff6428;
}
.box li p{
	line-height: 30px;
	text-indent: 15px;
}

JS部分

var aLi=document.getElementsByTagName("li");
	
for (var i=0;i<aLi.length;i++) {
	fn(aLi[i]);
}
	
function fn(li){
	var oP=li.getElementsByTagName("p")[0];
	var oDiv=li.getElementsByTagName("div")[0];
	//鼠标移入
	li.onmouseover=function(){
		oP.style.display="none";
		oDiv.style.display="block";
	}
	//鼠标移出
	li.onmouseout=function(){
		oP.style.display="block";
		oDiv.style.display="none";
	}
}