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>


6、如果图片不能显示或关闭按钮不能把悬浮图关闭掉,请加载下面的js文件,把js文件下载下来,解压后上传到空间主题目录的js文件夹内,如果没有js文件夹就新建一个。
如何给网站添加悬浮广告图片

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

欢迎留言