> 웹 프론트엔드 > JS 튜토리얼 > Node.js 커플릿 광고, 플로팅 광고 캡슐화 클래스(IE, FF, Opera, Safari, Chrome_advertising code

Node.js 커플릿 광고, 플로팅 광고 캡슐화 클래스(IE, FF, Opera, Safari, Chrome_advertising code

WBOY
풀어 주다: 2016-05-16 18:41:06
원래의
1346명이 탐색했습니다.

/*
커플렛 광고 호출
첫 번째 매개변수는 ID, 두 번째 매개변수는 사진, 세 번째 매개변수는 광고와 상단 사이의 거리,
네 번째 매개변수는 왼쪽과 오른쪽(true)을 나타냅니다. 왼쪽을 나타내고 false는 오른쪽을 나타냄), 다섯 번째 매개변수는 커플렛 광고의 너비입니다.
*/
new float_ad("ad_l","" ,50,true,64);
new float_ad("ad_r","", 50,false,64);

/*
플로팅 광고 호출
첫 번째 매개변수의 url은 플로팅 광고의 이미지 URL 주소(필수), 페이지 URL 링크, alt를 나타냅니다. 이미지 프롬프트 텍스트, 너비 이미지 너비(선택, 기본값 120), heihgt 이미지 높이(선택, 기본값 120)
두 번째 매개변수는 left 및 top 매개변수로 지정되는 플로팅 광고의 초기 위치를 나타냅니다.
세 번째 매개변수는 뜨는 속도를 나타내며, 0은 정적, 작을수록 뜨는 속도는 빨라집니다.jb51.net",alt:""2009 중국·대련 국제 체리 페스티벌" 자원봉사자 모집 공지,width:200 ,height:200},{left:40,top:160},20);


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

//核心代码
function $(element){
if(arguments.length>1){
for(var i=0,elements=[],length=arguments. length;ielements.push($(arguments[i]));
요소 반환;
}
if(typeof element=="string")
return document.getElementById(element);
else
요소를 반환합니다.
}
Function.prototype.bind=function(object){
var method=this;
return function(){
method.apply(object,arguments);
}
}
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
Object.extend=function(destination,resource){
for(리소스의 var 속성){
destination[property]=resource[property];
}
귀국 목적지;
}
//对联广告类
var float_ad=Class.create();
float_ad.prototype={
initialize:function(id,content,top,left,width){
document.write('
' 콘텐츠 '
');
this.id=$(id);
this.top=top;
if(!!left){
this.id.style.left="8px";
}else{
this.id.style.left=(document.documentElement.clientWidth-width-8) "px";
window.onresize=function(){
this.id.style.left=(document.documentElement.clientWidth-width-8) "px";
}.bind(this);
}
this.id.style.top=top "px";

this.interId=setInterval(this.scroll.bind(this),20);
},
scroll:function(){
this.stmnStartPoint =parseInt(this.id.style.top, 10);
this.stmnEndPoint =document.documentElement.scrollTop this.top;
if(navigator.userAgent.indexOf("Chrome")>0){
this.stmnEndPoint=document.body.scrollTop this.top;
}
if ( this.stmnStartPoint != this.stmnEndPoint ) {
this.stmnScrollAmount = Math.ceil( Math.abs( this.stmnEndPoint - this.stmnStartPoint ) / 15 );
this.id.style.top = parsInt(this.id.style.top, 10) ( ( this.stmnEndPoint}
}
}
//漂浮广告类
var move_ad=Class.create();
move_ad.prototype={
initialize:function(imgOption,initPosition,delay){
this.imgOptions=Object.extend({url:"",link:"",alt:"",width :120,높이:120},imgOption||{});
this.adPosition=Object.extend({left:40,top:120},initPosition||{});
this.delay =지연;
this.step = 1;
this.herizonFlag=true;
this.verticleFlag=true;
this.id="ad_move_sg";
var vHtmlString="
" this.imgOptions.alt "
";
document.write(vHtmlString);
this.id=$(this.id);
this.intervalId=setInterval(this.scroll.bind(this),this.delay);
this.id.onmouseover=this.stop.bind(this);
this.id.onmouseout=this.start.bind(this);
},
scroll:function(){
var L=T=0;
var B=document.documentElement.clientHeight-this.id.offsetHeight;
var R=document.documentElement.clientWidth-this.id.offsetWidth;
this.id.style.left=this.adPosition.left document.documentElement.scrollLeft "px";
this.id.style.top=this.adPosition.top document.documentElement.scrollTop "px";
this.adPosition.left =this.adPosition.left this.step*(this.herizonFlag?1:-1);
if (this.adPosition.left < L) { this.herizonFlag = true; this.adPosition.left = L;}
if (this.adPosition.left > R){ this.herizonFlag = false; this.adPosition.left = R;}
this.adPosition.top =this.adPosition.top this.step*(this.verticleFlag?1:-1);
if(this.adPosition.top <= T){ this.verticleFlag=true; this.adPosition.top=T;}
if(this.adPosition.top >= B){ this.verticleFlag=false; this.adPosition.top=B; }
},
stop:function(){
clearInterval(this.intervalId);
},
start:function(){
this.intervalId=setInterval(this.scroll.bind(this),this.delay);
}
}
관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿