- 浏览: 25518 次
- 性别:
- 来自: 北京
文章分类
最新评论
视频播放 ---滚动条的设置
- 博客分类:
- 工作中遇到的问题
此方法需要引入一个插件:jscroll.js.
以下为滚动条样式设置的详细说明:
下面请看例子:
例1:
代码:
结果:
例2:
代码:
结果:
例3:
代码:
结果:
例4:
代码:
结果:
文章来源:http://app.soche8.com/show/jscoll/
以下为滚动条样式设置的详细说明:
$(".dd").jscroll({ W:"12px"//设置滚动条宽度 ,BgUrl:""//设置滚动条背景图片地址 ,Bg:"#ccc"//设置滚动条背景图片position,颜色等 ,Bar:{ Pos:"bottom"//设置滚动条初始化位置在底部 ,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色:鼠标离开(默认),经过 ,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景:鼠标离开(默认),经过,点击 ,Btn:{ btn:true//是否显示上下按钮 false为不显示 ,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景:鼠标离开(默认),经过,点击 ,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景:鼠标离开(默认),经过,点击 ,Fn:function(){}//滚动时候触发的方法 });
下面请看例子:
例1:
代码:
<script type="text/javascript"> $(document).ready(function(){ $(".ff").jscroll({ W:"15px" ,BgUrl:"url(s_bg2.gif)" ,Bg:"right 0 repeat-y" ,Bar:{Pos:"bottom" ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"} ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}} ,Btn:{btn:true ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script>
结果:
例2:
代码:
<script type="text/javascript"> $(document).ready(function(){ $(".ff").jscroll({ W:"15px" ,BgUrl:"url(s_bg3.gif)" ,Bg:"right 0 repeat-y" ,Bar:{Pos:"bottom" ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"} ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}} ,Btn:{btn:true ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script>
结果:
例3:
代码:
<script type="text/javascript"> $(document).ready(function(){ $(".hh").jscroll({ W:"15px" ,BgUrl:"url(s_bg4.gif)" ,Bg:"right 0 repeat-y" ,Bar:{Pos:"bottom" ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"} ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}} ,Btn:{btn:true ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script>
结果:
例4:
代码:
<script type="text/javascript"> $(document).ready(function(){ $(".ii").jscroll({ W:"15px" ,BgUrl:"url(s_bg5.gif)" ,Bg:"right 0 repeat-y" ,Bar:{Pos:"bottom" ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"} ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}} ,Btn:{btn:true ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script>
结果:
文章来源:http://app.soche8.com/show/jscoll/
发表评论
-
获取当前鼠标点击的位置
2015-05-13 14:39 0<img src="images/a.gi ... -
判断checkbox是否选中
2015-05-12 11:22 611$('#checker').click(function( ... -
ie67中li下的间隙问题
2014-03-21 17:42 529一、以下是引发此BUG的条件: 必要条件: l ... -
含滚动条的内容区域,文字居中问题 版心问题
2014-01-23 14:53 0最近在工作中遇到了一些版心问题,下面简单的记录一下。 ht ... -
IE6下溢出多余文字--多了一只猪
2013-10-29 14:22 356在IE6中,会无缘无故多出几个字儿来,这是IE6BUG 。 ... -
遇到的问题
2013-10-21 17:45 0影视课堂: 1、影视课堂--影视课堂 当含有滚动条的一个块 ... -
点击空白处下拉列表隐藏,全选,反选,不选
2013-08-13 09:44 717<!DOCTYPE html PUBLIC &quo ... -
美化单个checkbox
2013-08-02 10:37 481<script language="jav ... -
美化type="file"
2013-08-02 10:30 530<div class="fileInput ... -
ie6兼容png前置与背景
2013-07-23 11:16 693次方法需要用到一个插件:DD_belatedPNG.js ... -
美化select
2013-07-29 13:46 530需要用到一个selectbox.js插件,在这里直接粘贴到代码 ... -
下载--美化select 2
2013-07-29 13:46 556<!DOCTYPE html PUBLIC &quo ... -
下载--美化select
2013-07-29 13:47 467<!DOCTYPE html PUBLIC &quo ... -
CSS 子div设置float之后父div无法自适应高度问题 --清除浮动
2013-04-18 17:31 0向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear ... -
同一行图片和文字垂直居中以及图片和文字间隙问题
2013-04-04 23:47 14601、垂直居中: 如果一个div中含有图片和文字,并且 ... -
透明度相关问题
2013-04-04 04:48 0背景渐变问题: http://hi.baidu.com/dii ... -
ie6兼容-------Xun
2013-07-23 10:33 6081、float属性对margin的影响-----双边距问题 ...
相关推荐
videojs视频可拖动播放与不可拖动播放
3、支持设置视频播放的前置广告、暂停广告以及滚动文字广告; 4、支持开关灯效果; 5、支持将视频地址分享到腾讯微博等各大社交网站; 6、支持调整视频显示比例; 7、支持播放结束后显示精彩内容推荐; 8、支持...
3、支持设置视频播放的前置广告、暂停广告以及滚动文字广告;4、支持开关灯效果;5、支持将视频地址分享到腾讯微博等各大社交网站;6、支持调整视频显示比例;7、支持播放结束后显示精彩内容推荐;8、支持自动隐藏...
- 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...
利用jq简单控制h5视频播放进度条,让使用者不能快进,可以后退。原理是每500毫秒记录一次进度条时间,如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒,那么就让视频返回到上一个进度,因项目开发中对于视频...
autoscroll(true,false):当播放列表过长的时候,默认会自动显示滚动条。当该值设置为’true’的时候,会自动根据鼠标滚动播放列表。 displaywidth(number of pixes):设置显示区域的宽度,当设置的比较小的时候,播放...
win32下实现视频播放。 C视频源代码 视频教程步骤源码 DDraw DirectX 实例 DES加密算法源代码 如题。 Detected memory leaks 检查内存泄漏源码 DigiStatic_src 自绘CStatic实现数字效果。 DirectShow开发指南...
设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....
4、无法播放优酷等的视频,视频播放链接可以直接填写图片,<a ></a>外围需要设置高宽,否则图片会非常小。 5、点击文章图片后,会自动停止,需要点击滚动条或左右箭头才能重新自动播放。 6、点击放大图像之后,会...
4、无法播放优酷等的视频,视频播放链接可以直接填写图片,<a ></a>外围需要设置高宽,否则图片会非常小。 5、点击文章图片后,会自动停止,需要点击滚动条或左右箭头才能重新自动播放。 6、点击放大图像之后,会...
语言:English 加快页面加载速度,增强图像和视频颜色,抗锯齿字体,在启动时解冻等等。 互联网应该既有趣又美丽。...-超薄滚动条(使Web UI的噪音更少)。 待办事项:-音频增强器-控制面板(设置页)
使用VLCKit写的仿网易云音乐播放音乐,实现的功能主要有: ...* 锁屏控制(播放、暂停、喜欢、上一曲、下一曲、播放条拖动) * 耳机线控(播放、暂停、上一曲、下一曲、快进、快退) * 通知监听(插拔耳机、播放打断)
4、无法播放优酷等的视频,视频播放链接可以直接填写图片,<a ></a>外围需要设置高宽,否则图片会非常小。5、点击放大图像之后,会自动停止,需要点击滚动条才能重新自动播放。6、点击放大图像之后,再点击右上角...
精灵Flash播放器,是由flash678.com公司...不仅仅支持本地SWF文件播放,更支持在线SWF播放,并可通过滚动条自由控制播放进度,本的SWF文件只要双击就可以打开,以后操作SWF就象操作文本一样简单自如,是Flash播放的首选.
4. 实现视频列表页设计,视频可以进行播放与暂停; 5. 实现分享功能,可以将当前界面分享给好友 6.设计概要:数据绑定、列表渲染、请求服务器数据, (1)实现顶部页签滑动效果,需要借助于scroll-view可滚动视图...
5、支持多终端跨终端视频播放 / 支持PC端、安卓android端、苹果iOS端、微信扫二维码观看视频,让复杂的跨平台视频播放,变得相当简单(使用跨平台调用代码即可); 6、修正播放器色彩自定义功能。 7、修正播放器...
2、支持鼠标拖曳滚动操作的列表,同时支持系统滚动条样式 3、支持两段扩展的内置播放器,选择时间点更容易,操作更方便 4、快速使用向导,指导新用户快速熟悉软件操作 5、转换开始与结束时间记录列表,更清晰检查...
学生机在接收屏幕广播时,如果教师未锁定学生机键盘鼠标,学生就可以用窗口方式接收广播(窗口可设置为智能滚动、自由滚动、缩放显示),该功能的详细说明请参见?窗口显示模式?。此时学生可在接收屏幕广播的同时进行...