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

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

html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
简单点赞效果html,js实现点赞效果
javascript实现点赞或踩加一,再点一次减一的效果好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正) 效果图如下 HTML代码可直接ctrl + ...
CSS入门之引用、选择器、属性（六分之三）
CSS 入门教程六分之三篇没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了...所以先写到六分之三,23333333 要点解释引用如何使用定义的CSS样 ...
html与css入门经典当当,HTML与CSS入门经典
?通过阅读本书,读者将学会如何使用HTML和CSS来设计.创建和维护*的网站.本书采用直观.循序渐进的方法,引导读者掌握从基本知识到*功能的所有内容.本书每章内容都建立在已学的知识之上.即使读者没有任 ...
android今日头条点赞效果,类似今日头条点赞长按动画效果-CAEmitterLayer
1. CAEmitterLayer是一款高性能的粒子引擎,用来创建实时的粒子动画:撒花.火焰.烟雾(因为没有合适的图,下面效果图将就着看吧
【转】[教程] CSS入门3：如何插入CSS样式
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2524742 转载于:https://www.cnblogs.com/lzhitia ...
div css入门教程，更简洁CSS清理浮动方式：clearfix
- 清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码 ...
仿抖音 APP 视频切换和点赞效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:Yun丶Lei 链接:https://www.jianshu.com/p/c43c75303174 声明:本文已 ...
CSS入门学习笔记（案例+详解）
CSS入门学习笔记一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法三.CSS选择器 1.元素 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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