jquery 간이 아코디언 플러그 인 패키지
이론 적 기초:
jquery 패 키 징 플러그 인 을 기반 으로 먼저 패 키 징 코드 를 어디 에 써 야 하 는 지 알 아야 합 니 다.
원형 에 쓰 여 있다 는 것 은 의심의 여지 가 없다.
원형 쓰기 의 장점:
데이터 공유,공간 절약
그렇다면 원형 에 쓰 인 다 는 것 을 알 았 으 니 봉 인 된 코드 를 어떻게 원형 에 쓰 죠?
우선 jq 파일 에서 다음 코드 를 찾 으 시 겠 습 니까?
jQuery.fn = jQuery.prototype = {...}
jQuery.fn 은 jq 대상 의 원형 과 같 으 며,jq 에 서 는 jQuery 를$로 간략하게 쓸 수 있 습 니 다.
그래서 우 리 는 직접$.fn 에서 봉 인 된 코드 를 작성 할 수 있다
/* */
$.fn.accordion=function (ele,width) {
//
var setBgc=function (eleObj) {
var r,g,b;
r=Math.floor(Math.random()*256);
g=Math.floor(Math.random()*256);
b=Math.floor(Math.random()*256);
$(eleObj).css("background-color","rgb("+r+","+g+","+b+")");
}
if (!ele)return;
width=width||100;
//
var eles=this.find(ele);
var nowW=this.width()-(eles.length-1)*width;
var avgW=this.width()/eles.length;
//
eles.each(function (index,element) {
setBgc(element);
});
//
eles.on({
"mouseenter":function () {
$(this).stop().animate({
width:nowW
}).css("background-size","100% 100%").siblings().stop().animate({
width:width
}).css("background-size","auto");
},
"mouseleave":function () {
eles.stop().animate({
width:avgW
}).css("background-size","auto");
}
});
return this;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 1200px;
height: 400px;
/*border: 2px solid #000;*/
margin: 100px auto;
overflow: hidden;
}
ul{
width: 1220px;
}
li {
width: 240px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="jquery-accordion.js"></script>
<script>
//
$("#box").accordion("li").find("li").each(function (index,ele) {
$(ele).css("background-image","url(images/"+(index+1)+".jpg)");
});
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
