首頁 JS特效 CSS3特效 CSS3按讚加一動畫特效

CSS3按讚加一動畫特效

CSS3按讚加一動畫特效

CSS3按讚加一動畫特效

js程式碼

<script type="text/javascript">
(function ($) {
	$.extend({
		tipsBox: function (options) {
			options = $.extend({
				obj: null,  //jq对象,要在那个html标签上显示
				str: "+1",  //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
				startSize: "12px",  //动画开始的文字大小
				endSize: "30px",    //动画结束的文字大小
				interval: 600,  //动画时间间隔
				color: "red",    //文字颜色
				callback: function () { }    //回调函数
			}, options);
			$("body").append("<span class='num'>" + options.str + "</span>");
			var box = $(".num");
			var left = options.obj.offset().left + options.obj.width() / 2;
			var top = options.obj.offset().top - options.obj.height();
			box.css({
				"position": "absolute",
				"left": left + "px",
				"top": top + "px",
				"z-index": 9999,
				"font-size": options.startSize,
				"line-height": options.endSize,
				"color": options.color
			});
			box.animate({
				"font-size": options.endSize,
				"opacity": "0",
				"top": top - parseInt(options.endSize) + "px"
			}, options.interval, function () {
				box.remove();
				options.callback();
			});
		}
	});
})(jQuery);
  
function niceIn(prop){
	prop.find('i').addClass('niceIn');
	setTimeout(function(){
		prop.find('i').removeClass('niceIn');	
	},1000);		
}
$(function () {
	$("#btn").click(function () {
		$.tipsBox({
			obj: $(this),
			str: "+1",
			callback: function () {
			}
		});
		niceIn($(this));
	});
});
</script>
	
这是一款基于jQuery+CSS3实现的比较实用点赞加一动画特效,jQuery点赞按钮动画效果。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

CSS3的新特性一覽:如何套用CSS3動畫效果 CSS3的新特性一覽:如何套用CSS3動畫效果

09 Sep 2023

CSS3的新特性一覽:如何應用CSS3動畫效果引言:隨著網路的發展,CSS3逐漸取代了CSS2成為前端開發中最常用的樣式語言。 CSS3提供了許多新的特性,其中最受歡迎的是動畫效果。透過使用CSS3動畫,可以為網頁添加令人驚豔的互動效果,提升使用者體驗。本文將介紹一些CSS3常用的動畫特性,並提供相關的程式碼範例。一、過渡動畫(TransitionAnimat

一招教你使用css3製作按鈕加入動態效果(程式碼分享) 一招教你使用css3製作按鈕加入動態效果(程式碼分享)

06 Sep 2021

之前的文章《新手篇:如何用ccs製作一個簡單的版面(附程式碼)》中,跟大家介紹如何用ccs製作一個簡單的版面。以下這篇文章跟大家介紹怎麼使用css3製作按鈕加入動態效果,我們一起看看怎麼做。

如何熟練運用CSS3特效提升網頁的使用者體驗 如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展,網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用,可為網頁增添動感與視覺效果,提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例,幫助開發者更熟練地運用CSS3特效,提升網頁的使用者體驗。過渡效果(Transition)過渡效果是CSS3中最基本的特效之一,透過改變某個屬

jQuery與CSS3超炫漢堡變形動畫特效 jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件,並透過CSS3 transform和animation來製作動畫特效。

css3點選顯示漣漪特效 css3點選顯示漣漪特效

24 Nov 2017

css3點選顯示漣漪特效,怎麼用css3做出點擊顯示漣漪特效,點選顯示漣漪的特效需要注意哪些面向?下面就給大家做個案例.

CSS3裡怎麼實現單選框動畫特效 CSS3裡怎麼實現單選框動畫特效

25 Nov 2017

CSS3裡要怎麼實現單選框動畫特效?為什麼要實現單選框動畫特效?以下我們給大家舉兩個例子,幫大家熟練用CSS3實現單選框動畫特效

純CSS3創意導航選單特效 純CSS3創意導航選單特效

17 Jan 2017

这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。

css3視覺特效的實現 css3視覺特效的實現

22 Mar 2018

這次帶給大家css3視覺特效的實現,實現css3視覺特效的注意事項有哪些,以下就是實戰案例,一起來看一下。

基於SVG與CSS3的可愛卡通小動物動畫特效 基於SVG與CSS3的可愛卡通小動物動畫特效

19 Jan 2017

這是一款以SVG濾鏡和CSS3製作的可愛小動物動畫特效。此特效中使用HTML標籤和SVG結合製作動物的外形,並透過CSS3 animation動畫來製作動物的各種動畫特效。

See all articles See all articles

Hot Tools

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS3 SVG表白花動畫特效

CSS3 SVG表白花動畫特效

SS3 SVG表白花動畫特效是一款情人節動畫特效。

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效是情人節懸掛擺動愛心動畫特效。

css3湯匙撈起湯圓動畫特效

css3湯匙撈起湯圓動畫特效

一碗可愛的湯圓表情,湯匙撈起一個湯圓動畫特效