jquery 自定义滑动按钮
<!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=objNamethis.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>=-=自己无聊的时候写的希望大家能提出批评 膜拜下支持鼠标滚动 jquery需要自己添加 第一次发布 激动中