yourself_jquery로 슬라이딩 그림 테스트를 구현하는 jquery의 예

최근에 과거의 몇 가지 기본 지식을 검토하고 jquery를 사용하여 그림 슬라이딩 플러그인을 작성했습니다. 여전히 몇 가지 문제가 있지만 사용법은 매우 간단합니다. 두 개의 입력에 각각 그림이 변경된 후의 너비와 애니메이션의 속도를 입력하지 않으면 기본 너비와 기본 속도가 사용됩니다.

다음은 제가 직접 테스트한 예시입니다.

코드 복사 코드는 다음과 같습니다.

//html 코드

;

• > ;

css code

코드 복사 코드는 다음과 같습니다.

//css code
* {margin:0px;padding:0px; list-style-type:none;}
body{text-align:center;}
.content{width:590px;margin:0 auto;text-align:left ;}
.list{너비 :565px;margin:0px 9px;border:1px solid #eee;padding:5px;display:inline-block;overflow:hidden;}
.liimg{padding:4px;border :1px solid #aaa;border-radius :2px;display:inline-block;*display:inline;*margin:0px 3px; background:#FFF;width:auto;}
.imgli{margin:2px 0px; 너비:125px;높이:300px;디스플레이 :inline-block;}
.img1{배경:url(images/img1.jpg) 반복 없음 50% 50%;}
.img2{배경:url( 이미지/img2.jpg) 반복 없음 50% 50%;}
.img3{배경:url(images/img3.jpg) 반복 없음 50% 50%;}
.img4{배경:url( Images/img4.jpg) 반복 없음 50% 50%;}

js 코드

코드 복사 코드는 다음과 같습니다.

//js 코드
//그림 슬라이딩 효과를 구현하는 jquery
var zyljq = $.noContribute()
zyljq.fn .extend({
slideW:function(wid, speed){
//wid로 설정할 너비는 최소 너비 또는 최대 너비로 설정할 수 있습니다.
//설정하지 않으면 기본값 설정은 바운드 요소 너비를 기준으로 계산됩니다.
//speed 설정할 애니메이션 실행 속도는 보통, 느림, 빠름 또는 밀리초일 수 있습니다.
//설정되지 않은 경우 기본 속도는 보통입니다.
that = this; //이벤트의 모든 요소 바인딩
var eleNum = zyljq(this).size() //이미지 가져오기 Quantity
var curwidth = zyljq(this).width();//이미지의 원래 너비를 가져옵니다
if(!wid){
wid = Math.round(curwidth*4/5)
//애니메이션 종료 조건이 설정되지 않은 경우 기본 상황으로 계산됩니다
}
if(zyljq.trim(speed) == ""){
//속도가 설정되지 않은 경우 기본 속도
speed = "normal";
}
if(!isNaN(speed)){
//음수 값이 설정된 경우
speed =를 변경합니다. speed }
//사진의 최대 및 최소 너비 계산
if(wid > curwidth){
widMin = Math.floor((eleNum *curwidth - wid)/( eleNum-1)) "px";
widMax = ((curwidth*eleNum) - widMin*(eleNum-1)) "px"
}else{
widMax = Math.floor((eleNum *curwidth - wid*(eleNum-1))) "px";
widMin = wid "px";
}
//console.log("widMax=" widMax ";widMin=" widMin );
//호버 이벤트 바인딩
zyljq(this).hover(function(){
zyljq(that).stop();
zyljq(this) .animate({width: widMax},speed);
zyljq(that).not(this).animate({width:widMin},speed);
},function(){
zyljq( that).stop() ;
zyljq({width:curwidth},speed)
})


보기는 다음과 같습니다.
원래 효과:

두 번째 요소 위로 마우스를 가져간 후의 효과:

이 과정에서 몇 가지 일반적인 문제도 발생했습니다. 다음과 같이 검토되었습니다. IE의 하위 버전에서는 margin: 0 auto가 중앙에 위치하지 않으며, display: inline-block이 지원되지 않습니다. 발견하지 못한 문제점이 많을 수 있으니, 문제점을 발견하시면 조언을 환영합니다. 우리는 모두 함께 발전할 수 있습니다.