js 录像的回放时间轴

jQuery时间轴插件timeline.js

http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时间轴幻灯片插件.通过timeline.js插件,你可以很容易的制作出水平或垂直时间轴效果,并可以像幻灯片一样前后切换时间点. 使用方法在页面中引入jquery和timeline.min.js文件,以及样式文件timeline.min.css. 1 2 3 <link rel="stylesh

海康、大华NVR网络硬盘录像机录像无插件全平台访问实现—录像回放时间轴功能实现方法

在之前的博文中我们有介绍方案*NVR硬件录像机web无插件播放方案(支持取特定时间段视频流)*:该片博文旨在介绍时间轴功能的实现和相关接口的调用: 时间轴样式展示: 问题分析对于时间轴的展示实现需要实现的是时间刻度尺的展示,刻度尺的实现就是展示出时间刻度和对应时间是否拥有录像的标识,当前拥有录像的标识就是绿色背景的. 其次就是时间刻度滑标,目的用于显示选择出对应的时间点,来开始播放对应的录像文件,和跳转到对应的时间点来开始录像的直播. 前端实现代码: html css部分: .time-r

SmohanTimeLine.js 酷炫的时间轴效果

展示地址点此下载原文出处一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidth : 22, //corner宽度 scroll : true //点击时间点,是否滑动二.CSS样式 /*时间轴样式*/ #TimeLine{width:100%;height:auto;min-height:600px;position:relative;padding:20px 0;mar

纯css+js水平时间轴

自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html:  <div id="timeline" style="width: 902px; height: 60px;"> <ul id="dates" style="position: absolute; right: 0; top: -10px;&q

highcharts.js的时间轴折线图

工作中正好用到. 鼠标按住左键左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1

JS时间轴效果(类似于qq空间时间轴效果)

在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来给大家分享分享当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间列表右侧是一个时间控制抽,当时的需求是这样的:默认页面一打开只加载当前年份所有列表加载出来

js实现的时间轴效果

今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面是客户端源代码: <html> <head> <style type="text/css"> #container { font-size: 12px; background-color: #ffffff; border: 1px solid #cccc

使用canvas编写时间轴插件

使用canvas编写时间轴插件背景项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是使用了timeslider 这个插件,原插件中是使用原生的js 绘制dom节点来显示时间轴,后面使用起来发现每一次重绘就要操作上百个dom节点,性能很差,所以决定采用canvas来重写时间轴. 实现的功能 1. 绘制时间轴: 上面包括刻度.录像段.时间点 2. 点击/拖动时间轴: 可以返回释放的时间

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧: 简单版本: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="

[原创]首次制作JQueryUI插件-Timeline时间轴

特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hover辅助线. 6. 支持多级缩放.鼠标滚轮缩放. 依赖: jquery 1.11 jquer-ui 1.10 jquery-mousewheel 兼容: Chrome.Firefox.IE8(没有圆角和阴影效果) 已知问题: 刻度图片和拖动画布时的鼠标图标可能会失效.原因是这个是写在js里设置的ur

jquery时间轴幻灯展示源代码

查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <tit

JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局

一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实现的效果. 另外页面中圆形.圆角和三角同样使用了CSS3的特殊样式.这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单. 页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格.单张图片的展示风格和无图片的展示风格.这些可以根据自己的需求自己更改. 二.分析页

jQuery时间轴插件：jQuery Timelinr

前言这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

4-Highcharts曲线图之时间轴折线图

鼠标按住左键左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.

Sencha Touch2 时间轴ListPanel

直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../pub/touch-2.3.1/resources/css/sencha-touch.css"> <script type

winform中的时间轴控件

我现在做的项目遇到一个需求,就是有没有类似的控件: 我要实现的功能是:播放录像. 某个时间段内假如有2个录像,这个坐标表示的是时间,假如我现在拖动时间轴,拖到第一个录像里面开始播放第一个录像,拖到2个录像中间的时候就没有了,然后就停止播放,拖到第二个时间轴的时候,又开始播放第二个录像文件. 请问有没有类似的控件,可以显示一段时间内有几个录像,并且让用户一眼就看到录像的起始时间,然后可以拖动这个时间轴,开始播放录像文件. 如果有知道的或者以前遇到过的,请大家和我说说,万分感谢,现在着急等着啊,我百

【html】【19】高级篇--大事件时间轴

下载: http://sc.chinaz.com/jiaoben/131112181390.htm 其它: http://sc.chinaz.com/tag_jiaoben/shijianzhou.html 效果: html 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&

Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一下,找到了这个效果.结合asp.net和ajax异步加载数据. 先上效果图: 该效果使用了jquery. jQuery Masonry 插件.大家可以自由发挥,再加上滚动加载效果就更好了. 参考这篇文章:[用 jQuery Masonry 插件创建瀑布流式的页面] Demo萌点这里:百度网盘下载

超炫的时间轴jquery插件Timeline Portfolio

Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.Timeline Portfolio使用jquery和CSS3封装的非常棒,插件通过读取data.json文件来写入文档中,这样,您需要根据自己的需求设计下页面,然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了. jquery插件实例:超炫的时间轴jquery插件Time

Jquery实现的几款漂亮的时间轴

引言最近项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊!下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵向折叠时间轴 1.js文件(jQuery.js或者jQuery.min.js) 2.CSS文件 @CHARSET "UTF-8"; /*= Reset =*/ ;;} ar

巴特西