博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day16-示例:点赞以及jQuery css操作
阅读量:5766 次
发布时间:2019-06-18

本文共 1527 字,大约阅读时间需要 5 分钟。

一、前言

  今天我们来学习一下jquery css操作和点赞功能的实现。

二、css的操作

2.1、css的操作

说明:访问匹配元素的样式属性。

$("p").css("color"); //获取样式的值$("p").css("color","red"); //添加或者设置样式的值$("p").css({ "color": "#ff0011", "background": "blue" });  //将所有段落的字体颜色设为红色并且背景为蓝色。

三、点赞功能实现

3.1、操作的html

    
Title

 3.2、点赞功能

$(".item").click(function(){    addFavor(this)});function addFavor(self){    var fontSzie = 15;    var top = 0;    var right = 0;    var opacity = 1;    var tag = document.createElement("span");    $(tag).text("+1");    $(tag).css("color","green");    $(tag).css("position","absolute");    $(tag).css("fontSzie",fontSzie + "px");    $(tag).css("top",top + "px");    $(tag).css("right",right + "px");    $(tag).css("opacity",opacity);    $(self).append(tag);    var obj = setInterval(function(){        fontSzie = fontSzie + 5;        top = top - 5;        right = right - 5;        opacity = opacity - 0.2        $(tag).css("color","green");        $(tag).css("position","absolute");        $(tag).css("fontSzie",fontSzie + "px");        $(tag).css("top",top + "px");        $(tag).css("right",right + "px");        $(tag).css("opacity",opacity);        if(opacity < 0){            clearInterval(obj);            $(tag).remove();        }    },100)}

 用到的知识点:

$("t1").append();$("t1").remove();setInterval();opacity   透明度position  位置fontSize 字体大小,位置

 

转载于:https://www.cnblogs.com/zhangqigao/articles/8398069.html

你可能感兴趣的文章
Struts2框架学习之四:OGNL表达式
查看>>
LeetCode 38 Count and Say(计数与报数)
查看>>
graphviz dot初探
查看>>
[面试经]字节对齐
查看>>
人工智能战斗系统ALPHA:打败美国空军上校
查看>>
锁住余额,为何还会更新异常?
查看>>
薅羊毛: 微信小程序开发者可以免费使用验证码短信服务了!
查看>>
数据结构基础学习之(图)
查看>>
大型互联网b2b b2c o2o电子商务云平台
查看>>
React + Antd + Redux改进之前简单的todolist
查看>>
koa2学习笔记(三)async/await
查看>>
杉车大数据:30万的入门级跑车,我选日系
查看>>
成功微服务实施的组织演进
查看>>
Java设计模式——命令模式
查看>>
jq实现Tab组件
查看>>
Java8的Lambda表达式
查看>>
Python 描述符(Descriptor) 附实例
查看>>
用 Vue 开发一个音乐 app
查看>>
FTP文件服务器搭建和使用(windows)
查看>>
感谢你们的反馈,让我们携手为全球亿万用户打造出色的 Android 平台!
查看>>