520要来了&＃xff0c;为回馈朋友们所有专栏8折优惠&＃xff0c;感兴趣的朋友可以订阅&＃xff0c;感谢大家的支持&＃xff01;

520马上就要到&＃xff0c;作为程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML5&＃43;CSS3&＃43;jQuery实现的情侣浪漫表白JS特效&＃xff0c;视觉效果还是相当不错&＃xff01;得此表白神器&＃xff0c;程序猿也可以很浪漫&＃xff01;快去追你的女神吧&＃xff0c;把这个告白爱心动画发给你心爱的她&＃xff01;

​实现的功能

这个特效主要实现了这几个功能&＃xff0c;功能一基于jQuery实现的文字打印动态效果&＃xff0c;文字的颜色个样式通过定义不同的CSS样式来控制的。功能二动态生成随机的花瓣并拼成一个爱心图案&＃xff0c;通过prototype属性向对象添加属性和方法。功能三爱心中的文字淡入显示&＃xff0c;这个主要是利用了fadeIn方法来实现。最后一个功能就是当点击接受时开始计时功能&＃xff0c;通过new Date()获取当前时间再把时间差转换为天数、小时数、分钟数和秒数显示即可。

​文字打印动态效果

这里的d.html(c.substring(0,b)&＃43;(b&1?"_":""))是为了实现打印的动态效果了,当下标index为奇数的时候最后一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印文字的那种动态效果。

动态生成花瓣爱心

这里主要的功能就是创建矢量线&＃xff0c;告诉我们花瓣的走向。接着再绘制随机生成的花瓣图案&＃xff0c;最后再加上开花的效果。这里的Vector方法绘制了爱心的大致形状&＃xff0c;Petal方法则负责绘制随机生成的花瓣&＃xff0c;Bloom方法则定义了花瓣的绽放效果。Garden方法为花园入口&＃xff0c;负责参数选项配置选项及方法调用以实现爱心图案的生成。

文字淡入显示

在爱心中间的字体采用了淡入的效果&＃xff0c;这里我们可以通过jQuery封装的fadeIn()方法实现淡入效果来显示一个隐藏的元素。文字默认样式通过CSS定义为隐藏状态&＃xff0c;fadeIn()由两个参数分别是speed(速度)和callback(回调函数)。当花瓣爱心绘制完成之后我们调用fadeIn方法显示爱心中的内容&＃xff0c;回调中继续显示loveu中的内容。

计时器功能实现

当链接被点击的时候触发timeElapse方法开始计时&＃xff0c;这里获取了当前的时间并对时间进行了换算为天数、小时数、分钟数和秒数显示。parse()方法可解析一个日期时间字符串&＃xff0c;并返回 1970/1/1 午夜距离该日期时间的毫秒数。floor()方法则是对一个数进行向下取整计算&＃xff0c;返回的是小于或等于且最接近计算值的整数。

总结&＃xff1a;

源码说明&＃xff1a;本例中的源码非本人创作&＃xff0c;本文仅作简单的解析和分享。需要源码的朋友可以在评论区留言&＃xff0c;本源码仅限学习参考请勿它用。以上内容是小编给大家分享的【520情侣浪漫表白JS特效分享(附源码)】&＃xff0c;希望对大家有所帮助&＃xff0c;如果大家有任何疑问请给我留言&＃xff0c;小编会及时回复大家的。更多Vue实战技巧可以参考专栏&＃xff1a;Vue实战系列&＃xff0c;在此也非常感谢大家对小编的支持&＃xff01;