jQuery带滑动条点击切换视频代码



179 712 238



特效描述:带滑动条 点击切换视频 点击切换,jQuery滑动条,点击切换视频特效,兼容ie8及以上,谷歌,火狐,360,Safari……

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>

2. HTML代码

<div class="center">
	<!-- 播放器 -->
	<div class="video_player">
		<iframe src="http://player.videoincloud.com/vod/91313" width="700px" height="393px" frameborder="0" scrolling="No"></iframe>
	</div>
	<div class="dec_10 clearborder">
		 <div class="video_list_area">
		    <ul class="video_list">
			    <li><a class="on" name="http://player.videoincloud.com/vod/91313">[完整回放]jQuery实现视频切换并停止播放效果预览</a></li>
	            <li><a name="http://player.videoincloud.com/vod/91780">[美化效果]jQuery实现溢出隐藏带水平滚动条美化预览</a></li>
			    <li><a name="http://player.videoincloud.com/vod/91456">[精彩片段]jquery带进度条提示的图片淡出淡进切换效果代码</a></li>
			    <li><a name="http://player.videoincloud.com/vod/91457">[精彩片段]jquery项目步骤进度条效果可控制调节进度条代码</a></li>
			    <li><a name="http://player.videoincloud.com/vod/91465">[精彩片段]jQuery进度条插件制作多种彩色的动画上传进度条效果</a></li>
			    <li><a name="http://player.videoincloud.com/vod/91462">[精彩片段]jquery带有Loading进度条的焦点图片切换代码</a></li>
	            <li><a name="http://player.videoincloud.com/vod/91434">[精彩片段]jquery仿百度安全中心账号检测安全指数进度条代码</a></li>
	            <li class="last"><a name="http://player.videoincloud.com/vod/91434">[精彩片段]简单的jQuery动态加载进度条特效</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:" #c12e2e",  //#FF6666滚动条光标颜色
		cursoropacitymax:1,      //改变不透明度,光标处于活动状态(scrollabar“可见”状态),范围从1到0
		touchbehavior:false,     //使光标拖动滚动像在台式电脑触摸设备
		autohidemode:false,      //是否隐藏滚动条
		cursorwidth:"10px",      //像素光标的宽度
		cursorborder:"0",        //游标边框css定义
		cursorborderradius:"0px" //以像素为光标边界半径 
	}); 
</script>
<!-- 美化滚动条js -->
<!-- 注意:jquery.nicescroll.js文件里的(rtlmode: "auto"属性。一般的滚动条都是垂直方向所以对此属性可能不注意。改为rtlmode:false,即可实现水平滚动。次文件已更改) -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 滑动星星打分 焦点图幻灯片 其他更多 带标题的焦点图 滑动选项卡切换 视频切换 播放器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到