jquery 自定义滑动按钮

最新推荐文章于 2020-03-18 17:03:18 发布

zhengjiedna

最新推荐文章于 2020-03-18 17:03:18 发布

阅读量102

点赞数

分类专栏： javascript 文章标签： jQuery UP HTML ViewUI

本文链接：https://blog.csdn.net/zhengjiedna/article/details/83768436

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="http://localhost:8080/js/jquery-1.3.2.js"></script>
  <style>
	#messageBT span{
				width:46px;height:46px;margin-bottom:15px;float:left;margin-left: 25px;cursor: pointer;position:relative;
				margin-top: 0;
	}
</style>
 </HEAD>

 <BODY>

  <div style='border:1px solid;width:500px; heigth:30px' id='messageBT' >
	<span style='heigth:100%; width:0px;display:none' id='i'>
	0
	</span>
	<span style='heigth:100%; width:40px' id='a'>
	1
	</span>
	<span style='heigth:100%; width:40px' id='b'>
	2
	</span>
	<span style='heigth:100%; width:40px' id='c'>
	3
	</span>
	<span style='heigth:100%; width:40px' id='d'>
	4
	</span>
	<span style='heigth:100%; width:40px' id='e'>
	5
	</span>
	<span style='heigth:100%; width:40px' id='f'>
	6
	</span>
	<span style='heigth:100%; width:40px' id='g'>
	7
	</span>
	<span style='heigth:100%; width:0px;display:none' id='h'>
	8
	</span>
  </div>
  <input type='button' value='左' onclick='javascript:soliderControl.left()'>
  <input type='button' value='右' onclick='javascript:soliderControl.rigth()'>
   <script>
	function solider(objName){
		this.control=$("#"+objName);
		this.objName=objName
		this.maxSpanNum=7;
		this.minSpanNum=1;
		this.moveType=0;			//滚动轴对象 0标示未移动入控件 1标示已移入滚动对象中
		var temp=this;
		this.control.bind('mousewheel',function (event, delta){
			if(temp.moveType==0){return;}
			temp.moveType=0
			$('#message').html("mousewheel:"+temp.moveType)
			var dir = event.wheelDelta > 0 ? 'Up' : 'Down'
			//alert(dir+":"+event.wheelDelta)
			if(dir=='Up'){
				temp.left()
				temp.moveType=1
			}else if(dir=='Down'){
				temp.rigth()
				temp.moveType=1

			}
			return false;
		})
		this.control.bind('mouseover',function (){
			temp.moveType=1
			$('#message').html("mouseover:"+temp.moveType)
		})
		this.control.bind('mouseout',function (){
			temp.moveType=0
			$('#message').html("mouseout:"+temp.moveType)
		})
		//左边移动 
		//以下两种情况 左边到右边 如果有存在隐藏元素的话那么就要显示
		this.left=function (){
			//判断旁边是否还有隐藏的控件如果有就显示没有就停止
			if(this.checkHidden(1)<1){
				return;
			}
			//保留最后个
			if(this.checkVisible()<=this.minSpanNum){
				return;
			}
			this.leftHide($("#"+this.objName+" span:visible:first"))
			//判断当前数量是否最大数量如果是最大数量 那么就不进行添加
			if(this.checkVisible()>this.maxSpanNum){
				return;
			}
			var nodeName=$("#"+this.objName+" span:visible:last").attr('id');
			this.rigthShow($('#'+nodeName+" +span:hidden:first"));
		}
		//右边移动
		this.rigth=function (){
			//保留最后个
			if(this.checkVisible()<this.minSpanNum){
				return;
			}
			//判断旁边是否还有隐藏的控件如果有就显示没有就停止
			if(this.checkHidden(0).attr('id')==null){
				return;
			}
			var nodeName=$("#"+this.objName+" span:visible:first").attr('id');
			this.rigthShow( $('#'+nodeName).prev());
			//判断当前数量是否最大数量如果是最大数量 那么就不进行添加
			if(this.checkVisible()>this.maxSpanNum){
				this.rigthHide($("#"+this.objName+" span:visible:last"))
			}
		}
		//获取当前控件中的子元素集合数
		this.checkVisible=function (){
			return $("#"+this.objName+" span:visible").length;
		} 
		//获取隐藏列的子元素集合
		this.checkHidden=function (type){
			//type 0 获取左边隐藏列 1 获取右边隐藏列
			if(0==type){
				var nodeName=$("#"+this.objName+" span:visible:first").attr('id');
				return $('#'+nodeName).prev();
			}else if(1==type){
				var nodeName=$("#"+this.objName+" span:visible:last").attr('id');
				return $('#'+nodeName+" +span:hidden:first").length;
			}
		}
		//从左到右消失
		this.leftHide=function (jobj){
			jobj.animate({width:'0'},"normal",function(){$(this).hide();})
		}
		//从左到右显示
		this.leftShow=function (jobj){
			jobj.animate({width:'46'},"normal",function(){$(this).show();})
		}
		//从左到右消失
		this.rigthHide=function (jobj){
			jobj.animate({width:'0'},"normal",function(){$(this).hide();})
		}
		//从左到右显示
		this.rigthShow=function (jobj){
			jobj.animate({width:'46'},"normal",function(){$(this).show();})
		}
	}
	var soliderControl=new solider("messageBT");
 </script>
 <div id='message'>
	1111111111111
 </div>
 </BODY>
</HTML>