javascript 그림 교대 함수 화 계승

먼저 며칠 전의 애니메이션 이 JS 를 어떻게 구 성 했 는 지 살 펴 보 겠 습 니 다

 
var photo=function(){ 
var index=0,a,b,c,d; 
return { 
show:function(){}, 
auto:function(){} 
} 
} 
var aa=photo(); 
//      return        。 
// 1：         auto。 
// 2:       ，     this  aa。 
//      ，     。

1:저 는 이 외국 에 가서 쓰 게 하고 싶 지 않 습 니 다

 
var aa=photo("id"); 
aa.auto()//    ，    。

이상 적 인 상 태 는 제 가 var aa=photo("id")에 있 을 때 프로그램 이 자동 으로 재생 되 는 지 알려 주 는 것 입 니 다.2:같은 페이지 에 두 개의 애니메이션 이 있다 면.예 를 들 어

 
var aa=photo("id1"); 
aa.auto() 
var bb=photo("id2"); 
bb.auto()

그러면 그들 은 모두 사용자 가 애니메이션 을 제어 하 는 A 라벨 이 있 는데 어떻게 각자 자신의 애니메이션 을 책임 집 니까?서로 간섭 하지 않다.사실 그 는 사유 변수의 문제 와 관련 되 고 this 지향 도 있다.인터넷 에는 위의 문 제 를 해결 하 는 방법 이 많다.다음은 내 가 알 아 낸 것 뿐 이 야.그래서 나 눠 드 리 러 왔 습 니 다.고수 가 웃 었 습 니 다.좋아,또 버스 에서 내 가 이 문 제 를 해결 했다.javascript 언어 정수 52 페이지 5.4 함수 화 이 함수 화 구조 기의 소스 코드 를 살 펴 보 겠 습 니 다./굵게 강조//이 방법 은 52 페이지 5.4 함수 화 된 것 입 니 다.var constructor=function(spec,my){var that,기타 개인 인 스 턴 스 변수;my = my || {}; 공 유 된 변수 와 함 수 를 my 에 that=새로운 대상 을 that 에 추가 하 는 특권 방법 return that;}다음 방법 을 보 세 요

 
var photo = function(spec){ 
var _this={},index,a,c,d; 
//            a   
//     
a.onmouseover=function(){ 
_this.go();//      
} 
_this.show=function(){}; 
_this.auto=function(){}; 
_this.go=function(){}; 
//                  
_this.auto()//       
return _this; 
} 

var bb=photo({index:1;}); 
var aa=photo({index:2}); 
//      bb aa        ，       。 
//     javascript               。    ...

마지막 으로 이 애니메이션 은 비교적 완벽 합 니 다.근 데 사유 변수 가 너무 많아 요.기본 값 을 설정 할 수 있다 면 사용자 가 선택적으로 들 어 올 수 있 습 니 다.좋 을 것 같 아서 다음 함 수 를 추가 할 수 있 습 니 다.(이것 은 많은 사람들 이 사용 하 는 것 입 니 다)

 
var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
//    Extend               。

마지막 으로 제 가 오늘 쓴 이 그림 의 교대 소스 코드 를 붙 일 수 있 습 니 다.javascript 그림 윤 환

1 2 3 4 5

1 2 3 4

var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var photo=function(spec){ var $=function(id){ return document.getElementById(id); }, _this={}, a=document.getElementById(spec["number"]).getElementsByTagName("A"), my={ $:"", change:-210, d:50, num:3, au:true, index:0,x:null,v:null }, tween=function(t,b,c,d){ return -c*(t/=d)*(t-2)+b; }, autoo=function(){ _this.show( my.index+1 > my.num ? 0 : my.index+1); }; Extend(my,spec)//그 를 사용 하 는 것 이 더 좋 습 니 다 for(var i=0;i[Ctrl+A 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript 그림 교대 함수 화 계승

좋은 웹페이지 즐겨찾기