点赞功能实现 $(tag).css('属性', '样式')
1. 创建标签 document.createElement()
2.$(tag).css('属性', 样式) 赋予标签属性样式
3.设置定时器 改变位置 大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #eeeeee; }
.item{ cursor: pointer;
position: relative;
width: 30px;
} </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-2.12.4.js"></script>
<script>
$('.item').click(function () {
add1Element(this);
function add1Element(self) {
var right = 0;
var top = 0;
var fontSize = 15;
var opacity = 1;
var tag=document.createElement('span');
tag.innerText = '+1';
$(tag).css('position', 'absolute');
$(tag).css('color', 'green');
$(tag).css('right', right+'px');
$(tag).css('top', top+'px');
$(tag).css('fontSize',fontSize+'px' );
$(tag).css('opacity', opacity);
$(self).append(tag);
var obj=setInterval(function (){
right = right-5;
top = top-5;
fontSize = fontSize+5;
opacity = opacity-0.1;
$(tag).css('right', right+'px');
$(tag).css('top', top+'px');
$(tag).css('fontSize',fontSize+'px' );
$(tag).css('opacity', opacity);
if(opacity<0){
clearInterval(obj)
}
}, 80) }
})
</script>
</body>
</html>
等属性
点赞功能实现 $(tag).css('属性', '样式')的更多相关文章
- 如何确定要对DIV设置什么CSS属性样式呢?
设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想 ...
- 前端入门4-CSS属性样式表
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- css属性、样式、边框、选择器
CSS 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言, 用来描述 HTML或 XML(包括如 SVG.MathML.XHTML 之类的 XML 分 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- 通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...
- CSS基本样式-背景属性
代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...
- css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
- 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、
CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...
随机推荐
- https ddos攻击——由于有了认证和加解密 后果更严重 看绿盟的产品目前对于https的ddos cc攻击需要基于内容做检测
如果web服务器支持HTTPS,那么进行HTTPS洪水攻击是更为有效的一种攻击方式,一方面,在进行HTTPS通信时,web服务器需要消耗更多的资源用来进行认证和加解密,另一方面,一部分的防护设备无法对 ...
- c/c++指针常见错误
一 #include <bits/stdc++.h> using namespace std; void f(char *str) { char *s = str; str[] = ' / ...
- halcon之扫描文档祛底色
halcon之扫描文档祛底色增 很多扫描APP都有祛底色的功能:用于改善成像质量,通常扫描后的图像可能会用于存档或 ...
- 关于CMD中延迟环境变量嵌套的实现方法
在我昨天做的一个bat中(自动按日期重命名文件名)涉及到这方面的问题 以前涉及到这里时就想别的办法替代过去,今天好好扒出来说说: 实现变量嵌套的2种方法: 1,使用call实现变量嵌套 变量嵌套:即在 ...
- STL标准库-容器-unordered_set
技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 unordered_set与与unordered_map相似,这次主要介绍unordered_set unordered_set ...
- js:关闭当前页面
var userAgent = navigator.userAgent; if (userAgent.indexOf("Firefox") != -1 || userAgent.i ...
- 安装配置adb工具及遇到的问题
一. 下载安装 配置环境 二.遇到的问题 1.Terminal 不是内部或外部命令,也不是可运行程序或批处理文件 https://blog.csdn.net/wuqilianga/article/de ...
- Windows与.NET Framework、数据库版本对应关系
================== windows XP/server 2003 (.NET Framework与 SQL Server\Oracle) 支持.NET版本:.NET Framewor ...
- 《DSP using MATLAB》示例 Example 9.11
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- streamsets microservice pipeline 试用
实际上还是一个pipeline,只是添加了一些规则以及内嵌的http server 方便我们对于基于http 或者类似轻量 协议数据的处理 基本环境 使用docker&& docker ...