jQuery+nicescroll滚动条实现视频点播页面

效果预览

HTML

<!DOCTYPE html>
<html">
<head><!-- 防止IE8,7进入怪异模式 -->
<meta http-equiv="Content-Type" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery列表带拖动条点击切换视频特效</title>
<!-- js通用样式 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- js通用样式 -->
<!-- 滚动条主要样式 -->
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<!-- 滚动条主要样式 -->
<style type="text/css">
/*格式化样式*/
body {margin: 0;padding: 0;font-family:Microsoft YaHei!important;background-color: #F5F5F5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}a{text-decoration: none;outline: none;color:#444;}
a:visited{text-decoration: none;}
a:hover{cursor: pointer;text-decoration: none; color:#3C97D6;}
a:focus{-moz-outline-style: none;text-decoration: none;}
img{border: 0;}
.clear{clear: both;}
/*格式化样式*/
/*播放器样式*/
.video_player{height:393px;}
.video_list_area{width: 700px;}ul.video_list{margin: 7px 0px 0px 0;height: 107px; list-style:none;border-bottom:10px dashed #dcdcdc;}ul.video_list li{float: left;font-size: 14px;font-weight: bold;line-height: 24px;}ul.video_list li a{display:inline-block;padding: 14px 15px;margin-right:7px;width: 140px;height:72px;color: #fff;background-color:blue;background-color:rgba(0,152,50,0.3);}ul.video_list li.last a{margin-right:0;}ul.video_list li a:hover,ul.video_list li a.on{color: #fff;background-color: #c12e2e; background-color:rgba(0,152,50,0.1);}#ascrail2000-hr div{margin-left:0;}
.center{width: 700px;margin: 20px auto;}
/*播放器样式*/
</style>
<!--- iframe切换停止播放js -->
<script type="text/javascript">
$(function() {var iframe = $("div.video_player iframe");//播放页面$('ul.video_list li a').click(function(){iframe.attr("src",$(this).attr("name"));//更改iframe src$('ul.video_list li a').removeClass('on');$(this).addClass('on');//给点击的元素添加正在播放标识});});
</script>
<!-- iframe切换停止播放js -->
</head>
<body background=bg.jpg style=background-repeat:no-repeat;background-size:100% 100%;>
<div class="center">
<!-- 播放器 -->
<div class="video_player"><iframe src="" width="700px" height="393px" frameborder="0" cols="50%,50%" scrolling="No"></iframe>
</div>
<div class="dec_10 clearborder"><div class="video_list_area"><ul class="video_list"><li><a class="on" name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\1.mp4">[金庸武侠]【倚天屠龙记】刀剑如梦&粤语版-周华健</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\2.mp4">[金庸武侠]【倚天屠龙记】刀剑如梦-周华健</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\3.mp4">[金庸武侠]【天龙八部】难念的经-周华健</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\4.mp4">[金庸武侠]【83射雕英雄传】铁血丹心-甄妮</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\5.mp4">[金庸武侠]【笑傲江湖之东方不败】花絮-李连杰</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\6.mp4">[金庸武侠]【金庸群侠传】经典怀旧集锦</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\7.mp4">[金庸武侠]【雪山飞狐主题曲】爱你痛到不知痛-张学友</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\8.mp4">[金庸武侠]【侠客行】纵横江湖</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\9.mp4">[金庸武侠]【92射雕英雄传片头曲】神话情话-周华健&齐豫</a></li><li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\10.mp4">[金庸武侠]【92射雕英雄传片尾曲】归去来</a></li><li class="last"><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\92.mp4">[金庸武侠]【射雕英雄传92版】张智霖&朱茵</a></li></ul></div>
</div>
<!-- 播放器 -->
</div>
<!-- 美化滚动条js -->
<script type="text/javascript">
var video_list_lenght=$("ul.video_list li").length;
$("ul.video_list").css("width",$("ul.video_list li").width()*video_list_lenght-7);// 减去margin-right的7px长度
$(".video_list_area").niceScroll({  cursorcolor:" #red",  //#FF6666滚动条光标颜色cursoropacitymax:1,      //改变不透明度，光标处于活动状态（scrollabar“可见”状态），范围从1到0touchbehavior:false,     //使光标拖动滚动像在台式电脑触摸设备autohidemode:false,      //是否隐藏滚动条cursorwidth:"10px",      //像素光标的宽度cursorborder:"0",        //游标边框css定义cursorborderradius:"0px" //以像素为光标边界半径
});
</script>
<!-- 美化滚动条js -->
<!-- 注意：jquery.nicescroll.js文件里的（rtlmode: "auto"属性。一般的滚动条都是垂直方向所以对此属性可能不注意。改为rtlmode：false,即可实现水平滚动。次文件已更改） --><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p></p>
<p><a href="http://www.blacksss.info/" target="_blank"><b><font color='white'size='4'>法 拉 驴 出 品</font></b></a></p>
</div>
</body>
</html>

JS

jQuery+nicescroll滚动条实现视频点播页面相关推荐

jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低(中文文档)
jQuery.NiceScroll 特征依赖关系使用配置参数有史以来最好的 nicescroll 版本--在现代浏览器和移动设备上极其流畅和一致,资源使用率低官网:nicescroll.ar ...
滚动条插件---jquery.nicescroll.js
nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件, ...
jQuery插件之 Nicescroll滚动条
Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...
jquery niceScroll（插件）滚动条错位问题和ztree插件的使用
1.在做项目时,由于页面风格不能使用默认的滚动条,所以找到了niceScroll这个滚动条插件 2.要使用滚动条和ztree插件,我们必须先引入插件的js文件,这里要注意的是niceScroll插件是 ...
jquery.nicescroll完美滚动条使用方法
jquery.nicescroll完美滚动条使用方法(转) 配置参数 : 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变 ...
jquery.nicescroll.js 美化滚动条
1. 引用jquery.js和jquery.nicescroll.js <script type="text/javascript" src="js/jquery. ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
制作niceScroll滚动条
1.引用jquery.js和jquery.nicescroll.js <script type="text/javascript" src="js/jquery.j ...
使用jQuery实现点击按钮页面下滑一定距离
使用jQuery实现点击按钮页面下滑一定距离在页面中添加 <script>$(".anniu").click(function(){var h=$(window) ...
dom元素滚动条高度 js_js,jquery 获取滚动条高度和位置, 元素距顶部距离
一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height(); 获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(doc ...

jQuery+nicescroll滚动条实现视频点播页面

效果预览

HTML

JS

jQuery+nicescroll滚动条实现视频点播页面相关推荐

最新文章

热门文章