html实现点赞效果,HTML+CSS入门 点赞功能实现 $(tag).css('属性', '样式')

本篇教程介绍了HTML+CSS入门 点赞功能实现 $(tag).css('属性', '样式')，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

1. 创建标签 document.createElement()

2.$(tag).css('属性'， 样式) 赋予标签属性样式

3.设置定时器 改变位置 大小

html>

Title

.container{

padding: 50px;

border: 1px solid #eeeeee;

}

.item{

cursor: pointer;

position: relative;

width: 30px;

}

赞

赞

赞

$('.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)

}

})

等属性

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！