javascript：第五章练习搜狐视频记录片列表展示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>第五章练习搜狐视屏纪录片列表</title>

<style>

ul,li,h2,img{margin:0;padding:0}

#ul1{width:275px;height:380px;background:#ccc;margin:0 auto;}

#ul1 div{height:38px;background:#dee7e7;position:relative; border-bottom:1px solid blue;

vertical-align:bottom;line-height:20px;}

.sp1{font-size:22px;float:left;background:#dee7e7;;margin-left:5px;margin-top:10px;}

.sp2{width:35px;height:20px;float:left;font-size:14px;border:1px solid #ccc;margin-right:5px;

line-height:22px;float:right;background:#dee7e7;margin-top:15px;}

div span{display:inline-block;}

#ul1 li{display:block;width:270px;height:340px;background:#dee7e7;text-indent:25px;}

#ul1 ul{text-align:center;list-style-type:circle;}

#ul1 ul li{text-align:left;height:27px;width:256px;background:#dee;

overflow:hidden;line-height:27px;border-bottom:1px dotted #fff;}

#ul1 ul li:hover{height:82px;text-align:left;overflow:hidden;width:256px;line-height:82px;

text-indent:25px;background:#fff;}

img{width:50px;height:25px;margin-right:7px}

#ul1 .m{display:none;}//对应下面的ms显示！（我弄了半天）

</style>

window.onload=function(){

var ul=document.getElementById(‘ul1‘);

var btn=document.getElementsByClassName(‘sp2‘);

var ms=ul.getElementsByClassName(‘m‘);

var us=ul.getElementsByTagName(‘ul‘);

//alert(ms.length)

ms[0].style.display=‘block‘;

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

ms[i].index=i;

btn[i].index=i;

fn(btn[i]);

}

function fn(){

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

btn[i].onclick=function(){

for(var k=0;k<ms.length;k++){

//alert(ms.length)

if(ms[k].index!=this.index){

btn[k].style.background=‘#dee7e7‘;

ms[k].style.display=‘none‘; }

else{this.style.background=‘#fff‘;

ms[this.index].style.display=‘block‘;}

}

</script>

</head>

<body>

<div><span class="sp1">观看排行榜</span><span class="sp2">今天</span><span class="sp2">明天</span><span class="sp2">总结</span></div>

<ul>

<li><img src="../img/di5zhang/shlb.jpg"/>1开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>2Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>3利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>4解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>5Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>6利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>7解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>8Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>

</ul>

</li>

<ul >

<li><img src="../img/di5zhang/shlb.jpg"/>11开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>12Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>13利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>14解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>15Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>16利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>17解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>18Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>

</ul>

</li>

<ul >

<li><img src="../img/di5zhang/shlb.jpg"/>21开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>22Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>23利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>24解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>25Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>26利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>27解决Eclipse java build path中Web Ap</li>

<li><img src="../img/di5zhang/shlb.jpg"/>8Python开发环境之pyenv环境搭建</li>

<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>

<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>

</ul>

</li>

</ul>

</body>

</html>

转二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<style>

ul,li{

list-style:none;

margin:0px;

padding:0px;

}

#box{

width:200px;

height:auto;

margin:0px auto;

}

#xz{

width:196px;

height:26px;

border:2px solid #666666;

margin:0px auto;

}

#xz li{

width:30px;

height:20px;

background-color:#CCCCCC;

color:#666666;

text-align:center;

margin-left:3px;

margin-top:3px;

line-height:20px;

font-size:14px;

float:left;

}

#box li ul{

width:200px;

height:auto;

display:none;

}

#box li ul li{

width:196px;

height:26px;

position:relative;

border-left:2px solid #666666;

border-right:2px solid #666666;

border-bottom:2px solid #666666;

}

#box li ul li div{

width:20px;

height:20px;

font-size:16px;

text-align:center;

line-height:20px;

background-color:#CCCCCC;

position:absolute;

left:3px;

top:3px;

}

#box li ul li span{

width:167px;

height:20px;

line-height:20px;

font-size:14px;

background-color:#CCCCCC;

position:absolute;

right:3px;

top:3px;

}

#box li ul li.bwh1{

height:50px;

}

#box li ul li div.bwh2{

width:50px;

height:44px;

font-size:26px;

text-align:center;

line-height:44px;

}

#box li ul li span.bwh3{

width:137px;

height:44px;

}

#xz li.csj{

background-color:#000000;

color:#FFFFFF;

}

</style>

window.onload=function(){

var oXz=document.getElementById(‘xz‘);

var aLix=oXz.getElementsByTagName(‘li‘);

var oBox=document.getElementById(‘box‘);

var aUl=oBox.getElementsByTagName(‘ul‘);

arrN=[

];

arrT=[

[‘1这是1句话‘,‘2这是1句话‘,‘3这是1句话‘],

[‘1这是2句话‘,‘2这是2句话‘,‘3这是2句话‘,‘4这是2句话‘,‘5这是2句话‘],

[‘1这是3句话‘,‘2这是3句话‘,‘3这是3句话‘,‘4这是3句话‘],

[‘1这是4句话‘,‘2这是4句话‘,‘3这是4句话‘,‘4这是4句话‘,‘5这是4句话‘,‘6这是4句话‘],

[‘1这是5句话‘]

];

var ls=arrN.length;

var strs1=‘‘;

var strs2=‘‘;

var arr1=[];

var aLi1=null;

var arr2=[];

var aLi2=null;

var arr3=[];

var aLi3=null;

for(var w=0;w<ls;w++){

strs1+=‘<li>‘+(w+1)+‘</li>‘;

strs2+=‘<li><ul></ul></li>‘;

}

oXz.innerHTML=strs1;

oBox.innerHTML=strs2;

for(var b=0;b<ls;b++){

fn(aUl[b],arrN[b],arrT[b]);

}

aUl[0].style[‘display‘]=‘block‘;

for(var v=0;v<ls;v++){

aLi1=aUl[v].getElementsByTagName(‘li‘);

aLi2=aUl[v].getElementsByTagName(‘div‘);

aLi3=aUl[v].getElementsByTagName(‘span‘);

for(var g=0;g<aLi1.length;g++){

arr1.push(aLi1[g]);

arr2.push(aLi2[g]);

arr3.push(aLi3[g]);

}

var las=arr1.length;

aLix[0].className=‘csj‘;

for(var z=0;z<ls;z++){

aLix[z].indexs=z;

aLix[z].onmouseover=function(){

for(var c=0;c<ls;c++){

aUl[c].style.display=‘none‘;

aLix[c].className=‘‘;

}

for(var h=0;h<las;h++){

arr1[h].className=‘‘;

arr2[h].className=‘‘;

arr3[h].className=‘‘;

}

aUl[this.indexs].style[‘display‘]=‘block‘;

this.className=‘csj‘;

}

function fn(oUl,num,arr){

var aLis=oUl.getElementsByTagName(‘li‘);

var aDv=oUl.getElementsByTagName(‘div‘);

var aSp=oUl.getElementsByTagName(‘span‘);

var str=‘‘;

for(var i=0;i<num;i++){

str+=‘<li><div>‘+(i+1)+‘</div><span>‘+arr[i]+‘</span></li>‘;

}

oUl.innerHTML=str;

for(var a=0;a<num;a++){

aLis[a].index=a;

aLis[a].onmouseover=function(){

for(var s=0;s<num;s++){

aLis[s].className=‘‘;

aDv[s].className=‘‘;

aSp[s].className=‘‘;

}

this.className=‘bwh1‘;

aDv[this.index].className=‘bwh2‘;

aSp[this.index].className=‘bwh3‘;

}

</script>

</head>

<body>

</body>

</html>

时间： 2025-01-05 04:38:01

javascript：第五章练习搜狐视频记录片列表展示的相关文章

搜狐视频真实地址手动获取方法

1.打开搜狐视频地址: 比如 http://tv.sohu.com/20160713/n459068644.shtml 2.按F12,打开控制台 3.切换视频分辨率(以下以超清为例子,分辨率看width的数字一般1280为高清) 4.寻找Network下面的vrs_flash.action?vid 5.双击打开网页链接类似于:http://hot.vrs.sohu.com/vrs_flash.action?vid= 6. 按Ctrl+F,搜索.mp4 7.找出非sample的视频, ["/47

仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）

请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray fo

一个仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图类库

前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 一个仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图类库, github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray for viewpager, banner 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图专业轮播图库,没有之一也可以应用于广告

搜狐视频Redis私有云平台CacheCloud

一.CacheCloud是做什么的 CacheCloud提供一个Redis云管理平台:实现多种类型(Redis Standalone.Redis Sentinel.Redis Cluster)自动部署.解决Redis实例碎片化现象.提供完善统计.监控.运维功能.减少开发人员的运维成本和误操作,提高机器的利用率,提供灵活的伸缩性,提供方便的接入客户端二.CacheCloud提供哪些功能监控统计: 提供了机器.应用.实例下各个维度数据的监控和统计界面. 一键开启: Redis Standalon

JavaScript第五章

引用类型引用类型是一种将数据和功能组织在一起的数据结构. 引用类型:描述的是一类对象所具有的属性和方法: 对象是某个特定引用类型的实例. 1.Object类型创建Object实例的方法有两种: (1) new操作符后跟Object构造函数 (2) 使用对象字面量表示法,向函数传递大量可选参数的首选方式:var person = {} 对象字面量表示法: 对象的属性名会自动转换为字符串: 在函数内部,可以使用typeof 操作符来检测每个属性是否存在: 函数传参技巧:对于必须值使用命名参数

从思维导图中学习javascript第五章字符串函数

1.charAt():功能返回字符串中第n个字符,若超出范围返回空字符串,返回值 string中第N个字符的实际值 2.charCodeAt()

搜狐视频笔试

1. 统计数字:计算数字k在0到n中出现的次数,k可能是0-9的一个值 n=12,k=1,在[0,1,2,3,4,56,7,8,9,10,11,12],发现1出现了5次(1,10,11,12) def countK(k,num): count = 0 listK = list(range(num+1)) for item in listK: # print("item = ",item) for i in str(item): # print("i = ",i) i

搜狐财报超预期，视频业务仍亏损

4月27日消息,搜狐公布了2015年一季度未经审计的财务报告.财报显示,搜狐第一季度营收达到4.55亿美元,同比增长 25%.按美国通用会计准则计算(GAAP),搜狐第一季度净亏损为3100万美元,每股摊薄净亏损0.81美元.不按美国通用会计准则计算(non- GAAP),搜狐第一季度净亏损为2500万美元,每股摊薄ADS净亏损0.66美元,去年同期净亏损为4800万美元. 搜狐在2015年第一季度的营收虽然相较上季度有所下降,但是第一季度是业内公认的淡季,取得这样的成绩也算喜人.然而,在营收不

新浪搜狐网易等那些老牌互联网公司现在都怎样了?

对互联网企业来说,十年可以改变很多,可以改变人们的上网习惯,可以改变人们的上网需求,十年甚至可以让主流用户都换了一代,十年是个坎.从2005年到2015年,有些老牌互联网企业陷入十年魔咒,日渐式微,走向没落. 对于国内互联网企业来说,十年可以改变很多,可以改变人们的上网习惯,可以改变人们的上网需求,十年甚至可以让主流用户都换了一代,十年是个坎.从2005年到2015年,有些老牌互联网企业陷入十年魔咒,日渐式微,走向没落.但也不乏一些老牌但不老化的企业,或厚积薄发后一日千里,或稳扎稳打,愈加强大.

javascript：第五章 练习 搜狐视频记录片列表展示

javascript：第五章 练习 搜狐视频记录片列表展示的相关文章

javascript：第五章练习搜狐视频记录片列表展示

javascript：第五章练习搜狐视频记录片列表展示的相关文章