七月网

漂浮广告代码(漂浮广告代码JS方式用div)

七月网3880

一、ASP 如何加入一个漂浮广告

1、是在首页中加一个JS代码就可以了!

漂浮广告代码(漂浮广告代码JS方式用div)

2、写一个层,定义其Position为absolute;并定义其长宽,然后,写一段让DIV移动位置的函数就可以了!

3、一般是用setInterval去查看是否滚动条有滚动。如果有则让该层的left与top设置一个相应的层就可以了!如果是随机浮动时可以有一个函数让其随机产生数值,而后用这个数据去更改其LEFT与TOP就可以了!

4、至于你想让里面有什么东西,只要你写在DIV中就可以了,它们都是随DIV的浮动而活动。

5、二楼的代码不知道从那儿抄的,它是一个随机浮动的图片,鼠标放在去就会静止,拿开就随机浮动。有助于你的理解。但前边的ASP语句是多余的也放过来了!

二、求段网页右下角漂浮的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">

<title>不会被屏蔽的网页右下角漂浮窗口代码</title>

<FCK:meta http-equiv="content-type" content="text/html;charset=gb2312"/>

#msg_win{border:1px solid#A67901;background:#EAEAEA;width:300px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;}

#msg_win.icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}

.icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}

#msg_title{background:#FECD00;border-bottom:1px solid#A67901;border-top:1px solid#FFF;border-left:1px solid#FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}

#msg_content{margin:0px;width:300px;height:300px;overflow:hidden;}

<p style="height:1000px;"></p>

<div id="msg_win" style="display:block;top:490px;visibility:visible;opacity:1;">

<div class="icos"><a id="msg_min" title="最小化" href="javascript:void 0"_fcksavedurl="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0"_fcksavedurl="javascript:void 0">×</a></div>

<div id="msg_title">标题</div>

<img src="http://www.chinesesavvy.com/export/sites/default/images/stories/images/Subject/2007newyear/chunjie_texttu03.gif" width="300" height="300" border="0"/>

<script language="javascript">

set: function(){//最小化与恢复状态切换

var set=this.minbtn.status== 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];

this.win.style.borderBottomWidth=set[1];

this.content.style.display=set[2];

this.win.style.top= this.getY().top;

this.win.style.display='none';

setOpacity: function(x){//设置透明度

var v= x>= 100?'':'Alpha(opacity='+ x+')';

this.win.style.visibility= x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug

this.win.style.opacity= x/ 100;

var me= this,fx= this.fx(0, 100, 0.1),t= 0;

this.timer2= setInterval(function(){

if(t[1]== 0){clearInterval(me.timer2)}

fx: function(a, b, c){//缓冲计算

var cMath= Math[(a- b)> 0?"floor":"ceil"],c= c|| 0.1;

return function(){return [a+= cMath((b- a)* c), a- b]}

getY: function(){//计算移动坐标

var d= document,b= document.body, e= document.documentElement;

var s= Math.max(b.scrollTop, e.scrollTop);

var h=/BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;

var h2= this.win.offsetHeight;

return{foot: s+ h+ h2+ 2+'px',top: s+ h- h2- 2+'px'}

moveTo: function(y){//移动动画

var me= this,a= parseInt(this.win.style.top)||0;

var fx= this.fx(a, parseInt(y));

this.timer= setInterval(function(){

me.win.style.top= t[0]+'px';

bind:function(){//绑定窗口滚动条与大小变化事件

me.win.style.top= me.getY().top;

rt= setTimeout(function(){me.win.style.top= me.getY().top},100);

function$(id){return document.getElementById(id)};

this.win=$('msg_win');

var set={minbtn:'msg_min',closebtn:'msg_close',title:'msg_title',content:'msg_content'};

for(var Id in set){this[Id]=$(set[Id])};

this.minbtn.onclick= function(){me.set();this.blur()};

this.closebtn.onclick= function(){me.close()};

this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体

this.minbtn.innerHTML=this.char[0];

this.closebtn.innerHTML=this.char[2];

setTimeout(function(){//初始化最先位置

me.win.style.display='block';

me.win.style.top= me.getY().foot;

三、HTML网页中两侧漂浮小窗口代码

修改了!你应该是希望滚动条不管在什么位置这个层都是可见的对吧?最原始的那个可以滚动不可见区域。晚上我又改了一下对xxx_div做了一下修改。看看能否满足

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn</title>

<p class="intro_p"><body style="margin:0;padding:0;">

<div id="xxx_div" style=" left: expression(0); border:0px#ccc solid; WIDTH: 100%; POSITION: absolute;; TOP: expression(body.scrollTop); HEIGHT: 100%; left: 0px; top: 0px;"></div>

<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;

visibility: visible;"><a href="" target="_blank"><img src="" width="250" height="60" border="0"></a></DIV>

var objd= document.getElementById("xxx_div");

//width= document.body.clientWidth;

//height= document.body.clientHeight;

img1.style.left= xPos+ objd.offsetLeft;

img1.style.top= yPos+ objd.offsetTop;

if(yPos>=(height- Hoffset))

if(xPos>=(width- Woffset))

interval= setInterval('changePos()', delay);

interval= setInterval('changePos()',delay);

<p>js物理弹性漂浮广告</p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdsad

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdasd

下面这个是在指定定的小窗口内飘动,我改了一下测试可以运行:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn</title>

<p class="intro_p"><body>

<div id="xxx_div" style="top:20px; left:50px; width:600px; height:500px; border:2px#ccc solid;"></div>

<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;

visibility: visible;"><a href="" target="_blank"><img src="" width="250" height="60" border="0"></a></DIV>

var objd= document.getElementById("xxx_div");

//width= document.body.clientWidth;

//height= document.body.clientHeight;

img1.style.left= xPos+ objd.offsetLeft;

img1.style.top= yPos+ objd.offsetTop;

if(yPos>=(height- Hoffset))

if(xPos>=(width- Woffset))

interval= setInterval('changePos()', delay);

interval= setInterval('changePos()',delay);

<p>js物理弹性漂浮广告</p>

OK,本文到此结束,希望对大家有所帮助。