欢迎来访571免费空间,希望可以对您有所帮助!

网站地图帮助中心

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

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/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>

至此,完成。
欢迎转载,转载请注明原文网址:http://www.571free.com/zhimeng/8035/

随机免费资源

Copyright © 2009-2016 571FREE. 571免费资源 版权所有 豫ICP备15002996号

Theme by 571FREE.COM! X3 致力于做有用的网站   

请勿发布违反中华人民共和国法律法规的言论.