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('属性', '样式')的更多相关文章

  1. 如何确定要对DIV设置什么CSS属性样式呢？

    设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想 ...

  2. 前端入门4-CSS属性样式表

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. css属性、样式、边框、选择器

    CSS 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言, 用来描述 HTML或 XML(包括如 SVG.MathML.XHTML 之类的 XML 分 ...

  4. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  5. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  6. 通过css属性hack完成select样式美化，并兼容IE

    最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

  7. CSS基本样式-背景属性

    代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...

  8. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  9. 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 ...

随机推荐

  1. 尺取法拓展——POJ3320

    #include <iostream> #include <cstdio> #include <algorithm> #include <set> #i ...

  2. IOS-网络（ASIHTTPRequest的使用简介）

    使用iOS SDK中的HTTP网络请求API,相当的复杂,调用很繁琐,ASIHTTPRequest就是一个对CFNetwork API进行了封装,并且使用起来非常简单的一套API,用Objective ...

  3. Netty自定义Encoder/Decoder进行对象传递

    转载:http://blog.csdn.net/top_code/article/details/50901623 在上一篇文章中,我们使用Netty4本身自带的ObjectDecoder,Objec ...

  4. hdu3572

    题解: 网络流 判断是否为漫流 代码: #include <cstdio> #include <cstring> #include <algorithm> #inc ...

  5. Android 4.3发布 新增4大改变25日推送升级[附Android 4.3 工厂镜像]

    北京时间7月25日,谷歌举行发布会,正式发布了全新的Nexus 7平板电脑以及Android 4.3系统. 其中Android 4.3系统隶属于4.X果冻豆(Jelly Bean)系列,是目前最新的操 ...

  6. A标签/按钮防止重复提交&页面Loading制作

    [实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...

  7. Alpha阶段第1周Scrum立会报告+燃尽图 01

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  8. LR 解压缩函数(wgzMemDecompressBuffer)失败 Code=-5

    用LR做压力测试的时候有时会报错 “解压缩函数(wgzMemDecompressBuffer)失败 返回Code=-5”. Google了一把,也没有解决掉. 因为有些脚本运行时没有问题,感觉可能和请 ...

  9. 使用 某款基于Socks5协议的代理软件 一段时间后 被封锁掉IP的一些技术思考

    由于关键词比较敏感为了不被删除帖子所以文中某软件(上图所示软件)不用全称表示. 去年9月末在 在某国外网站 上弄了一个vpn,在上面安装了某软件,使用起来还是蛮不错的,平时查查英文论文,看看美剧还是比 ...

  10. LTE-Advanced（4G）主要技术学习：CA、CoMp、HetNet

    CA:Carrier Aggregation,载波聚合 从LTE到LTE-Advanced演进过程中,更宽频谱的需求是影响演进的最重要因素,为此3GPP标准提出了载波聚合技术.简单地说,它可以将多个载 ...