关注互联网、IT技术!

在WordPress侧栏添加浮动定位广告

  •  admin
  •  2012-01-03 07:01:29
  •     
想在博客右侧栏下面添加一个广告,并且需要让广告随着窗口滚动,始终处于可见状态。使用js和css可以完美实现这样的效果。我为了方便,没有做成插件,而是直接在sidebar.php中添加了代码。 首先添加HTML代码
    <div id="ad_box" style=" position:relative;text-align:center;width:338px;">
	<div id="float_ad">
		这里是广告代码,div的宽度,大家根据需要,自行设定
        </div>
    </div>
然后添加js代码:在此之前,需要引用jquery
<script type="text/javascript">
(function($) {
	var $obj = $('#float_ad');
    var on_scroll = function() {
        var offset = $('#ad_box').offset();
        if (!offset) {
            return true
        }
        var _default = offset.top;
        if ($(window).scrollTop() > _default) {
            if ($.browser.msie && $.browser.version == '6.0') {
                $obj.css('position', 'absolute');
                $obj.css('top', $(window).scrollTop()-_default);
				$obj.css('right',0);
            } else {
                $obj.css('position', 'fixed');
                $obj.css('top', 10);
            }
        }else{
            $obj.css('position', 'static');
            $obj.css('top', _default)
        }
    };

   $(window).scroll(on_scroll);
})(jQuery);	
</script>
这段代码,完美支持各个版本浏览器,尤其对IE6做了特殊处理,效果还是很理想的。大家可以到下面的网址去看效果 http://www.sayitout.net/

相关文章

评论

称呼(可以不填)
Email(可以不填)
链接(可以不填)
请输入评论内容*