頭像

5種常用的jQuery+css3網頁loading圖標動畫效果

來源:http://www.xdpitk.live/js/4450.html 18***38 2019-06-20 11:48瀏覽(48) 收藏

5種常用的jQuery+css3網頁loading圖標動畫效果,簡潔實用的加載動畫特效,點擊按鈕彈出loading動畫加載圖標。
5種常用的jQuery+css3網頁loading圖標動畫效果
分類:css3 > transform 難易:初級

程序員,你不是一個人;網站開發QQ群:35248186,在線充值,或聯系QQ321037704直接充值

查看演示 下載資源: 3 下載資源 下載積分: 30 積分

js代碼

<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script>
/**
 * 參數:支持字符串以及對象傳參
 * 傳值為字符串 默認第一種樣式,提示文字為默認loading...
 * 傳值為對象時
 * 1.type 類型,只支持五種,可擴展  必填項
 * 2.tip  提示文字  非必填
 * 3.showTip 是否顯示提示文字,默認為true  非必填 
 * 使用方法
 * loading.showLoading()
 * loading.hideLoading()
 */
$('.show-load1').click(()=>{
	loading.showLoading({
		type:1,
		tip:"type 1"
	})
})
$('.show-load2').click(()=>{
	loading.showLoading({
		type:2,
		tip:"type 2"
	})
})
$('.show-load3').click(()=>{
	loading.showLoading({
		type:3,
		tip:"type 3"
	})
})
$('.show-load4').click(()=>{
	loading.showLoading({
		type:4,
		tip:"type 4"
	})
})
$('.show-load5').click(()=>{
	loading.showLoading({
		type:5,
		tip:"type 5"
	})
})
$('.hide-show').click(()=>{
	loading.hideLoading();
})
</script>
最新交易
評論0
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 2589223951

1 2
重庆百变王牌app