JS改装的时间轴插件

最新推荐文章于 2023-02-07 10:47:35 发布

单纯些

最新推荐文章于 2023-02-07 10:47:35 发布

阅读量300

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/simple2321/article/details/105772930

版权

JS改装的时间轴插件

1.index.html源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>big events</title>
  <link rel="stylesheet" href="./bqsjz.css">
</head>

<body>
  <div class="contrainer header">
    <div class="w1000 tc body">
      <!-- <h1 class='header'>点</h1> -->
      <div class="event_wrap clearfix" style="margin-top: 5%;">
        <div class="middle_line">
        </div>
      </div>

    </div>

  </div>
</body>
<script src="./jquery.min.js"></script>
<script src='./jquery.eventFlow.js'></script>
<script>
  $(function () {
    var bigEvent = [{
      'year': 2015,
      'events': [{
          'mouths': 1,
          'times': '2015年1月29',
          'even': '米校园创业团队正式成立，'
        },
        {
          'mouths': 1,
          'times': '2015年1月30',
          'even': '米校园创业团队正式成立，'
        }
      ]
    }, {
      'year': 2016,
      'events': [{
        'mouths': 2,
        'times': '2016年2月18',
        'even': '米校园创业团队正式成立，确定以“个性化定制”为核心的校园综合服务团队，覆盖20多所大学，成为小'
      }, {
        'mouths': 4,
        'times': '2016年4月15',
        'even': '米校园创业团队正式成立，确定以“个性化定制”为核心的校园综合服务团队，覆盖20多所大学，成为小'
      }]
    }, {
      'year': 2018,
      'events': [{
        'mouths': 2,
        'times': '2016年2月18',
        'even': '米校园创业团队正式成立，确定以“个性化定制”为核心的校园综合服务团队，覆盖20多所大学，成为小'
      }, {
        'mouths': 4,
        'times': '2016年4月15',
        'even': '米校园创业团队正式成立，确定以“个性化定制”为核心的校园综合服务团队，覆盖20多所大学，成为小'
      }]
    }];
    $('.event_wrap').eventFlow({
      'events': bigEvent
    });
  })

  function getTimeDatas(timeDatas) {
    console.info("1111")
  }

</script>

</html>

2.官网下载jquery.min.js，引入jquery.min.js

3、jquery.eventFlow.js源码：

$(window).scroll(function(event) {}此方法是实现当数据超过屏幕可视高度，下拉滚动条动态效果展示出数据。

;(function($,window,document,undefined){
	var pluginName = 'eventFlow',
		defaults ={};
	function EventFlow(element,options){
		this.init(element,options);
	}
	EventFlow.prototype = {
		init : function(element,options){

			this.spliceHtml(element,options);
			var $text = $('.event_wrap .list .ev_text');
			var point = [];
  			$text.each(function(index, el) {  		
  				point.push($(this).offset().top)  	
				});	
				for(var i =0;i<point.length;i++){  		
						$($text[i]).addClass('aActiveWid'); 
				}
  			$(window).scroll(function(event) {
  				var s = $(this).scrollTop();  
  				for(var i =0;i<point.length;i++){  		
  					if(s+ $(document).height()*2/3 > point[i] ){
  						$($text[i]).addClass('aActiveWid');  			
  					}else{
  						$($text[i]).removeClass('aActiveWid')
  					}
  				}
  			});
		},
		spliceHtml :function(element,options){
		
			var $element = element;
			var $middleLine = $element.find('.middle_line');
			var middleLineI = '';
			var list = ''
			var left_num = 0;
			var right_num = 0;
			var height_num = 0;
			for(var i = 0;i<options.events.length;i++){
				left_num = 0;
			  right_num = 0;
				// middleLineI +='<i class="first"></i>'
				// 	+'<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>'
				// 	+'<i class="last"></i>';
				options.events[i].events.forEach((v,index) => {
					middleLineI +='<i></i>';
					right_num += 60;
				});
				if((i+1)%2 == 0){
			
					list += '<div class="list_right list" style="height:'+right_num+'px">'
				}else{
					//height_num = this.return_num(i)
					list +='<div class="list_left list" style="height:'+right_num+'px">'
				}
				list +='<span class="big_squre"><i>'+options.events[i].year+'</i></span>';
				for(var j = 0;j < options.events[i].events.length;j++){
				
					if((j+1)%2 == 0){
						list +='<div class="ev_text_odd ev_text ev_t'+(j+1)+'">'
					}else{
						list +='<div class="ev_text ev_text_event ev_t'+(j+1)+'">'
					}
					list +=	'<span class="small_squire"><i></i></span>'
						+'<span class="small_line"></span>'
						+'<h3><span>'+options.events[i].events[j].times+'</span></h3>'
						+'<div><span>'+options.events[i].events[j].even+'</span></div>'
					+'</div>';	
						
				}
				list += '</div>';
			};
			$element.append(list);
			$middleLine.html(middleLineI);
		
		},
		return_num(num){

		}

	}
	$.fn[pluginName] = function(options){
		options = $.extend(true, options, defaults);		
		return this.each(function(){
            new EventFlow($(this),options)
        });
	}
})(jQuery,window,document)

单纯些

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS改装的时间轴插件

JS改装的时间轴插件1.index.html源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>big events</title> <link rel="stylesheet" href="./bqsjz.c...
复制链接

扫一扫