如图:
Html:
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="text/css" rel="stylesheet" href="../css/website.min.css" />
<link rel="stylesheet" href="../css/jquery.mCustomScrollbar.min.css">
<title>
cima
</title>
<meta content="" name="description">
<meta content="" name="keywords">
<script type="text/javascript">
var IS_LOCAL = true;var hasLogined = false;
</script>
</head>
<body style="height:100%">
<div class="section_wrap" style="height:100%">
<div class="relatv full_screen video">
<div class="clearfix relatv play_area">
<p class="abs video_info">
<span class="dis_ib name">纳税评估常用指标与实际案例分析 I3-5 财务3 </span>
<span class="progs">正在学习:<i class="now c_blue">1课时</i>/100课时</span>
</p>
<div class="video_src">
<object width="100%" height="99%" type="application/x-shockwave-flash" data="http://player.polyv.net/videos/player.swf" id="9b038edc87e330f329463d2a5de38330_9" class="polyvFlashObject"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><param name="flashvars" value="start=0&end=176&ban_history_time=on&watchStartTime=0&vid="></object>
</div>
</div>
<div class="abs main_r">
<div class="abs link">
<a class="trans1 menu curr" href="javascript:;" data-id="1"><span class="no_dis go_next">切换到下一节</span><i class="ico"></i>目录</a>
<a class="trans1 note" href="javascript:;" data-id="2"><i class="ico"></i>笔记</a>
<a class="trans1 discuss" href="javascript:;" data-id="3"><i class="ico"></i>讨论</a>
<a class="trans1 community" href="javascript:;" data-id="4"><i class="ico"></i>社区</a>
</div>
<div class="abs control"><i class="abs ico"></i></div>
<div class="cont main_cont">
<ul class="ul for_menu">for_menu
</ul>
<div class="ul sp_ul for_note">for_note
</div>
<div class="ul sp_ul for_discs">for_discs
</div>
<div class="ul sp_ul for_comty">for_comty
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.main_r .link').on('click', 'a', function() {
var _t = $(this);
_t.addClass('curr')
.siblings().removeClass('curr');
$('.main_r .cont .ul').eq(_t.index()).show()
.siblings().hide();
});
//右侧展开收起
$('.full_screen .main_r').on('click', '.control', function() {
if(!$('.full_screen').hasClass('has_spread')) {
$(this).parent().css("width","0");
$('.full_screen').css("padding-right","15px");
$('.full_screen').addClass('has_spread')
}else {
$(this).parent().css("width","300px");
$('.full_screen').css("padding-right","315px");
$('.full_screen').removeClass('has_spread');
}
});
});
</script>
</body>
</html>
Css:
.relatv{position: relative;z-index: 1;}
.section_wrap{min-width: 1200px;}
.full_screen{padding-right: 315px;min-height: 320px;min-width: 885px;height: 100%;}
.play_area{background-color: #000;height: 100%;}
.full_screen .main_r{background-color: #000; right: 0;top: 0;z-index: 20;height: 100%;width: 300px;}
.video .main_r .link{left: -52px;top: 50%;z-index: 25;height: 223px;margin-top: -111.5px;}
.video .main_r .link .go_next{background-color: #444;color: #999;text-align: center;width: 100px;}
.video .main_r .link a{background-color: #676767;color: #fff;display: block;height: 37px;line-height: 37px;overflow: hidden; width: 37px;margin-bottom: 20px;}
.video .main_r .link .ico{height: 37px;width: 37px;vertical-align: top;}
.video .main_r .link a.curr{background-color: #0097DD;width: 37px;}
.video .main_r .link a:hover, video .main_r .link a.menu.curr:hover{background-color: #0097DD;margin-left: -37px; width: 74px;}
.full_screen .main_r .control{background-color: #292929;cursor: pointer;left: -15px;top: 0;z-index: 25;height: 100%;overflow: hidden; width: 15px;}
.video .main_r .main_cont, .video .main_r .main_cont .sp_ul{height: 100%;overflow: auto;width: 100%;}
效果预览 http://www.xuecima.com/course/view/44
ps:由于域名问题,此链接有可能失效。
ps:鉴于个人经验有限,所有观点,如有异议,请直接回复讨论(请勿发表攻击言论)。
加入QQ群209952809(需回答问题,答案为csdn);群聊更快解决问题,更happy。