jquery心形点赞关注效果的简单实现
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心形点赞关注效果的简单实现全部内容了，希望大家多多支持小牛知识库~
-
本文向大家介绍jQuery实现简单的点赞效果，包括了jQuery实现简单的点赞效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了jQuery实现简单的点赞效果的详细代码，具体内容如下 效果图： 下面提供一个"点赞"的实例代码，用ASP.NET MVC4+jQuery Ajax实现。 Model： View： Controller： 以上就是本文的全部内容，希望对大家学习jquery程序设
-
本文向大家介绍jQuery实现的超简单点赞效果实例分析，包括了jQuery实现的超简单点赞效果实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的超简单点赞效果，分享给大家供大家参考，具体如下： 1.HTML（可以优化一下，尽量少些几个标签.....） 2.css样式 3.js（对js运用的不是非常好，大家可以优化的更好一些） 好了，代码都贴上来了，超级简单的。我写的
-
本文向大家介绍javascript实现手动点赞效果，包括了javascript实现手动点赞效果的使用技巧和注意事项，需要的朋友参考一下 做移动开发的时候经常会遇到点赞的一些处理，尤其是当使用字体图标的时候，由于仅希望改变字体，但是字体经过编译之后又和它的.html()不一致，所以导致判断起来比较麻烦，最后想了一个办法来解决此问题。 还有一种点赞是点赞之后后面跟有数字，点击之后颜色变化并且数字+1，
-
本文向大家介绍简单实现jQuery弹幕效果，包括了简单实现jQuery弹幕效果的使用技巧和注意事项，需要的朋友参考一下 在要写一个弹幕案例的时候，首先要清楚每一步要干什么。 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤： 获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val(); 生成一个元素：利用jQuery的 var
-
本文向大家介绍jQuery实现简单弹幕效果，包括了jQuery实现简单弹幕效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下 话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下： J
-
本文向大家介绍简单实现jQuery轮播效果，包括了简单实现jQuery轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery轮播效果展示的具体代码，供大家参考，具体内容如下 jQ代码： 在写jQuery代码之前一定要先导库，此处我用的是3.0的库 css样式： html样式： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。