悬浮广告方法日常收集整理
1左侧或者右侧的悬浮广告。
css样式：
*{padding:0;margin:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.clearfix{*zoom:1;}
.clearfix:after{display:block;content:"";height:0;line-height:0;visibility:hidden;clear:both;}
/*tab切换*/
.tab_title{line-height:30px;border-bottom:1pxsolid#ccc;width:360px;margin:0auto;}
.tab_titlea{display:inline-block;font-size:16px;color:#333;text-decoration:none;margin-right:20px;}
.tab_titlea.active{color:red;}
.tab_content{width:340px;padding:5px10px;margin:0auto;border:1pxsolid#ccc;height:120px;}
/*文字滚动*/
.moveScroll{width:360px;height:120px;border:1pxsolid#ccc;margin:50pxauto;}
.moveparent{width:330px;height:90px;overflow:hidden;margin:15pxauto;}
.moveScroll.content{color:#333;}
/*文本输入框*/
.inputText{width:320px;padding:10px;line-height:22px;margin:10pxauto;display:block;color:#999;}
/*幻灯片*/
.wrapper{
width:324px;
height:325px;
_height:321px;
position:relative;
z-index:1;
margin:20PXauto;
}
.wrapper.main{
width:324px;
height:222px;
overflow:hidden;
}
.wrapperli{
float:left;
display:inline;
}
.wrapperulimg{
width:324px;
height:222px;
position:relative;
z-index:1;
}
.wrapperulspan{
position:absolute;
display:block;
text-align:center;
width:324px;
height:20px;
overflow:hidden;
bottom:10px;
left:0;
}
.wrapperol{
margin-right:-4px;
height:58px;
*zoom:1;
}
.wrapperol:after{
display:block;
content:"";
line-height:0;
height:0;
visibility:hidden;
clear:both;
}
.wrapperolimg{
width:78px;
height:52px;
margin:6px4px00;
}
.wrapperolli{
opacity:0.5;
filter:alpha(opacity=50);
cursor:pointer;
}
.wrapperol.active{
opacity:1;
filter:alpha(opacity=100);
}
html代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>简jQuery左右对称浮动广告代码</title>
<linkrel="stylesheet"href="css/style.css"/>
</head>
<body>
<divstyle="height:2000px;"></div>
<!--代码部分begin-->
<divid="floatright"style="position:absolute;z-index:10;"></div>
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/floatAd.js"></script>
<script>
window.onload=function(){
varad2=newFloatAd({
nodeLink:"<ahref='广告连接地址'><imgsrc='广告图片'border=0/></a>",
floatObj:"floatleft",
x:10,
y:400,
locate:"left"
});
ad2.play();
}
</script>
<!--代码部分end-->
</body>
</html>
js文件除引入jquery外(要问我jquery是什么，请出门左转)还需要：
varFloatAd=function(obj){
varmainNode=$("."+obj.main)[0];
if(obj.nodeLink&&(typeofobj.nodeLink=="string")){
varnewFloatObj=document.createElement("div");
newFloatObj.id=obj.floatObj;
newFloatObj.style.position="absolute";
newFloatObj.style.zIndex=10;
newFloatObj.innerHTML=obj.nodeLink;
document.body.appendChild(newFloatObj);
}
this.ad=document.getElementById(obj.floatObj);
this.main=document.getElementById(obj.main)||mainNode;
this.x=obj.x;
this.y=obj.y;
this.locate=obj.locate;
this.space=obj.space;
varthat=this;
this.play=function(){
setInterval(function(){
that.calculate();
},10);
};
}
FloatAd.prototype={
constructor:FloatAd,
calculate:function(){
varobj_x=this.x,
obj_y=this.y,
main_offsetLeft=document.documentElement.scrollLeft||document.body.scrollLeft,
main_offsetTop=document.documentElement.scrollTop||document.body.scrollTop;
if(this.main){
if(this.locate=="left"){
obj_x=this.main.offsetLeft-this.ad.offsetWidth-this.space;
}elseif(this.locate=="right"){
obj_x=this.main.offsetLeft+this.main.offsetWidth+this.space;
}
if(this.ad.offsetLeft!=main_offsetLeft+obj_x){
vardx=(main_offsetLeft+obj_x-this.ad.offsetLeft)*0.08;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
this.ad.style.left=this.ad.offsetLeft+dx+"px";
}
}else{
if(this.locate=="left"){
this.ad.style.left=obj_x+"px";
}elseif(this.locate=="right"){
this.ad.style.right=obj_x+"px";
}
}
if(this.ad.offsetTop!=main_offsetTop+obj_y){
vardy=(main_offsetTop+obj_y-this.ad.offsetTop)*0.08;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
this.ad.style.top=this.ad.offsetTop+dy+"px";
}
}
}
这是自己在用到这种效果的时候整理出来的，copy网上的案例，进行整理，方便大家使用。
2全屏漂浮案例：飘窗！
css文件：
#img1{
z-index:100;
left:2px;
width:59px;
position:absolute;
top:43px;
height:61px;
visibility:visible;
}
html文件
<html> <head> <title>漂浮广告</title> </head> <linkrel="stylesheet"href="floatImg.css"/> <body> <divid=img1> <ahref="广告链接地址"target="_blank"> <imgsrc="广告图片"> </a> </div> </body> <scriptsrc="链接js"></script> </html>
js代码：
varxPos=300;
varyPos=200;
varstep=1;
vardelay=30;
varheight=0;
varHoffset=0;
varWoffset=0;
varyon=0;
varxon=0;
varpause=true;
varinterval;
img1.style.top=yPos;
functionchangePos()
{
width=document.body.clientWidth;
height=document.body.clientHeight;
Hoffset=img1.offsetHeight;
Woffset=img1.offsetWidth;
img1.style.left=xPos+document.body.scrollLeft;
img1.style.top=yPos+document.body.scrollTop;
if(yon)
{yPos=yPos+step;}
else
{yPos=yPos-step;}
if(yPos<0)
{yon=1;yPos=0;}
if(yPos>=(height-Hoffset))
{yon=0;yPos=(height-Hoffset);}
if(xon)
{xPos=xPos+step;}
else
{xPos=xPos-step;}
if(xPos<0)
{xon=1;xPos=0;}
if(xPos>=(width-Woffset))
{xon=0;xPos=(width-Woffset);}
}
functionstart()
{
img1.visibility="visible";
interval=setInterval('changePos()',delay);
}
functionpause_resume()
{
if(pause)
{
clearInterval(interval);
pause=false;}
else
{
interval=setInterval('changePos()',delay);
pause=true;
}
}
start();
以上内容是小编给大家整理的有关悬浮广告方法，希望对大家有所帮助！