> 웹 프론트엔드 > JS 튜토리얼 > Zhongguancun Forum rating_javascript 기술을 모방한 후 팝업 프롬프트 효과를 구현하는 JS 방법

Zhongguancun Forum rating_javascript 기술을 모방한 후 팝업 프롬프트 효과를 구현하는 JS 방법

WBOY
풀어 주다: 2016-05-16 16:13:23
원래의
847명이 탐색했습니다.

이 글의 예시에서는 중관촌 포럼 평가를 모방한 후 팝업 프롬프트 효과를 구현하는 JS 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

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



JS는 Zhongguancun Forum
에서 평가한 후 팝업 메시지의 효과를 흉내냅니다.

<스크립트 언어="javascript">
var x=window.x||{};
x.creat=함수(t,b,c,d){
this.t=t;
this.b=b;
this.c=c;
this.d=d;
this.op=1;
this.div=document.createElement("div");
this.div.style.height="40px";
this.div.style.width="100px";
this.div.style.Background="red";
this.div.style.position="absolute";
this.div.style.left="50%";
This.div.style.marginLeft="-50px"
this.div.style.marginTop="-20px"
this.div.innerText="참여해주셔서 감사합니다! 체험 5"
this.div.style.fontSize="12"
this.div.style.lineHeight=this.div.style.height
this.div.style.textAlign="center";
this.div.style.fontWeight="bold"
//this.div.style.border="단색 1px"
this.div.style.color="#fff"
this.div.style.top=(this.b "%");
document.body.appendChild(this.div);
this.run();
}
x.creat.prototype={
실행:함수(){
var me=this;
this.div.style.top=-this.c*(this.t/this.d)*(this.t/this.d) this.b "%";
this.t ;
This.q=setTimeout(function(){me.run()},25)
if(this.t==this.d){
ClearTimeout(me.q);
setTimeout(function(){me.alpha();},1000);
}
},
알파:함수(){
var me=this;
if("v"=="v"){
This.div.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=" this.op*100 ")";
This.div.style.filter="alpha(opacity=" this.op*100 ")";
;}
else{this.div.style.opacity=this.op}
this.op-=0.02;
this.w=setTimeout(function(){me.alpha()},25)
if(this.op<=0){
ClearTimeout(this.w);
document.body.removeChild(me.div);
}
}
}
새로운 x.creat(1,50,25,30);


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿