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知識！