你的位置:首页 > 网页设计

[网页设计]2016520最炫表白技能,你值得拥有!


程序yuan们,今天是个特别的日子。各式花哨的表白都遍大街都是了。咱们来点新鲜的。

废话不多说,上图。

  • Step 1 

 

  • Step 2

 

  • Step 3

 

简单三步,你GET了吗? 如果你还没有向TA表白,不要犹豫,行动起来。再晚你的男神女神就是别人的了。

 

只为给码农们带来点快乐:)

 

 

实现这个功能其实很简单。这块我分三部分来写.

 

先说服务器层面上的

每个网站都会有搜索的需求。搜到用户想要的东西这是非常必须的,可不能再重蹈百度的覆辙了。

这些不重要。重要的是如果搜索不到结果呢?大部分的网站会甩一个404页面出来,这块就是我们用来做文章的地方。这个包袱推荐其他网站也可以试试,贴近用户,给用户意想不到的东西才有可能获得用户的心。

 

程序甩出404后,我们用服务器捕获这些异常,可以根据具体参数进行分类。然后统一扔给报错页处理,

 

 

这样服务器的工作就完成。

 

下面说一下程序的工作

 

程序上接收到用户的搜索请求,开始去后端模块中提取数据。提取实现的方式有好多种,相信各个企业都有自己的一套东西来做,这块就不细讲了。

程序接收请求,未查询到结果,然后开始抛出异常,一般生产环境的报错都是关闭了的。所以我们只获取请求参数,其他的东西全部不展示了。

把参数传给前端模板。

 

最后说一下前端的工作。

前端的效果主要是用到两个东西 animate 和 jquery.lettering.js,jquery.textillate.js

代码如下

 

<script>(function() {  $('#TA strong').addClass('animated tada');    $('.text11').textillate({    initialDelay: 1000,       in: {       effect: 'fadeInDownBig',      delay: 120,    }  });  $('.text12').textillate({    initialDelay: 11000,       in: {       effect: 'flipInX',      delay: 80,    }  });  var msg_porm = ['&nbsp;&nbsp;&nbsp;&nbsp;','我画了一幅画','画上的风景好美丽','有我 有你','画慢慢褪色','却不只是时间的错','我想还你一张洁白的纸','擦却擦不掉','用过力的痕迹','因为纸上的定位格','将我们永远留在那一刻','&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--[文]夏知寒']  var start=16000;  for(i=0;i<msg_porm.length;i++){    var c = 'text'+i;    var h = '<p >'+msg_porm[i]+'<p>';    $(h).insertBefore($('#mgs_list'));    $('.'+c).textillate({      initialDelay: start+i*3000,         in: {         effect: 'flipInX',        delay: 100,      }    });  }}())</script>

 

 

 

开始的名字抖动效果,通过css实现

页面加载完成后,对html代码添加 animated tada 样式,效果就直接出来了。很方便。

 

后面段落的文字效果,通过调用 textillate 方法来实现。

各个参数的含义
initialDelay: 页面加载完成后多久开始执行动画效果(单位:毫秒)
effect:动画 (更多动画请参考git上的说明,上面给出链接了)
delay: 每个字符之间展示的时间间隔

大致需要说的就这些,如果还有哪位不明白的地方,可以给我留言。:)