时间轴照片html触摸,利用Jquery实现几款漂亮实用的时间轴(附示例代码)

最新推荐文章于 2024-06-15 23:55:05 发布

德扑god

最新推荐文章于 2024-06-15 23:55:05 发布

阅读量1.2k

点赞数

文章标签：时间轴照片html触摸

前言

最近在项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！

时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。

一、纵向折叠时间轴

1、js文件(jQuery.js或者jQuery.min.js)

2、CSS文件

@CHARSET "UTF-8";

/*= Reset =*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td,figure{margin:0;padding:0;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

table{border-collapse:collapse;border-spacing:0;}

caption,th{font-weight:normal;text-align:left;}

fieldset,img{border:0;}

ul li{list-style:none;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

h5{font-size:18px;margin-bottom:20px;color:#666;}

h5 span{font-size:12px;color:#ccc;font-weight:normal;}

blockquote:before,blockquote:after,q:before,q:after{content:"";}

html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}

body{font:normal 14px/24px "Helvetica Neue",Helvetica,STheiti,"Microsoft Yahei","冬青黑体简体中文 w3",宋体,Arial,Tahoma,sans-serif,serif;word-wrap:break-word;background: #F0F0F0;}

input,button,textarea,select,option,optiongroup{font-family:inherit;font-size:inherit;}

code,pre{font-family:"Microsoft YaHei",Consolas,"Courier New",monospace;}

.bw0{border: none !important;}

*:focus{outline:0;}

legend{color:#000;}

input,select{vertical-align:middle;}

button{overflow:visible;}

input.button,button{cursor:pointer;}

button,input,select,textarea{margin:0;}

textarea{overflow:auto;resize:none;}

label[for],input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}

input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}

a { text-decoration:none;color:#1C3D72 }

img{-ms-interpolation-mode:bicubic;}

/* new clearfix */

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html .clearfix { zoom: 1; } /* IE6 */

*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.hidden{display:none;}

.last{border-bottom:none !important;}

blockquote{background:#f9f9f9;padding:8px 20px;border:1px solid #ccc;}

.page { display:table;margin:0 auto;background:#fff;-moz-box-shadow: 0 5px 20px #CCCCCC;-webkit-box-shadow: 0 5px 20px #CCCCCC;box-shadow: 0 5px 20px #CCCCCC;}

.link li { float:left;display:inline;margin-left:60px; }

.link li a{color:#4F4E4E;font-size:16px;font-weight:500;padding-bottom:6px;display:block;}

.link li.active{border-bottom:2px solid #0066ff;}

.link li.active a{color:#0066FF }

.link li:hover { border-bottom:2px solid #0066ff;color:#0066FF }

.link li a:hover{color:#0066FF }

.adlist{padding:20px;}

.adlist li{float:left;diaplay:inline;margin-left:30px;margin-bottom:20px;width:110px;}

.main { width:940px;margin:40px auto 10px auto;font-size:14px;display:table;padding-bottom:10px; border-bottom:1px solid #EEEEEE}

.info { width:300px;float:left;margin-right:20px; }

.info h3 { width:300px;height:26px;background:url('/../img/ictb.png') no-repeat;font-size:0;margin-bottom:8px; }

.info ul{margin-left:-10px;}

.info ul li{list-style:none;float:left;width:140px;padding-left:0;background:none;margin-left:10px;}

.info ul{margin-left:-10px;}

.b2 h3 { background-position:0 -26px; }

.b3 { margin:0;position:relative; }

.b3 span{position:absolute;right:10px;top:0;background:url('../img/morelink.gif') no-repeat left center;padding-left:12px;}

.b3 span a{color:#8C8C8C;font-weight:600}

.b3 h3 { background-position:0 -52px; }

.info li { padding:3px 0 3px 12px;background:url('../img/dian.png') 2px center no-repeat; }

.info li a { color:#8c8c8c; }

.info p { color:#8c8c8c; }

.info p img { display:table;margin:10px 0; }

.morelink{padding-top:20px;}

.morelink li{float:left;width:180px;}

.box { width:940px;margin:18px auto 0 auto; }

.left { width:140px;border-bottom:2px solid #DDD;background:#FFF;float:left; }

.left li:hover { border-left:3px solid #0066ff; }

.left li a { height:40px;line-height:40px;display:block;color:#333 }

.left li a:hover,.left li.active a{color:#0066FF}

.left li.active{border-left:3px solid #0066ff;}

.left li {

border-left:3px solid #fff;

border-bottom: 1px solid #EEEEEE;

font-size: 14px;

height: 40px;

margin-bottom: 1px;

overflow: hidden;

padding-left: 25px;

}

.event_year { width:100px;border-bottom:2px solid #DDD;text-align:center;float:left;margin-top:70px;margin-left:-60px; }

.event_year li { height:40px;line-height:40px;background:#FFF;margin-bottom:1px;font-size:18px;color:#828282;cursor:pointer; }

.event_year li.current { width:100px;background:#0066ff url('../img/jian.png') 100px 0 no-repeat;color:#FFF;text-align:left;padding-left:9px; }

.event_list { width:850px;float:right;background:url('../img/dian3.png') 139px 0 repeat-y;margin-left:50px;margin-top:70px; }

.event_list h3 { margin:0 0 10px 132px;font-size:24px;font-family:Georgia;color:#0066ff;padding-left:25px;background:url('../img/jian.png') 0 -45px no-repeat;height:38px;line-height:30px;font-style:italic; }

.event_list li { background:url('../img/jian.png') 136px -80px no-repeat; }

.event_list li span { width:127px;text-align:right;display:block;float:left;margin-top:10px; }

.event_list li p { width:680px;margin-left:24px;display:inline-block;padding-left:10px;background:url('../img/jian.png') -21px 0 no-repeat;line-height:25px;_float:left; }

.event_list li p span { width:650px;text-align:left;border-bottom:2px solid #DDD;padding:10px 15px;background:#FFF;margin:0; }

.titlelist{line-height:24px;color: #8C8C8C;padding-bottom:20px;}

.titlelist dt { font-weight: bold;color:#666;white-space: nowrap;margin:10px;}

.titlelist dd {padding-left: 13px;}

h1 {

background: url("http://ww.chinaz.com/about/images/h1-bg.gif") no-repeat scroll left bottom rgba(0, 0, 0, 0);

font-family: Tahoma,Arial,sans-serif;

font-size: 14px;

margin-bottom: 15px;

padding-bottom: 12px;

}

.hr {

border-top: 1px solid #CCD5DE;

font-size: 0;

height: 0;

line-height: 0;

margin: 15px 0;

}

.red {

color: #0065CB;

font-size:15px;

}

3、HTML代码

.page {

width: 100%;

background: #F0F0F0 url('img/dian2.png') repeat-x;

}

静态可以折叠时光轴

20170111
20170112
20170113

20170111

20170111 22:32:45

出入口系统

20170111 21:00:31

停车场系统

20170111 17:30:45

楼宇门禁系统

20170112

20170112 14:03:41

视频监控系统

20170112 11:24:47

电子巡更系统

20170113

20170112 14:03:41

视频监控系统

20170112 14:03:41

视频监控系统

$(function () {

$('label').click(function () {

$('.event_year>li').removeClass('current');

$(this).parent('li').addClass('current');

var year = $(this).attr('for');

$('#' + year).parent().prevAll('div').slideUp(800);

$('#' + year).parent().slideDown(800).nextAll('div').slideDown(800);

});

4、运行效果：

二、纵向鼠标滑动时间轴

1、js文件(jquery.js和jquery.mousewheel.js,jquery.easing.js,自定义history.js)

(1)jquery.mousewheel.js文件

* Licensed under the MIT License (LICENSE.txt).

* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.

* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.

* Thanks to: Seamus Leahy for adding deltaX and deltaY

* Version: 3.0.6

* Requires: 1.2.2+

(2)jquery.easing.js文件

* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

* Uses the built in easing capabilities added In jQuery 1.1

* to offer multiple easing options

* TERMS OF USE - EASING EQUATIONS

* Open source under the BSD License.

* TERMS OF USE - jQuery Easing

* Open source under the BSD License.

* Redistribution and use in source and binary forms, with or without modification,

* are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this list of

* conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice, this list

* of conditions and the following disclaimer in the documentation and/or other materials

* provided with the distribution.

* Neither the name of the author nor the names of contributors may be used to endorse

* or promote products derived from this software without specific prior written permission.

* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

* OF THE POSSIBILITY OF SUCH DAMAGE.

jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutC

最低0.47元/天解锁文章

德扑god

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
时间轴照片html触摸,利用Jquery实现几款漂亮实用的时间轴(附示例代码)

前言最近在项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候...
复制链接

扫一扫