{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

jQuery入职经历水平时间轴历程代码

一款带有左右箭头控制的jQuery入职经历水平时间轴历程代码,简单横向时间轴样式,鼠标悬停变色高亮显示。


js代码

<script type="text/javascript">
	
	$(function() {
		
		var timeLength = $('.time-box li').length,
			timeliWidth = $('.time-box li').outerWidth();
		
		var index = 0;
		
		$('.time-box ul').width(timeLength * timeliWidth);
		
		function slideOne(i) {
			var scrollVal = i * timeliWidth; //每次切换的数量
			$('.time-box').stop().animate({
				scrollLeft: scrollVal
			}, 300);
		}
		
		$('.right-btn').click(function() {
			index = index >= (timeLength-4) ? 0 : index + 1;
			slideOne(index);
		})
		
		$('.left-btn').click(function() {
			index = index <= 0 ? (timeLength-4) : index - 1;
			slideOne(index);
		})
		
	})
	
</script>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery入职经历水平时间轴历程代码
喜欢 ()分享 (0)