jquery实现日期进度选择效果代码
代码语言:html
所属分类:进度条
代码描述:jquery实现日期进度选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .box { width: 1036px; height: 36px; margin: 200px auto; } #progressTime_control { float: left; width: 36px; height: 36px; background-image: url(//repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png); background-color: rgba(0,0,0,0.45); border: none; outline: none; position: relative; cursor: pointer; box-sizing: border-box; background-size: 10px; background-repeat: no-repeat; background-position: center; } #progressTime_control:before { content: ''; width: 36px; height: 6px; background-color: #9D0300; position: absolute; left: 0; top: -6px; } /*#progressTime_control:after { content: ''; width: 0; height: 0; border: 8px solid transparent; border-left: 12px solid #fff; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -8px; }*/ #progressTime_control:hover:after { border-left-color: #ccc; } .progressTime { /*filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;*/ color: white; background: rgba(0,0,0,0.45); width: 1000px; height: 36px; padding-top: 0px; padding-bottom: 0px; display: none; position: relative; float: left; } #progressTime_concent { width: 100%; height: 36px; margin: 0 auto; cursor: pointer; } #scrollBarBox { width: 100%; height: 6px; padding: 5px 0; position: absolute; top: -11px; background-color: transparent; z-index: 2; } #scrollBar { width: 100%; height: 6px; background-color: #d3d3d3; cursor: pointer; position: absolute; top: 5px; } .timecode { width: 56px; height: 24px; background-color: #9D0300; position: absolute; left: 0; top: -35px; color: #fff; text-align: center; cursor: pointer; display: none; } .timecode:after { content: ''; width: 0; height: 0; border: 5px solid transparent; border-top: 5px solid #9D0300; position: absolute; left: 50%; bottom: -10px; margin-left: -5px; } #scroll_Track { width: 0px; height: 6px; background-color: #9D0300; transition: all ease-in-out .25s; } #scroll_Thumb { height: 24px; width: 100px; text-align: center; line-height: 24px; background-color: #fff; position: absolute; left: -25px; margin-top: -35px; cursor: pointer; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0