实现网站或博客侧边栏广告跟随固定浮动效果的方法

网站页面随滚动条滚动的广告或者说网站或博客侧边栏广告跟随固定浮动效果的广告效果现在非常的热门,571免费空间此次改版后就看上这个功能了,目前已经实现,效果就是大家看本文右边栏最后两个广告。现在就放出实现这个功能的代码,有需要的站长拿去吧,适用于任何系统,简单易部署。

第一步:引入jquery.min.js,如果已经引入,则不必重复引入。在主题header文件中添加如下代码:

<script type="text/javascript" src="http://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

→ 点此获取正规游戏试玩赚钱软件~

大家可以下载将此JS文件下载后传到自己空间,地址改成自己的最好,比如本站的就是:

<script type="text/javascript" src="http://www.571free.com/js/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

第二步:在<body>标记前加入如下代码,推荐加在主题footer.php文件<body>标记前。

<script>
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};

//绑定
$("#float").smartFloat();
</script>   

第三步:打开主题侧边栏文件,织梦的话就是文章页模板问价,把你想要跟随浮动的层添加id=float属性,大家可以参考如下代码:

<div class="float"  id="float">
<h3>赞助商广告</h3>
广告代码
</div>

至此,完成。

游乐星球 点此下载

相关推荐

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。