一、前言
今天我们来学习一下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 字体大小,位置