素材网 素材网

Jquery上下分布可拖动切换历程发展时间轴插件

下载资源()次

阅读次数()次

发布时间:2016-07-20

Jquery上下分布可拖动切换历程发展时间轴插件
分享到:

用法简介:

来源:xw素材网

Jquery上下分布可拖动切换历程发展时间轴插件。
文件引用:

<script src="plugins/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE  PLUGINS -->
<script src="plugins/jquery-ui.min.js"></script>
<!-- END PAGE  PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script>
$(function(){
var aboutWidth = $(".about").width();
$(".process-timeline").width(aboutWidth);
var lastRightSpeed = 40; //控制拖动到最右边点是否对准时间刻度线上
var processtimelineW = $(".process-timeline").width();
var processrowLength = $(".process-body").find('.process-row').length;
var processbodyNumber = processrowLength*200;
$(".process-body").css({"width":processbodyNumber});
if(processrowLength < 5) 
{
	$("#draggable").draggable('disable');
	return;
}
$("#processLeft").click(function(){
	var processContentW = $(".process-content").width();
	var processBodyW = $(".process-body").width();
	var processBodyML = parseInt($(".ui-draggable").css("left"));
	if ( (Math.abs(processBodyML)+processtimelineW) >= processBodyW ) {
		return;
	}
	$(".ui-draggable").css({"left":processBodyML-50});
});
$("#processRight").click(function(){
	var processBodyML = parseInt($(".ui-draggable").css("left"));
	if (processBodyML == 0) {
		return;
	}
	$(".ui-draggable").css({"left":processBodyML+50});
});
$(document).keydown(function(event){
	if (event.keyCode == 39) {
	   $("#processLeft").click();
	}
	if (event.keyCode == 37) {
	   $("#processRight").click();
	}
});
$("#draggable").draggable({
	cursor: "move",
	axis: 'x',
	grid: [50, 20],
	stop: function(event, ui){
		var FleftNumber = parseInt($("#draggable").css("left"));
		if (FleftNumber > 0) {
			$("#draggable").animate({"left": 0}, 500);
			return;
		};
		var leftNumber = Math.abs(FleftNumber);
		leftNumber = leftNumber + processtimelineW;
		if (leftNumber > processbodyNumber) 
		{
			leftNumber = processbodyNumber;
			$("#draggable").animate({"left": -(leftNumber-processtimelineW + lastRightSpeed)}, 500);
		}
	}
});
})
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。