js实现从右向左缓缓浮出网页浮动层广告的方法


Posted in Javascript onMay 09, 2015

本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法。分享给大家供大家参考。具体实现方法如下:

<!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>
右侧广告3秒后弹出
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
详解Angular cli配置过程记录
Nov 07 Javascript
详解Vue之事件处理
Jul 10 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
You might like
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
一段实时更新的时间代码
2006/07/07 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
实用自动化运维Python脚本分享
2018/06/04 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
文明礼仪标语
2014/06/13 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书