纯css+js水平时间轴
自定义,并自动加载时间节点
当前时间节点居中,突出显示
时间动态无痕添加
效果图:
初始状态
时间左走到一定2016.1月后
html:
<!-- 水平时间轴 -->
<div id="timeline" style="width: 902px; height: 60px;">
<ul id="dates" style="position: absolute; right: 0; top: -10px;"></ul>
<ul id="issues" style="display: none;">
</ul>
<div id="grad_left" style="display: none;">
</div>
<div id="grad_right" style="display: none;"></div>
<a href="#" id="next" style="display: none;">+</a>
<a href="#" id="prev" style="display: none;">-</a>
</div>
<!-- End水平时间轴 -->
对应 JS 设置处理:
var left = document.getElementById(datesDiv).offsetLeft + parseInt($("#" + datesDiv).parent().css('background-position-y')) + $("#" + datesDiv).children().width();
var newYear = parseInt($("#dates li:first-child a").attr('year')) - 1;
if (left > 0) {
var datesLi = "";
for (var i = 1; i <= 12; i++) {
datesLi += "<li><a href=\"javascript:void();\" onclick=\"chooseMonth('" + newYear + "','" + i + "')\" year=" + newYear + " month=" + i + ">" + newYear + "." + i + "</a></li>";
}
$("#dates").width($("#dates").width() + 12 * $("#" + datesDiv).children().width());
$("#dates li:first-child").before($(datesLi));
//$().timelinr({ arrowKeys: 'true' });//在源码中,click事件用on绑定到a上,此处不用重新初始化
}
资料下载:链接: http://pan.baidu.com/s/1o8lezNG 密码: 7q6n
纯css+js水平时间轴的更多相关文章
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- 水平时间轴 html + css
比较粗糙,效果如图 这个是写微信页面时写的,pc 也是一样的效果 代码如下: <div class="time_line_box"> <div class=&qu ...
- margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架
有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...
- 未知高度-纯css实现水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果
1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
随机推荐
- __attribute__ ((section(".text")))的测试
一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...
- spoj 2319 BIGSEQ - Sequence
You are given the sequence of all K-digit binary numbers: 0, 1,..., 2K-1. You need to fully partitio ...
- ps中常用的快捷键
ctrl+c 复制 ctrl+v 粘贴 ctrl+n 新建文件 ctrl+s 保存 空格键 手抓工具 ctrl+t 自由变形 ctrl+加号 放大 ctrl+减号 缩小 ctrl+r 标 ...
- 【转】近百个Android优秀开源项目
近百个Android优秀开源项目 Android开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项目,贡献出他们的智慧 ...
- Oralce 字符串截取
update E_SYS_STRATEGY set sconfigvalue=(select Substr((select sconfigvalue from E_SYS_STRATEGY where ...
- Unity3D Asset Server搭建 .
Unity3D Asset Server搭建 本文转载于 http://blog.csdn.net/amazonzx/article/details/7980117,非常感谢! Asset Se ...
- 【Linux】鸟哥的Linux私房菜基础学习篇整理(九)
1. quotacheck [-avugfM] [/mount_point]:扫描文件系统并创建Quota配置文件.参数:-a:扫描所有在/etc/mtab内,含有quota支持的文件系统,加上此参数 ...
- 动态规划(斜率优化):BZOJ 1010 【HNOI2008】 玩具装箱
玩具装箱toy Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 8218 Solved: 3233[Submit] Description P 教授要去 ...
- 使用StaticResource给控件定义公共的样式和属性来写界面XAML
一:效果图 二:定义公共的样式和属性 在MainPage.xaml中 <phone:PhoneApplicationPage.Resources> <SolidColorBrush ...
- UNIX环境下的共享内存
好久没更新博客了,最近几个月一直在忙项目,现在终于有时间进一步学习了.这次记录的是unix环境中共享内存的使用方法. 在我理解,共享内存就是在内存中开辟一段空间,各个毫不相干的进程就可以通过访问这段 ...