程序yuan们,今天是个特别的日子。各式花哨的表白都遍大街都是了。咱们来点新鲜的。
废话不多说,上图。
简单三步,你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 = [' ','我画了一幅画','画上的风景好美丽','有我 有你','画慢慢褪色','却不只是时间的错','我想还你一张洁白的纸','擦却擦不掉','用过力的痕迹','因为纸上的定位格','将我们永远留在那一刻',' --[文]夏知寒'] 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: 每个字符之间展示的时间间隔
大致需要说的就这些,如果还有哪位不明白的地方,可以给我留言。:)
原标题:2016520最炫表白技能,你值得拥有!
关键词: