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=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>
마우스 스크롤 jquery 지원 첫 번째 발표 흥분 중
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
