jquery心形点赞关注效果的简单实现


Posted in Javascript onNovember 14, 2016

html代码

<div class="stage"> 
 <div class="heart"></div> 
</div>

css代码

.heart { 
 width: 100px; 
 height: 100px; 
 background: url("") no-repeat; 
 background-position: 0 0; 
 cursor: pointer; 
 -webkit-transition: background-position 1s steps(28); 
 transition: background-position 1s steps(28); 
 -webkit-transition-duration: 0s; 
     transition-duration: 0s; 
} 
.heart.is-active { 
 -webkit-transition-duration: 1s; 
     transition-duration: 1s; 
 background-position: -2800px 0; 
} 
 
body { 
 background: -webkit-linear-gradient(315deg, #121721 0%, #000000 100%) fixed; 
 background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed; 
 color: #FFF; 
 font: 300 16px/1.5 "Open Sans", sans-serif; 
} 
 
.stage { 
 position: fixed; 
 top: 50%; 
 left: 50%; 
 -webkit-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
}

js代码

$(function() { 
 $(".heart").on("click", function() { 
  $(this).toggleClass("is-active"); 
 }); 
});

以上就是小编为大家带来的jquery心形点赞关注效果的简单实现全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 #Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 #Javascript
Node.js中路径处理模块path详解
Nov 14 #Javascript
JavaScript队列、优先队列与循环队列
Nov 14 #Javascript
JavaScript中setTimeout的那些事儿
Nov 14 #Javascript
jquery css实现邮箱自动补全
Nov 14 #Javascript
JS常用算法实现代码
Nov 14 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
基于文本的搜索
2006/10/09 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Python实现购物车购物小程序
2018/04/18 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python二维码生成识别实例详解
2019/07/16 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
英文自荐信常用句子
2014/03/26 职场文书
五四青年节演讲稿
2014/05/26 职场文书
社区活动策划方案
2014/08/21 职场文书
2015年维修工作总结
2015/04/25 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang