如何给网站添加悬浮广告图片

在wordpress主题  制作过程中有些站长喜欢在网站的左右两侧添加一些悬浮的图片来做广告宣传，或添加一些二维码之类的图片。下面分享一个简单的悬浮图片的添加方法给大家。
1、首先给大家看一下效果图：

2、我们现在开始进行网站悬浮图片的添加，添加之前先准备一张需要显示在网站左侧或右侧的图片，高度推荐为120px*240px，图片命名为：xianfutu.png
3、把下面这个关闭按钮的图片以xianfutu.gif命名保存下来，连同之前准备好的悬浮图片一起上传到主题目录的images文件夹里。

4、复制下面这段css样式代码到主题目录下的style.css文件里，

/*announcement_box*/
.announcement_box { padding-top:100px;position:fixed;right:10px;top:60%;}
#announcement { height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left; }
.announcement_remove { width:120px;height:240px;background:url("images/xianfutu.png") no-repeat;padding-top:100px;position:fixed;left:10px;top:40%; }
#announcement_close {  padding-top:100px;position:fixed;left:14px;top:22%; }

5、复制下面代码，粘贴到主题目录中footer.php的body结束标签之前。

<div class="announcement_box">
    <script type="text/javascript">
      function AutoScroll(obj){
        $(obj).find("ul:first").animate({
            marginTop:"-25px"
        },500,function(){
            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
            });
    }
    $(document).ready(function(){
        setInterval('AutoScroll("#announcement")',4000)
    });
      </script>
    <div id="announcement_box">
      <div class="announcement_remove"><a title="关闭" href="javascript:void(0)" onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close"><img src="<?php bloginfo('template_directory'); ?>/images/xianfutu.gif" width="35" height="12" /></span></a></div>
    </div>
  </div>

7、在头部文件header.php的head标签结束之前添加如下代码：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/xianfutu.js"></script>

注意：关闭按钮图片必须以xianfutu.gif为文件名保存下来上传到主题目录的images的文件夹内，如果修图片的宽度和高度有可能出现图片和关闭按钮重叠的现象，可以调一下关闭按钮top:22%中的数字高度。

原文地址:

http://www.linw.net/417.html