CSS3点赞加一动画特效
js代码
<script type="text/javascript"> (function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象,要在那个html标签上显示 str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>" startSize: "12px", //动画开始的文字大小 endSize: "30px", //动画结束的文字大小 interval: 600, //动画时间间隔 color: "red", //文字颜色 callback: function () { } //回调函数 }, options); $("body").append("<span class='num'>" + options.str + "</span>"); var box = $(".num"); var left = options.obj.offset().left + options.obj.width() / 2; var top = options.obj.offset().top - options.obj.height(); box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": options.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt(options.endSize) + "px" }, options.interval, function () { box.remove(); options.callback(); }); } }); })(jQuery); function niceIn(prop){ prop.find('i').addClass('niceIn'); setTimeout(function(){ prop.find('i').removeClass('niceIn'); },1000); } $(function () { $("#btn").click(function () { $.tipsBox({ obj: $(this), str: "+1", callback: function () { } }); niceIn($(this)); }); }); </script>
这是一款基于jQuery+CSS3实现的比较实用点赞加一动画特效,jQuery点赞按钮动画效果。
免责声明
本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn
相关文章

27 Oct 2018
在网速不好的情况下打开网站或者观看视频,页面加载会很慢,这时一般会提示用户“页面正在加载中,请稍后”,而且会有一个圆圈一直在转动。正在学习html和CSS的小伙伴,你会用CSS3实现圆圈加载动画效果吗?这篇文文章就给大家分享一个纯CSS3实现的圆圈(loading)加载动画特效,感兴趣的小伙伴可以参考借鉴一下。

07 Dec 2024
CSS3 过渡:“transition: all”比针对特定属性的效率低吗?使用 CSS3 过渡时,...

14 Dec 2024
Safari 中 CSS3 动画失效您遇到了 CSS3 动画在 Safari 中无效的问题。尽管该动画在支持 CSS3...

23 Feb 2021
在网页中,进度条的效果并不少见,如:平分系统、加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本、Firefox的老版本


Hot Tools

CSS文字组合成心形动画特效
CSS文字组合成心形动画特效

CSS3 SVG表白鲜花动画特效
SS3 SVG表白鲜花动画特效是一款情人节动画特效。

CSS的商城网站常用左侧分类下拉导航菜单代码
CSS的商城网站常用左侧分类下拉导航菜单代码

jQuery+CSS3情人节爱心特效
jQuery+CSS3情人节爱心特效是一款情人节悬挂摆动爱心动画特效。

css3汤勺捞起汤圆动画特效
一碗可爱的汤圆表情,汤勺捞起一个汤圆动画特效

热门文章
王朝战士起源控制器不工作:简单修复
23 Jan 2025
故障排查
如何修复KB5050094无法在Windows 11中安装?
30 Jan 2025
故障排查
如何解决真三国无双:起源在 Windows 中一直冻结的问题?
24 Jan 2025
故障排查
KB5050188 安装失败:无与伦比的方法就在这里
23 Jan 2025
故障排查
Windows 11 KB5049624 中有哪些新增功能以及如何安装?
23 Jan 2025
故障排查