如何实现广告悬停展示方式？一行代码实现了侧边栏悬停效果的广告

经常去浏览某些网站的时候，总是看到别人网站的侧栏或者广告跟随滚动条下拉而跟随向下浮动，上拉也跟随浮动到原位置，非常羡慕！不仅好看，美观，而且能提高浏览量。

今天免费软件之家将为各位互联网站长分享两种代码实现侧边栏悬停效果广告的方法！

方法一：

1.将以下代码插入网站head/head部分，修改红色部分:#adsbox为自己的侧栏或者广告DIV标签ID即可！

scripttype=text/javascript

var documentHeight = 0;

var topPadding = 15;

$(function() { var offset = $(#adsbox).offset(); documentHeight = $(document).height();

$(window).scroll(function() { var sideBarHeight = $(#adsbox).height();

if ($(window).scrollTop()offset.top)

{ var newPosition = ($(window).scrollTop() - offset.top) + topPadding; var maxPosition = documentHeight -

(sideBarHeight + 368); if (newPositionmaxPosition) { newPosition = maxPosition; }

$(#adsbox).stop().animate({ marginTop: newPosition }); }

else { $(#adsbox).stop().animate({ marginTop: 0 }); }; }); }); /script

2.请根据自己的需要修改，效果请看本站侧栏部分广告跟随滚动条上下浮动效果！

方法二：

话说上面方法一的代码也着实太多了吧，对于网页速度影响很大，其实要实现广告悬停展示方式用简单的代码也可以实现，就是在广告代码中加入一段代码即可实现。其实这种效果早在很多年前就有人实现过，不过考虑到百度等联盟厂商对于擅自修改广告代码的惩罚力度相当大，轻则取 消收入，重则直接封号。所以大多站长都按照官方的要求投放，不敢擅自作修改。不过这次是得到官方认可的，可以放心使用。具体如下：

假如你的某个广告代码位的原始代码为：

scripttype=text/javascript

/* xxx*xxx，创建于20xx-x-xx */

varcpro_id = uxxxxxx;

/script

script src=http://cpro.baidustatic.com/cpro/ui/c.js type=text/javascript/script

那么你只需要在其中插入如下代码：

(window[cproStyleApi]

= window[cproStyleApi] || {})[cpro_id] = {

xuanting: 1 };

插入之后原始代码就变成了如下内容：

scripttype=text/javascript

/* xxx*xxx，创建于20xx-x-xx */

varcpro_id = uxxxxxx;

(window[cproStyleApi] = window[cproStyleApi] || {})[cpro_id] = {

xuanting: 1

};

/script

script src=http://cpro.baidustatic.com/cpro/ui/c.js type=text/javascript/script

然后你把修改后的广告代码添加到网页的合适位置就可以了，效果可以预览一下本博客侧边栏的百度悬停广告。

推荐阅读：5种方法固定侧栏内容和广告位，实现侧边栏广告位悬停效果