javascript 이미지 회전 기능 상속_javascript 기술

먼저 며칠 동안의 애니메이션에 대한 JS가 어떻게 구성되었는지 살펴보겠습니다.

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

var photo=function(){
var index=0,a,b,c,d
return {
show:function(){},
auto:function(){ }
}
}
var aa=photo();
//기본적으로 return은 일부 메서드를 반환하는 데 사용됩니다.
///1: 초기화할 수 없으면 자동을 실행합니다.
///2: 초기화 중에는 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 태그, 각자 자신의 애니메이션을 책임지는 방법. 서로 간섭하지 마십시오. (실제로는 private 변수 문제와 관련되어 있으며 이것이 바로 그 점을 시사합니다.)

진술: 인터넷에는 위의 문제를 해결하는 방법이 많이 있습니다. 다음은 내가 알아낸 것입니다. 그래서 저는 이 내용을 여러분과 공유하기 위해 이 자리에 섰고, 전문가들은 이를 비웃을 것입니다.
네, 이 문제를 버스에서 또 풀었어요. "Javascript Language Essence" 페이지 52 5.4 기능화
이 기능 생성자의 소스 코드를 살펴보겠습니다.

//굵은 글씨는 강조를 나타냅니다.
//이 메서드는 "javascript 언어" Essence입니다. " 5.4 기능화 중 52페이지.
var constructor = function (spec,my){
var that, other private 인스턴스 변수
my = my || {}
my
에 공유 변수 추가; 새로운 객체

return that
}

다음 메소드를 살펴보세요.

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

var photo = function(spec){
var _this={},index,a,c , d;
//여기서 사용자 제어 태그를 초기화할 수 있습니다
//예를 들어, 이 외부
a.onmouseover=function(){
_this.go();//Can 호출됨
}
_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의 두 가지 애니메이션을 생성합니다.
// 자바스크립트 언어의 본질을 기능적으로 이해하는 데 문제가 있는 경우. 조언 좀 부탁드려요...

이 애니메이션은 결국 완벽하네요. 하지만 개인 변수가 너무 많습니다. 기본값을 설정할 수 있는 경우 사용자는 선택적으로 기본값을 전달할 수 있습니다. 더 좋을 것 같아요
다음 기능을 추가하면 됩니다: (많은 사람들이 사용하는 기능입니다)

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

var Extend = function(destination, source) {

for (var property in source) {
destination[property] = source[property] ;
}
return Destination;
}
// Extend의 ​​용도는 누구나 알고 있습니다.



드디어 오늘 작성한 이미지 회전 소스코드를 올려주세요:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>