如何给网站添加悬浮广告图片
素材下载 2016-02-29 3233 0 评论 admin

wordpress主题制作过程中有些站长喜欢在网站的左右两侧添加一些悬浮的图片来做广告宣传,或添加一些二维码之类的图片。下面分享一个简单的悬浮图片的添加方法给大家。
1、首先给大家看一下效果图:
如何给网站添加悬浮广告图片
2、我们现在开始进行网站悬浮图片的添加,添加之前先准备一张需要显示在网站左侧或右侧的图片,高度推荐为120px*240px,图片命名为:xianfutu.png
3、把下面这个关闭按钮的图片以xianfutu.gif命名保存下来,连同之前准备好的悬浮图片一起上传到主题目录的images文件夹里。

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

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

1
2
3
4
5
/*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%; }

注:如果想把图片放在右边的话,把left:10px中的left改成right即可。top:40%中的60是指这张图片距离网站顶部的高度。
5、复制下面代码,粘贴到主题目录中footer.php的body结束标签之前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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标签结束之前添加如下代码:

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

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

继续浏览有关: , 的文章
版权声明:版权归 wp仿站之家 所有,转载请注明出处!
转载请保留链接: http://www.linw.net/417.html
联系wp仿站之家:5946394#qq.com (#改为@)
wp仿站微信公众号:linw_net
官网淘宝店:http://shop111710277.taobao.com/
wp仿站之家
手机扫一扫
进淘宝店铺选购主题

用心做最好的主题网站wp仿站之家

wp仿站之家是一个专业的wordpress仿站业务网站,提供wordpress主题模板下载以及seo网站优化服务,诚信经营,用心服务每一个客户,让您放心享受我们的优质服务。同时,也欢迎各位建站爱好者加入我们交流建站经验心得。

上一篇: 下一篇:

发表评论

服务咨询