抽屉点赞及jQuery CSS操作
1.需要用到的知识点:
CSS处理
$('t1').css('color','red')
点赞:
-$('t1').append()
-$('t1').remove()
-setInterval
-opacity 1-->0
-position
-字体大小,位置
程序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding:50px;
border:1px solid #dddddd;
}
.item{
position:relative;
width:50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function(){
AddFavor(this)
});
function AddFavor(self){
//dom对象
var fontSize=15;
var top=0;
var right=0;
var opacity=1; var tag=document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('fontSize',fontSize+'px');
$(tag).css('position','absolute');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj=setInterval(function(){
fontSize=fontSize+5;
top=top-5;
right=right-5;
opacity=opacity-0.1; $(tag).css('fontSize',fontSize+'px');
$(tag).css('position','absolute');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity); if(opacity<0){
clearInterval(obj);
$(tag).remove();
} },100); }
</script>
</body>
</html>
效果图:
抽屉点赞及jQuery CSS操作的更多相关文章
- jQuery CSS 操作
jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数: $(selector).css(name,value) $(selector).css({properties}) $ ...
- jQuery css操作
jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- jQuery CSS 操作函数(六)
CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...
- jQuery CSS 操作 - offset() 方法
今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...
- jQuery CSS 操作函数
CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...
- jQuery CSS 的操作函数
jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
随机推荐
- 【MySQL高级特性】高性能MySQL第七章
2017-07-25 14:15:43 前言:MYSQL从5.0和5.1版本开始引入了很多高级特性,例如分区.触发器等,这对有其他关系型数据库使用 背景的用户来说可能并不陌生.这些新特性吸引了很多用户 ...
- python全栈开发-前方高能-内置函数2
python_day_15 一.今日主要内容 1. lambda 匿名函数 语法: lambda 参数:返回值 不能完成复杂的操作 2. sorted() 函数 排序. 1. 可迭代对象 2. key ...
- stl源码分析之vector
上篇简单介绍了gcc4.8提供的几种allocator的实现方法和作用,这是所有stl组件的基础,容器必须通过allocator申请分配内存和释放内存,至于底层是直接分配释放内存还是使用内存池等方法就 ...
- 强化学习读书笔记 - 10 - on-policy控制的近似方法
强化学习读书笔记 - 10 - on-policy控制的近似方法 学习笔记: Reinforcement Learning: An Introduction, Richard S. Sutton an ...
- [转]操作系统Unix、Windows、Mac OS、Linux的故事
[写得很江湖气,可惜找不到原作者了] 文章转自:http://blog.csdn.net/wenmingchan/article/details/49925379 http://www.jb51.ne ...
- Winrar去广告图文教程
一.前言 1.1 Winrar 解压缩工具 市场上有很多优秀的压缩工具,常用的有Winrar 和360 压缩工具.Winrar是免费压缩工具,特色是每次使用都会弹出广告.影响用户体验和工作效率,当然最 ...
- vim神器(学习笔记)
#本文并非原创,属于本人学习中的记录笔记或是转存笔记,如果涉及到哪位高人的创作权益,敬请海涵! Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持 ...
- dotnet服务器端框架从精通到弃坑
当你们看到这篇经验分享的时候,我已经把服务器端主要力量转到JAVA了. 纯当留念. 另外里面实现oauth2.0的部分就不写了,因为特殊性太强,完全根据自家需求结合它的理念改写的. 为什么我会选择sp ...
- Digital Roots:高精度
C - Digital Roots Description The digital root of a positive integer is found by summing the digits ...
- AJAX学习2
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...