从右向左缓缓浮出的网页浮动层广告

 首页 > 网页特效 > 层和布局 > 从右向左缓缓浮出的网页浮动层广告

从右向左缓缓浮出的网页浮动层广告

 2018-07-26  444  收藏  0 赞一个  0 真差劲  0 去评论

<!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=utf-8" />
<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">
<!--
#abc {
	border: 1px solid #003399;
	position: absolute;
	height: 150px;
	width: 220px;
	right: -100%;
}
#abc #tit {
	background-color: #0066FF;
	position: relative;
	height: 100%;
	width: 20px;
	color: #FFFFFF;
	text-align: center;
	float: left;
}
#kong {
	position: absolute;
	width: 100%;
	top: 100px;
	overflow: hidden;
	top: 100px;
	right: 0px;
}
.right {
	float: right;
	width: 190px;
	padding: 5px;
}
-->
</style>
</head>
<body style="margin:0px;">
<!--浮动框外面套一层，防止出现横向滚动条-->
<div id="kong">
 <!--浮动框-->
 <div id="abc">
   <div id="tit">-</div>
   <div class="right">
<a href="/">网页上从右边缓缓弹出的广告框效果</a></div>
 </div>
</div>
<div>3秒后弹出</div>


<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

网页上浮动滑出的DIV层，可以用作广告，也可以布置一些导航菜单，基本上没用图片，为了更好的展现功能，因此没有过多美化，这里使用了外围的浮动框解决了有可能出现的横向滚动条问题。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行