纵向可折叠的时光轴生活轨迹出入口系统20170120 22:32:45出入口系统离开小区20170120 21:46:30出入口系统进入小区停车场系统20170120 19:15:00停车场系统豫A4NE6020170120 17:23:40停车场系统豫A4NE60楼宇门禁系统20170120 15:37:23楼宇门禁系统1#2-20520170120 13:21:15楼宇门禁系统1#2-205
View Code4、运行效果：
四、横向时间轴
1、js文件（jquery.js和jquery.timelinr-0.9.5.3.js）
（1）jquery.timelinr-0.9.5.3.js文件
1 /* ---------------------------------- 2 jQuery Timelinr 0.9.53 3 tested with jQuery v1.6+ 4 5 Copyright 2011, CSSLab.cl 6 Free under the MIT license. 7 8 9 instructions: jQuery.fn.timelinr = function(options){ settings = jQuery.extend({ containerDiv: '#timeline', datesDiv: '#dates', datesSelectedClass: 'selected', datesSpeed: 'normal', issuesDiv: '#issues', issuesSelectedClass: 'selected', issuesSpeed: 'fast', issuesTransparency: 0.2, issuesTransparencySpeed: 500, prevButton: '#prev', nextButton: '#next', arrowKeys: 'false', startAt: 1, autoPlay: 'false', autoPlayDirection: 'forward', autoPlayPause: 2000 }, options); 34 35 $(function(){ howManyDates = $(settings.datesDiv+' li').length; 38 var howManyIssues = $(settings.issuesDiv+' li').length; 39 var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); 40 var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); 41 var widthContainer = $(settings.containerDiv).width(); 42 var heightContainer = $(settings.containerDiv).height(); 43 var widthIssues = $(settings.issuesDiv).width(); 44 var heightIssues = $(settings.issuesDiv).height(); 45 var widthIssue = $(settings.issuesDiv+' li').width(); 46 var heightIssue = $(settings.issuesDiv+' li').height(); 47 var widthDates = $(settings.datesDiv).width(); 48 var heightDates = $(settings.datesDiv).height(); 49 var widthDate = $(settings.datesDiv+' li').width(); 50 var heightDate = $(settings.datesDiv+' li').height(); (settings.orientation == 'horizontal') { 53 $(settings.issuesDiv).width(widthIssue*howManyIssues); 54 $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); 55 var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 56 } else if(settings.orientation == 'vertical') { 57 $(settings.issuesDiv).height(heightIssue*howManyIssues); 58 $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); 59 var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); 60 } 61 62 $(settings.datesDiv+' a').click(function(event){ 63 event.preventDefault(); whichIssue = $(this).text(); 66 var currentIndex = $(this).parent().prevAll().length; (settings.orientation == 'horizontal') { 69 $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); 70 } else if(settings.orientation == 'vertical') { 71 $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); 72 } 73 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); (howManyDates == 1) { 76 $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); 77 } else if(howManyDates == 2) { 78 if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { 79 $(settings.prevButton).fadeOut('fast'); 80 $(settings.nextButton).fadeIn('fast'); 81 } ($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { 83 $(settings.nextButton).fadeOut('fast'); 84 $(settings.prevButton).fadeIn('fast'); 85 } 86 } else { 87 if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { 88 $(settings.nextButton).fadeIn('fast'); 89 $(settings.prevButton).fadeOut('fast'); 90 } ( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { 92 $(settings.prevButton).fadeIn('fast'); 93 $(settings.nextButton).fadeOut('fast'); 94 } 95 else { 96 $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); 97 } 98 } $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); 101 $(this).addClass(settings.datesSelectedClass); 102 if(settings.orientation == 'horizontal') { 103 $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); 104 } else if(settings.orientation == 'vertical') { 105 $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); 106 } 107 }); 108 109 $(settings.nextButton).bind('click', function(event){ 110 event.preventDefault(); 111 if(settings.orientation == 'horizontal') { 112 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 113 var currentIssueIndex = currentPositionIssues/widthIssue; 114 var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 115 var currentIssueDate = currentPositionDates-widthDate; 116 if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { 117 $(settings.issuesDiv).stop(); 118 $(settings.datesDiv+' li:last-child a').click(); 119 } else { 120 if (!$(settings.issuesDiv).is(':animated')) { 121 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed}); 122 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 123 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 124 $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); 125 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); 126 } 127 } 128 } else if(settings.orientation == 'vertical') { 129 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); 130 var currentIssueIndex = currentPositionIssues/heightIssue; 131 var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); 132 var currentIssueDate = currentPositionDates-heightDate; 133 if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) { 134 $(settings.issuesDiv).stop(); 135 $(settings.datesDiv+' li:last-child a').click(); 136 } else { 137 if (!$(settings.issuesDiv).is(':animated')) { 138 $(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed}); 139 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 140 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 141 $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); 142 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); 143 } 144 } 145 } (howManyDates == 1) { 148 $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); 149 } else if(howManyDates == 2) { 150 if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { 151 $(settings.prevButton).fadeOut('fast'); 152 $(settings.nextButton).fadeIn('fast'); 153 } ($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { 155 $(settings.nextButton).fadeOut('fast'); 156 $(settings.prevButton).fadeIn('fast'); 157 } 158 } else { 159 if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { 160 $(settings.prevButton).fadeOut('fast'); 161 } ( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { 163 $(settings.nextButton).fadeOut('fast'); 164 } 165 else { 166 $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); 167 } 168 } 169 }); 170 171 $(settings.prevButton).click(function(event){ 172 event.preventDefault(); 173 if(settings.orientation == 'horizontal') { 174 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 175 var currentIssueIndex = currentPositionIssues/widthIssue; 176 var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 177 var currentIssueDate = currentPositionDates+widthDate; 178 if(currentPositionIssues >= 0) { 179 $(settings.issuesDiv).stop(); 180 $(settings.datesDiv+' li:first-child a').click(); 181 } else { 182 if (!$(settings.issuesDiv).is(':animated')) { 183 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed}); 184 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 185 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 186 $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); 187 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); 188 } 189 } 190 } else if(settings.orientation == 'vertical') { 191 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); 192 var currentIssueIndex = currentPositionIssues/heightIssue; 193 var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); 194 var currentIssueDate = currentPositionDates+heightDate; 195 if(currentPositionIssues >= 0) { 196 $(settings.issuesDiv).stop(); 197 $(settings.datesDiv+' li:first-child a').click(); 198 } else { 199 if (!$(settings.issuesDiv).is(':animated')) { 200 $(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed}); 201 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 202 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 203 $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'},{queue:false, duration:settings.issuesSpeed}); 204 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); 205 } 206 } 207 } (howManyDates == 1) { 210 $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); 211 } else if(howManyDates == 2) { 212 if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { 213 $(settings.prevButton).fadeOut('fast'); 214 $(settings.nextButton).fadeIn('fast'); 215 } ($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { 217 $(settings.nextButton).fadeOut('fast'); 218 $(settings.prevButton).fadeIn('fast'); 219 } 220 } else { 221 if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { 222 $(settings.prevButton).fadeOut('fast'); 223 } ( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { 225 $(settings.nextButton).fadeOut('fast'); 226 } 227 else { 228 $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); 229 } 230 } 231 }); (settings.arrowKeys=='true') { 234 if(settings.orientation=='horizontal') { 235 $(document).keydown(function(event){ 236 if (event.keyCode == 39) { 237 $(settings.nextButton).click(); 238 } 239 if (event.keyCode == 37) { 240 $(settings.prevButton).click(); 241 } 242 }); 243 } else if(settings.orientation=='vertical') { 244 $(document).keydown(function(event){ 245 if (event.keyCode == 40) { 246 $(settings.nextButton).click(); 247 } 248 if (event.keyCode == 38) { 249 $(settings.prevButton).click(); 250 } 251 }); 252 } 253 } $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); (settings.autoPlay == 'true') { 258 setInterval("autoPlay()", settings.autoPlayPause); 259 } 260 }); 261 }; autoPlay(){ 265 var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); 266 if(settings.autoPlayDirection == 'forward') { 267 if(currentDate.parent().is('li:last-child')) { 268 $(settings.datesDiv+' li:first-child').find('a').trigger('click'); 269 } else { 270 currentDate.parent().next().find('a').trigger('click'); 271 } 272 } else if(settings.autoPlayDirection == 'backward') { 273 if(currentDate.parent().is('li:first-child')) { 274 $(settings.datesDiv+' li:last-child').find('a').trigger('click'); 275 } else { 276 currentDate.parent().prev().find('a').trigger('click'); 277 } 278 } 279 }
View Code2、CSS文件
相关文章
精彩导读
热门资讯
关注我们
