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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
浅谈React高阶组件
2018/03/28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python3图片文件批量重命名处理
2019/10/31 Python
python中round函数如何使用
2020/06/19 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
自荐信包含哪些内容
2013/10/30 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
篝火晚会策划方案
2014/05/16 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python