带关闭按钮的悬浮图片代码
建站知识 2014-12-04 5283 0 评论 admin

前面给大家讲过如何添加一个简单的悬浮图片,现在给大家分享一个带关闭按钮的悬浮图片代码。
带关闭按钮的悬浮图片代码
制作流程:

1、先准备一张精美的图片,例如目前最流行的微信二维码,另外把下面的关闭按钮图片保存下来,上传到主题目录的images文件夹里。

关闭按钮图片

2、把下面代码复制到CSS样式表里,把width:120px中的120改成你自己图片的宽度,把height:240px里的240改成你图片的高度,把url(“images/suspension.png)里的images/suspension.png换成你图片的相对地址。

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/kefu.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是指这张图片距离网站顶部的高度。
3、在网站的底部文件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/ad_close.gif" width="35" height="12" /></span></a></div>
    </div>
  </div>

4、如果关闭按钮不能把悬浮图关闭掉,请进行jquery加载,把下面的jquery文件下载下来,解压后上传到空间主题目录的js文件夹内,如果没有js文件夹就新建一个。然后在头部文件header.php的《/head》结束之前添加如下代码:
jquery加载

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

这个需要有点复杂,但也不是很难,只要按照流程做就可以实现带关闭按钮的悬浮图片的功能,注意的是关闭按钮必须保存下来上传到主题目录的images的文件夹内,如果修图片的宽度和高度有可能出现图片和关闭按钮重叠的现象,可以调一下关闭按钮top:22%中的数字高度。如果有不明白的可以点击右方的服务咨询进行QQ交流!

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

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

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

上一篇: 下一篇:

发表评论

服务咨询