网页上从右边缓缓弹出的广告框效果-Javascript-技术教程-asp编程网

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页上从右边缓缓弹出的广告框效果</title>
<script language="javascript">
var $ = function (d){return document.getElementById(d)};
var CLS={
 create: function() {
 return function() {
 this.$ADD = function (fn){CLS.add(this,fn)};
 this.init.apply(this, arguments);
 }
 },
 add:function (obj,fn){
 fn.apply(obj,arguments);
 },
 enterFrame:function (){
 this.onEnterFrame=function (){};
 this.$PLAY = function (g){
 this.enterFrameP = this.enterFrameP || 10;
 this.CLStimeIndex = CLS.ontimes.length;
 CLS.ontimes.push(this);
 window.clearTimeout(this.enterFrameTimeout);
 window.clearInterval(this.enterFrameInterval);
 if(g)this.enterFrameTimeout = window.setTimeout('CLS.ontimes['+this.CLStimeIndex+'].enterFrameInterval=window.setInterval("CLS.ontimes['+this.CLStimeIndex+'].onEnterFrame()",'+this.enterFrameP+')',parseInt(g*1000));
 else this.enterFrameInterval = window.setInterval("CLS.ontimes["+this.CLStimeIndex+"].onEnterFrame()",this.enterFrameP);
 }
 this.$STOP = function (){
 window.clearInterval(this.enterFrameInterval);
 }
 this.$SET = function (p){
 this.enterFrameP = p;
 }
 },
 ontimes:new Array()
};
CLS.Marquee = CLS.create();
CLS.Marquee.prototype = {
 init:function (button,box,speed){
 this.box = $(box);
 this.tit = $(button)
 this.kong = $("kong");
 this.onOpen = true;
 this.show = false;
 this.time = 0;
 this.speed = speed;
 this.kong.style.height = this.box.offsetHeight +"px";
 this.Maxw = this.box.offsetWidth-this.tit.offsetWidth;
 this.box.style.right = -this.box.offsetWidth + "px";
 this.boxTop = this.kong.offsetTop;
 var _t = this;
 this.tit.onclick = function (){
 this.show = true;
 if(_t.onOpen){
 _t.onEnterFrame = _t.close;
 _t.onOpen = false;
 }else{
 _t.onEnterFrame = _t.open;
 _t.onOpen = true;
 }
 _t.$PLAY();
 };
 this.$ADD(CLS.enterFrame);
 this.onEnterFrame = this.open;
 this.$PLAY();
 },
 open:function(){
 this.tit.innerHTML = "-";
 var _r = parseInt(this.box.style.right);
 var _b = (0 - _r)/30;
 this.box.style.right = (_r + _b) +"px";
 this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
 if(_b==0 && !this.show){
 this.time +=10;
 if(this.time>=this.speed*1000){
 this.show = true;
 this.onOpen = false;
 this.$STOP();
 this.onEnterFrame = this.close;
 this.$PLAY();
 }
 }
 },
 close:function (){
 this.tit.innerHTML = "+";
 var _r = parseInt(this.box.style.right);
 var _b = (-this.Maxw - _r)/5;
 this.box.style.right = Math.round(_r + _b) +"px";
 this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
 }
};
window.onload = function (){
setTimeout(function(){new CLS.Marquee("tit","abc",10)},3000);//tit是点击按钮的Id ，abc是浮动块的ID,10是显示时长
};
</script>
<style type="text/css">

</style>
</head>
<body style="margin:0px;">

<div id="kong">

<div id="abc">
 <div id="tit">-</div>
 <div class="right">
<a href="http://www.hwj123.com/blog/post/51.html">网页上从右边缓缓弹出的广告框效果</a></div>
</div>
</div>
<h1>3秒后弹出!！</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>
[/code]

网页上从右边缓缓弹出的广告框效果

最新相关教程

热门教程

推荐教程