js对联广告封装类代码

2022-07-15 80酷酷网 80kuku.com

以下是HTML网页特效代码，点击运行按钮可查看效果：以下是程序代码<!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>滑动门通用JS</title><style type="text/css"></style><script type="text/javascript">/*十三妖qq:181907667msn:wl181907667hotmail.com邮箱:thirdteendevil163.com*/function floatAdver(){ this.fDivs = new Array();//浮动广告对象数组 this.divCount = 0 ; //浮动广告对象数量 this.h = 200;//距离顶部距离 this.fDiv; this.lDiv = ""; this.rDiv = ""; this.lDivCssText = "position:absolute;top:0px;left:10px;width:100px;height:200px;border:1px solid #666;overflow:hidden;"; this.rDivCssText = "position:absolute;top:0px;right:10px;width:100px;height:200px;border:1px solid #666;overflow:hidden;"; this.lDivInner = ""; this.rDivInner = "";}floatAdver.prototype = { createInfo:function(lcss,rcss,linfo,rinfo,h){ //设置两边浮动层信息 this.lDivCssText += lcss; this.rDivCssText += rcss; this.lDivInner = linfo; this.rDivInner = rinfo; this.h = h; }, createFloatDiv:function(){ // 创建２个浮动层 this.lDiv = document.createElement("div"); this.rDiv = document.createElement("div"); this.lDiv.style.cssText = this.lDivCssText; this.rDiv.style.cssText = this.rDivCssText; this.lDiv.innerHTML = this.lDivInner; this.rDiv.innerHTML = this.rDivInner; document.body.appendChild(this.rDiv); document.body.appendChild(this.lDiv); //this.rDiv.id="r"; //this.lDiv.id="l"; this.divCount++; }, createAdvPro:function(){ //类内部创建层的浮动过程 var bodyScrollTop = document.documentElement.scrollTop; if(this.rDiv != bodyScrollTop + this.h) { this.$(this.rDiv).style.top = parseInt(this.$(this.rDiv).style.top) + Math.ceil((bodyScrollTop + this.h - parseInt(this.$(this.rDiv).style.top))/20) + "px"; this.$(this.lDiv).style.top = this.$(this.rDiv).style.top; } }, createAdv:function(){ //调用内部浮动入口!! var _this = this; _this.createFloatDiv(); setInterval(function(){_this.createAdvPro();},10); }, floatPro:function(){//非类内部创建层的浮动效果 var bodyScrollTop = document.documentElement.scrollTop; if(this.fDiv.style.top != bodyScrollTop + this.h) { this.$(this.fDiv).style.top = parseInt(this.$(this.fDiv).style.top) + Math.ceil((bodyScrollTop + this.h - parseInt(this.$(this.fDiv).style.top))/20) + "px"; } }, $:function(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; }, begins:function(o,h){//调用浮动入口!! var _this = this; _this.fDiv = _this.$(o); _this.h = h; //alert(this.fDiv.id); setInterval(function(){_this.floatPro();},10); }}var webSiteID = 6;window.onload = function(){ var m = new floatAdver(); //m.begins("b",200); var m2 = new floatAdver(); //m2.begins("a",200); m2.createInfo("background:#FFF;height:200px;width:100px;border:1px solid #CCC;","background:#DDD;height:200px;width:100px;border:1px solid #CCC;","<div m2.createAdv(); }</script></head><body><div class="bodyer"> <h1 class="t_rt"> 浮动对联广告封装类 </h1> <h2> 效果预览 </h2> <div class="preview"> <div class="scrolldoorFrame"> 见屏幕两边浮动的广告 </div> </div> <h2> 源代码 </h2> <div class="textDiv"> <textarea id="sourse">function floatAdver(){ this.fDivs = new Array();//浮动广告对象数组 this.divCount = 0 ; //浮动广告对象数量 this.h = 560;//距离顶部距离 this.fDiv; this.lDiv = ""; this.rDiv = ""; this.lDivCssText = "position:absolute;top:0px;left:10px;width:100px;height:100px;border:1px solid red;"; this.rDivCssText = "position:absolute;top:0px;right:10px;width:100px;height:100px;border:1px solid red;"; this.lDivInner = ""; this.rDivInner = "";}floatAdver.prototype = { createInfo:function(lcss,rcss,linfo,rinfo,h){ //设置两边浮动层信息 this.lDivCssText += lcss; this.rDivCssText += rcss; this.lDivInner = linfo; this.rDivInner = rinfo; this.h = h; }, createFloatDiv:function(){ // 创建２个浮动层 this.lDiv = document.createElement("div"); this.rDiv = document.createElement("div"); this.lDiv.style.cssText = this.lDivCssText; this.rDiv.style.cssText = this.rDivCssText; this.lDiv.innerHTML = this.lDivInner; this.rDiv.innerHTML = this.rDivInner; document.body.appendChild(this.rDiv); document.body.appendChild(this.lDiv); //this.rDiv.id="r"; //this.lDiv.id="l"; this.divCount++; }, createAdvPro:function(){ //类内部创建层的浮动过程 var bodyScrollTop = document.documentElement.scrollTop; if(this.rDiv != bodyScrollTop + this.h) { this.$(this.rDiv).style.top = parseInt(this.$(this.rDiv).style.top) + Math.ceil((bodyScrollTop + this.h - parseInt(this.$(this.rDiv).style.top))/20) + "px"; this.$(this.lDiv).style.top = this.$(this.rDiv).style.top; } }, createAdv:function(){ //调用内部浮动入口!! var _this = this; _this.createFloatDiv(); setInterval(function(){_this.createAdvPro();},10); }, floatPro:function(){//非类内部创建层的浮动效果 var bodyScrollTop = document.documentElement.scrollTop; if(this.fDiv.style.top != bodyScrollTop + this.h) { this.$(this.fDiv).style.top = parseInt(this.$(this.fDiv).style.top) + Math.ceil((bodyScrollTop + this.h - parseInt(this.$(this.fDiv).style.top))/20) + "px"; } }, $:function(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; }, begins:function(o,h){//调用浮动入口!! var _this = this; _this.fDiv = _this.$(o); _this.h = h; //alert(this.fDiv.id); setInterval(function(){_this.floatPro();},10); }} </textarea> </div> <h2> 使用方法 </h2> <div class="preview"> 1.把以上代码引进你的页面 <script type="text/javascript" src="scrollDoor.js"></script><br/> 2.在页面的"</body>"标签前加入以下代码:<br/> <div class="example"> <script type="text/javascript"><br/> var m = new floatAdver();<br/> m2.createInfo("左边浮动层的样式","右边浮动层的样式","左边浮动层的内容(html代码)","右边浮动层的内容(html代码)",浮动层距离顶部高度); //设置浮动层的信息<br/> m.createAdv(); //开始浮动<br/> </script> </div> 其中sd方法中的参数为:<br/> 参数一 "左边浮动层的样式":左边浮动层的CSS样式<br/> 参数二 "右边浮动层的样式":右边浮动层的CSS样式<br/> 参数三 "左边浮动层的内容(html代码)":展现在左边浮动层里的html代码<br/> 参数四 "右边浮动层的内容(html代码)":展现在右边浮动层里的html代码<br/> 参数五浮动层距离顶部高度:左右两个浮动层距离屏幕顶部的高度<br/> <span class="c_666"> 例:<br/> var m = new floatAdver(); <br />m.createInfo("background:#FFF;height:200px;width:100px;border:1px solid #CCC;","background:#DDD;height:200px;width:100px;border:1px solid #CCC;","浮动预览左边浮动层的内容","浮动预览右边浮动层的内容",200);<br />m.createAdv(); </span> <br/> 3.方法说明：createInfo()方法是用来初始化浮动层的信息，createAdv()方法是使得两个浮动层开始浮动.如果只调用createAdv()函数，浮动层的样式为默认(position:absolute;top:0px;left:10px;width:100px;height:200px;border:1px solid #666;overflow:hidden;) </div> </div><div class="authorInfo"> <div class="cont"> 十三妖 ThirdteenDevil <br/> [qq:181907667] [msn:wl181907667hotmail.com] [e-mail:thirdteendevil163.com] </div></div></body></html></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]