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 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
QT与javascript交互数据的实现
May 26 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
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JS实现星星海特效
2019/12/24 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python做文本按行去重的实现方法
2016/10/19 Python
python getopt详解及简单实例
2016/12/30 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
python 管理系统实现mysql交互的示例代码
2021/12/06 Python