艺灵设计

全部文章
×

jquery网页特效之伸缩式页面底部悬浮抢红包源码分享

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-06-02 21:58:31 - 阅: - 评:0 - 积分:0

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

一、起因

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

二、demo欣赏

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

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

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

如何分析原理呢?我都不会代码,还让我分析,分析个毛线!......

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

三、原理分析

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

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

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

四、交互行为分析

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

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

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