问答 百科手机端

通过代码实现广告悬停展示的方法

2015-03-16 10:14

经常去浏览某些网站的时候,总是看到别人网站的侧栏或者广告跟随滚动条下拉而跟随向下浮动,上拉也跟随浮动到原位置,非常羡慕!不仅好看,美观,而且能提高浏览量,今天就为各位互联网站长朋友分享两种代码实现侧边栏悬停效果广告的方法!

方法一:

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

<script type="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 (newPosition > maxPosition) { newPosition = maxPosition; }

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

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

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

方法二:

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

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

<script type="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 };

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

<script type="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>

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

方法三:

此方法只适用于自定义图片广告,在网页右侧加悬浮代码,其实非常简单  

①、在广告的管理模块里新增加一个广告

②、广告代码在下面: 

<div><a href=" (广告地址处)"><img src="/templets/tupian/漂浮.jpg(图片地址处)" border="0"></a></div>

<script> 
var x = 50,y = 60 
var xin = true, yin = true var step = 1 var delay = 10 
var obj=document.getElementByIdx_x_x("ad") function floatAD() { var L=T=0 
var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } 
var itl= setInterval("floatAD()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} </script>

③、把上面代码的广告网址替换成你的广告网址,把上面代码的src="/templets/tupian/漂浮.jpg (图片地址)代码换成你的图片地址就行了。

热门