摘要：
　　今天下午给公司做了一个伸缩式的悬浮抢红包特效，艺灵觉得看官可能在以后会用到，所以便分享出来，不会代码的看官拷贝可直接使用......

一、起因

由于今天公司需要做一个伸缩式页面底部悬浮抢红包的特效，所以做完后艺灵便决定将特效源码分享出来。这个特效还是很普遍的，在上一家公司(杭州博大旅行)的时候，艺灵就做过这种特效，只是当时忘记分享了。咱们废话不多说，来看下效果吧！

二、demo欣赏

由于小窗宽度小于1200，所以此处展示的是一个精简版效果，点我看完整版特效。如果想看全屏效果,点此进入demo全屏观看

如果看官对此特效有兴趣，可跟着艺灵的教程走。文章结束时，看官即可学会此特效。

不管是写什么特效，在写特效前，我们都必须要做一件事情，也是非常重要的事情-- 原理分析！如果不知道原理，什么都是白搭！

如何分析原理呢？我都不会代码，还让我分析，分析个毛线！......

其实，不管会不会代码，案例总该能看到吧。点点案例，看看发生了什么变化，这个总应该能得出点什么吧。

三、原理分析

首先，页面加载后，这个抢红包默认是全屏展示的，当然，也可以控制成收缩后的。

其次，我们不想看到这个小广告了，点击下边的小白×即可关闭这个小广告。其实，正常情况下这个广告关闭后就不会显示了。但是！老板他们不乐意呀，我辛辛苦苦搞的活动，耗财耗时又耗力！怎么能说关就关呢？所以呢，我们关闭后会显示一个缩略版的小广告在左下角。

最后，当用户手贱或无意或再想看广告的时候，点击下左下角的小广告按钮，全屏悬浮广告又展示开了。如此往复，就有了伸缩式的效果。并且这种效果比单纯的关闭要显示更高档一些，看官觉得呢？

四、交互行为分析

在这整个交互过程中，我们的这个广告做了哪些事情呢？

如果我们将整个广告看成一个整体，那么这个广告一共有两种状态。分别是：伸展开(全屏展示)和收缩(在左下角留一个触发按钮)。初始阶段展示可通过我们的css样式来控制到底是展开呢还是收缩，这个取决于看官的想法及上级的意思。

广告分析完后，还得分析点击事件。也就是关闭按钮(小白×)和复原按钮(左下角缩略图)。当我们点击关闭按钮的时候，广告做的事情就是水平方向的位移，向左或向右。我们可以用left或margin-left来进行实现位移的变化。如果看官想与众不同，渐隐渐显、从底部上向展示、从顶部掉落等各种创意性的特效都是可以做的，前提是知道原理及会简单的jquery！点击完关闭按钮后，当广告运动到最左边并确定看不到的时候再让复原按钮显示，也就是左下角的缩略广告。当我们再次点击的时候，广告就伸展开啦！同样，此时也是改变left或margin-left。

其实，在这个案例中，还隐藏有一个不容易发现的东西。比如说：按常理来说，我们刷新页面一次，一个网页就会加载一次，那这个广告也会进行加载一次，所以会全屏一次。当我们点击关闭按钮后，不小心再刷新了这个页面或者是跳转到了别的页面，此时你会发现这个广告竟然又全屏了！！！是不是有点小流氓的感觉了？？？

但是，看官在艺灵提供的那个demo案例中却不会出现这个问题，为什么呢？？？

五、cookie的重要性

答案是：cookie缓存！

没错！我们在点击关闭按钮的时候，设置一个cookie时间，比如说：1天(24)小时。设置好后就完了吗？并没有！！！

为什么会没有呢？不要忘记了，我们设置的cookie是在点击后才执行的，但页面一加载时并没有点击，所以你懂的。

正确方法：页面加载时先判断我们设置的cookie的值是否存在，如果存在，说明是在有效期内，那么此时便不让这个广告全屏展示。当时间超过我们的有效期后，广告又可以全屏啦！

好了，说了这么多，总算是全部分析完了。在某些看官看来，艺灵是废话了几百字来讲一个简单的特效！某些看官根本就听不懂说的是什么！......怎么说呢？千人千面，艺灵的宗旨是：尽可能表述完整，让看官在制作过程中有一个清晰的思路及广告。下面直接进入我们的代码阶段。如果对上面的原理不能理解，请止步，待理解后再往下看。

六、准备工作

编辑器一个，jquery.cookie插件一个，jquery库一个，全屏抢红包图片一张，缩略图一红，优惠券背景图一张。

为了节省时间，这里不再讲如何进行切图、选择什么编辑器、以及如何下载jquery插件等简单的问题。如果需要此特效的相关素材，请前往文章末尾的demo中进行下载。

七、源码分享

7.1、html代码

<!--伸缩式页面底部悬浮抢红包框架开始-->
<div class="hongbao-fixed">
　<!--中间主体区-->
　<div class="hongbao-box">
　　<!--左边的“立即领取”按钮-->
　　<a href="" target="_blank" class="hongbao-b-quan hongbao-b-quan0 last"></a>
　　<!--每个单独的优惠券，如需多个，请复制a-->
　　<a href="" target="_blank" class="hongbao-b-quan">
　　　<b class="hd">200</b>
　　　<span class="bd">
　　　　<span class="bd-quan">优惠券</span>
　　　　<span class="bd-rmb">RMB<span>满500使用</span></span>
　　　</span>
　　　<p class="hongbao-b-time">使用时间：2016.06.01~2016.06.30</p>
　　</a>
　　<a href="" target="_blank" class="hongbao-b-quan">
　　　<b class="hd">200</b>
　　　<span class="bd">
　　　　<span class="bd-quan">优惠券</span>
　　　　<span class="bd-rmb">RMB<span>满500使用</span></span>
　　　</span>
　　　<p class="hongbao-b-time">使用时间：2016.06.01~2016.06.30</p>
　　</a>
　　<a href="" target="_blank" class="hongbao-b-quan">
　　　<b class="hd">200</b>
　　　<span class="bd">
　　　　<span class="bd-quan">优惠券</span>
　　　　<span class="bd-rmb">RMB<span>满500使用</span></span>
　　　</span>
　　　<p class="hongbao-b-time">使用时间：2016.06.01~2016.06.30</p>
　　</a>
　　<a href="" target="_blank" class="hongbao-b-quan">
　　　<b class="hd">200</b>
　　　<span class="bd">
　　　　<span class="bd-quan">优惠券</span>
　　　　<span class="bd-rmb">RMB<span>满500使用</span></span>
　　　</span>
　　　<p class="hongbao-b-time">使用时间：2016.06.01~2016.06.30</p>
　　</a>
　</div>
　<!--关闭按钮-->
　<div id="hongbao-del" title="关闭">×</div>
　<!--展开按钮-->
　<div id="hongbao-btn"></div>
</div>
<!--伸缩式页面底部悬浮抢红包框架结束-->

7.2、css样式

/*页面简单重构，如果看官页面中已有，请不要复制这几行*/
*{margin:0;padding:0}
/*重构结束*/
/*红包相关*/
.hongbao-fixed{width:100%;height:183px;position:fixed;bottom:0;left:0;z-index:100000;background:url(/d/file/jquery/2016-06-02/fixed-bottom.png) no-repeat 50% 0;font-family:\5FAE\8F6F\96C5\9ED1}
.hongbao-box{width:1200px;height:120px;margin:60px auto 0;font-size:14px;overflow:hidden}
.hongbao-b-quan{width:230px;height:93px;background:url(/d/file/jquery/2016-06-02/yhq_bg_01.png) no-repeat 0 -232px;display:block;float:left;color:#fff !important;margin-right:15px;position:relative;text-decoration:none}/li>
.hongbao-b-quan0{background:none;height:100%}
.hongbao-box .hd{font-size:55px;width:140px;position:absolute;line-height:85px;text-align:center}
.hongbao-box .bd{width:80px;height:70px;position:absolute;right:15px;top:10px}/li>
.bd-quan{display:block;text-align:right}/li>
.bd-rmb{line-height:1em}
.bd-rmb span{display:block}/li>
.hongbao-b-time{position:absolute;bottom:10px;width:100%;text-align:center;font-size:12px}
#hongbao-del{position:absolute;top:15px;right:-15px;font:24px SimSun;color:#fff;width:60px;height:60px;line-height:60px;text-align:center;font-weight:bolder;-webkit-transition:.6s;transition:.6s;cursor:pointer}
#hongbao-del:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
#hongbao-del:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
#hongbao-btn{background:url(/d/file/jquery/2016-06-02/qianghongbao.png) no-repeat 50% 0;width:132px;height:113px;display:none;right:-132px;bottom:0;position:absolute;cursor:pointer}
.on #hongbao-btn{display:block}
.last{margin-right:0 !important;}

基本形状已经出来了，配图一张：但是点击并没有效果，接下来的事情交给jquery吧！

7.3、引入jquery库

<!--引入jquery库，建议1.8版本以上，如果页面中已引入，可忽略此库-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入cookie插件-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery.cookie.js"></script>

下面的jquery代码将是整个交互的重点！

7.4、交互的jquery代码

<script>
/*伸缩式页面底部悬浮抢红包*/
var hb=$('.hongbao-fixed');/*方便后面调用*/
var hb_del=$('#hongbao-del');
var hb_btn=$('#hongbao-btn');
try{
　/*此处判断点击时设置的cookie值是否失效*/
　if($.cookie("hongbao")!=1){
　　/*如果失效，就展开全屏悬浮广告，时间为500毫秒，并移除激活样式*/
　　hb.animate({'left':'0'},500).removeClass('on');
　}else{
　　/*如果没有失效，即在有效期内，添加激活样式(控制缩略图状态)*/
　　hb.addClass('on');
　}
}catch(e){}
/*点击关闭按钮时执行*/
hb_del.mousedown(function(){
　try{
　　/*点击关闭按钮的那一刻，开始设置我们的全站cookie，并保存时间为1天(24小时)*/
　　$.cookie("hongbao",1,{path:'/',expires:1});
　}catch(e){}
　/*全屏的广告开始向左运动，直到看不到为止，时间为500毫秒*/
　hb.animate({'left':'-100%'},500,function(){
　　/*当运动结束后，立即显示我们展开按钮（缩略广告）*/
　　hb_btn.show();
　});
});
/*点击展开按钮时执行*/
hb_btn.mousedown(function(){
　/*先隐藏自己，避免被人看到啦~*/
　$(this).hide();
　/*全屏广告开始向右运动至全屏显示，时间为500毫秒*/
　hb.animate({'left':'0'},500);
});
</script>

好了，大功告成！点此进入demo全屏观看

八、思维扩展

此特效除了可以做领取优惠券、抢红包功能个，还可以做搜索用途！反正框架不变，变换下里的内容就是了，看官有学会吗？

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-06-02/408.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。