我经常访问一些网站的时候，总是看到别人网站的侧边栏或者广告随着滚动条向下浮动，随着滚动条向上浮动到原来的位置。我很羡慕！不仅好看，还能增加浏览量。今天给各位互联网站长朋友分享两种实现侧边栏悬停效果广告的方法！
方法一:
1。将以下代码插入网站< head gt…… lt；/head gt；部分，修改红色部分:#adsbox作为自己的侧边栏或者广告DIV标签ID！
lt；script type = " text/JavaScript " gt；
var document height = 0；
var topPadding = 15；
$(function(){ var offset = $(" # adsbox ")。offset()；documentHeight = $(文档)。height()；
$(窗口)。scroll(function(){ var sidebar height = $(" # adsbox ")。height()；
if ($(窗口)。scroll top() gt；offset.top)
{ var newPosition = ($(window)。scroll top()-offset . top)+topPadding；var max position = document height-
(sidebar height+368)；if(new position gt；max position){ new position = max position；}
$("#adsbox ")。停止()。animate({ margin top:new position })；}
else { $("#adsbox ")。停止()。动画({ margin top:0 })；};});}); lt/script gt；
2。请根据自己的需求进行修改。效果请看本站侧边栏的广告跟随滚动条上下移动！
方法二:
此方法仅适用于百度联盟广告。据说上面方法1的代码太多，对网页的速度影响很大。其实要实现广告悬停显示模式，也可以通过简单的代码来实现，就是在广告代码上加一段代码。其实这个效果很多年前就意识到了。但考虑到百度等联盟厂商对未经授权修改广告代码的处罚力度相当大，可以取消收入，直接封号。所以大部分站长都是按照官方要求放的，不敢擅自改动。不过这次是官方认可的，可以放心使用。如下:
假设你的一个广告码位的原码是:
lt；script type = " text/JavaScript " gt；
/* xxx*xxx，创建于20xx-x-xx */
varc pro _ id = " UX xxxxx "；
lt；/script gt；
lt；script src = http://cpro . baidustatic . com/cpro/ui/c . js " type = " text/JavaScript " gt； lt/script gt；
然后你只需要把下面的代码插入其中:
(窗口["cproStyleApi"]
= window[" cproStyleApi "]| | { })[cpro _ id]= {
轩婷:1 }；
插入后，原始代码变成如下:
lt；script type = " text/JavaScript " gt；
/* xxx*xxx，创建于20xx-x-xx */
varc pro _ id = " UX xxxxx "；
(window[" cproStyleApi "]= window[" cproStyleApi "]| | { })[cpro _ id]= {
轩婷:1
}；
lt；/script gt；
lt；script src = http://cpro . baidustatic . com/cpro/ui/c . js " type = " text/JavaScript " gt； lt/script gt；
然后，您只需将修改后的广告代码添加到网页的适当位置即可。对于效果，你可以在这个博客的侧边栏预览百度悬停广告。
方法三:
此方法仅适用于自定义图片广告。在网页右侧加一个浮动代码其实很简单
①。在广告管理模块中添加新的广告 。
②，广告代码如下:
lt;divgt;lt;a href=" （广告地址处）"gt;lt;img src="/templets/tupian/漂浮.jpg（图片地址处）" border="0"gt;lt;/agt;lt;/divgt; lt；div gt ltA href= "(在广告地址)" >: ltimg = "/templates/tu pian/floating . jpg(在图像地址)" border = " 0 " >； lt/a gt； lt/div gt；
lt；脚本 gt
var x = 50，y = 60
var xin = true，yin = true var step = 1 var delay = 10
var obj = document . getelementbyidx _ x _ x(" ad ")function floated(){ var L = T = 0
var R = document . body . client width-obj . offset width var B = document . body . client height-obj . offset heightstyle . top = y+document . body . scroll top x = x+step *(Xin？1:-1)
if(x lt；l){ Xin = true；x = L } if(x gt；r){ Xin = false；x = R} y = y +步*(阴？1:-1)
if(y lt；t){ yin = true；y = T } if(y gt；b){ yin = false；y = B } }
var ITL = setInterval(" float d()"，delay)
obj . onmouseover = function(){ clear interval(ITL)}
obj . onmouseout = function(){ ITL = setInterval(" float d()"，delay)} lt；/script gt；
③。把上面代码的广告网址替换成你的广告网址，把上面代码的src = "/templates/tu pian/floating . jpg(图片地址)代码替换成你的图片地址即可。
