⊕注册本站　⊕ 论坛　⊕ 繁體中文

MP3

MP4

显卡

您现在的位置：电脑技巧 >> 网页设计 >> Javascript >> 网页设计正文

js对联广告封装类代码

文章来源：中国IT实验室收集整理作者：佚名更新时间：2008-8-23 15:39:12 【大小】【加入收藏】

进入网络咨询平台

以下是HTML网页特效代码，点击运行按钮可查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>滑动门通用JS</title>

<!--

body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}

.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}

.t_rt{text-align:right;}

h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}

ul,li{margin:0px;padding:0px;}

li{list-style-type:none;}

h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}

.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}

.cont{padding:10px;}

.cls{clear:both;}

.hidden{display:none;}

#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}

.textDiv{margin:10px 40px 10px;text-align:center;}

h2{margin:0px 10px;background:#ccc;padding:5px;}

.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}

.authorInfo{width:760px; margin:10px auto 10px;text-align:center;}

.c_666{color:#666;}

.scrolldoorFrame{width:400px;margin:0px auto;overflow:hidden;}

.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}

.scrollUl li{float:left;}

.bor03{border:1px solid #ccc;border-top-width:0px;}

.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}

.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}

-->

</style>

十三妖

qq:181907667

msn:wl181907667@hotmail.com

邮箱:thirdteendevil@163.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);

}

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 style='color:red;background:#CCC;'>浮动预览，左边浮动层内容</div>","浮动预览，右边浮动层的内容",200);

m2.createAdv();

}

</script>

</head>

<body>

浮动对联广告封装类

</h1>

<h2>

效果预览

</h2>

见屏幕两边浮动的广告

</div>

<h2>

源代码

</h2>

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>

1.把以上代码引进你的页面 <script type="text/javascript" src="scrollDoor.js"></script><br/>

2.在页面的"</body>"标签前加入以下代码:<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/>

例:<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>

十三妖 ThirdteenDevil <br/>

[qq:181907667] [msn:wl181907667@hotmail.com] [e-mail:thirdteendevil@163.com]

</div>

</body>

</html>

<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

上一篇网页设计： JS实现屏蔽鼠标右键的方法

下一篇网页设计：如何用JSP读写Cookie