jquery实现视频播放页面滚动悬浮右下角继续播放效果代码
代码语言:html
所属分类:多媒体
代码描述:jquery实现视频播放页面滚动悬浮右下角继续播放效果代码
代码标签: 播放 页面 滚动 悬浮 右下角 继续 播放 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> * { box-sizing: border-box; } body { font-family: sans-serif; background: #121314; } #site { width: 600px; margin: 50px auto; } #bloc { display: block; position: static; overflow: hidden; } .box { margin: 10px; } #videoBox { border: 10px solid #212223; transition: 0.5s; } #commentsBox { float: left; width: 340px; } #suggBox { float: left; width: 220px; } #commentsBox > div, #suggBox > div { background: #212223; margin-bottom: 20px; padding: 20px 30px; } #suggBox p span { width: 100%; display: block; background: #924; height: 8px; margin: 10px 0; } #suggBox p:before { width: 30%; content: ' '; display: block; background: #121314; height: 8px; margin: 10px 0; } #suggBox p:after { width: 70%; content: ' '; display: block; background: #999; height: 8px; margin: 10px 0; } #commentsBox p span { width: 100%; display: block; background: #eee; height: 6px; margin: 15px 0; } #commentsBox p:before { width: 30%; content: ' '; display: block; background: #121314; height: 6px; margin: 10px 0; } #commentsBox p:after { width: 70%; content: ' '; display: block; background: #eee; height: 6px; margin: 10px 0; } video { width: 100%; vertical-align: bottom; } #videoBox.in { animation: ac 1s; } #videoBox.out { position: fixed; bottom: 0; right: 0; width: 300px; z-index: 999; animation: an 0.5s; } </style> </head> <body> <div id="site"> <div id="videoBox" class="box"> <video width="400" controls> <source src="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> </div> <div id="bloc"> <div id="commentsBox" class="box"> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></span><span></span><span></span></p> </div> <div> <p><span></span><span></s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0