前言：
最近對js的插件封裝特別感興趣，無耐就目前的技術想做到js的完全封裝，還是有一定困難，就基於jQuery封裝了一個小的插件，而且是基於對象級開發的，不是添加全域方法。高深的語法幾乎沒有，就有一個return：foreach()方法來返回物件實例本身，還有一個extend（）函數，用來擴展參數物件的屬性，這也是為了物件在調完我這個方法後方便鏈式操作。
外掛程式打包下載位址：點我下載
外掛程式名稱：動態雲標籤
插件特色：
在指定區塊級元素內動態產生a標籤
a標籤的高度、寬度、位置、層數、背景顏色隨機可控制
a標籤漸隱顯示和漸隱消失，可改變初始化的透明度
a標籤所建立的速度和移動速度可控制（計時器）
a標籤移動的步長可控制（每次循環移動的距離）
滑鼠懸浮停止動畫且透明度最大，層數最高，滑鼠離開，恢復前狀態
遇到問題：
目前插件是可以正常運行，但如果切換瀏覽器標籤，不把插件頁顯示，過一會兒再切換回來，會有卡頓的現象，這個現在還不知道什麼情況，請了解的給予指點，裡面也有很多需要優化的地方，有好的點子希望提出來，我好及時給予更正。
動畫效果：
汗：gif圖片可能有點大，等一下就動了。耐心哦
JS程式碼片段：
(function($){
$.fn.activiTag = function(opts) {
opts = $.extend({
move_step:2, // 元素移動步長--px
move_speed:40, // 元素移動速度--ms
init_speed:1000,// 元素創造速度--ms
min_opacity:0, // 元素最低透明度--0-1小數
max_grain: 10, // 最大粒徑
// a標籤陣列
a_List: ["請加元素哦","Spring Jpa詳解","javamail郵箱"], // a標籤字串陣列
// 背景顏色陣列
color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED'] 標籤顏色陣列 },opts||{});
var aTag = $(this); // 目前容器物件
var T_width = aTag.width(), T_height = aTag.height(); // 容器高度、寬度
return this.each(function(){
function setATagCss() { // 設定容器對應css
aTag.css({position:'relative',overflow:'hidden'});
}
function getRandomNum(Min, Max){ // 取得兩個區間內隨機數
Min = new Number(Min);Max = new Number(Max);
var Range = Max - Min 1;
var Rand = Math.random();
return Min Math.floor(Rand * Range);
}
function getRandomXY(num) { // 隨機回傳一個 正/負參數
num = new Number(num);
if(Math.random() num = -num;
return num;
}
/**
* 隨機建立a標籤，寬度為容器寬度的三分之一，然後在自身基礎上 -五分之一寬度
* 較自體寬度的三分之一，則為 -三分之一為
*/
function createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]); // 每個標籤元素
aTag.append(a);
return a;
}
/**設定a標籤css樣式 **/
function setCss(a) {
var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
var h = Math.ceil(w/3) getRandomXY(w/36); // 行高
var zIndex = Math.ceil(Math.random()*400); // 層數
var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// 行高、層數、透明化
a.css({
opacity:rdmOpcy,
zIndex: zIndex,
lineHeight:h 'px',
position: 'absolute',
textDecoration:'none',
textAlign:'center',
borderRadius: '3px',
color:'#FFFFFF',
whiteSpace: 'nowrap',
});
return a;
}
/**計算標籤相對於容器的初始化位置(X_Y 座標) **/
function setXY(a) {
var x = getRandomNum(0,(T_width-a.width()));
var y = getRandomNum(0,T_height/10);
a.css({left:x 'px', bottom:y 'px'});
return a;
}
/**設定隨機背景顏色 **/
function setColor(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
}
/**構造函數入口 **/
function construct() {
var a = createATag();
setCss(a); // css
setColor(a); // color
setXY(a); // 座標位置
return a;
}
/**動畫定時器函數 **/
function interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity'); // 透明度
var botm_ = a.css('bottom').replace('px',''); // 即時底部距離
var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // 透明度
var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --透明度
var fall = botm_ - botm; // 已移動的距離
botm_ = new Number(botm_) 新 Number(opts.move_step);
a.css({
display: 'block',
bottom: botm_,
});
if(fall { a.css({opacity: opcy_}) }
else if(2*n { a.css({opacity: _opcy_}) }
if (botm_ >= space)
{
clearInterval(s);
a.remove();
}
}
function init() {
if(aTag.children('a').length >= new Number(opts.max_grain))
return;
var a = construct();
var opcy = a.css('opacity'); // 透明度
var zInx = a.css('zIndex'); // 層數
var botm = a.css('bottom').replace('px',''); //初始到底部距離
var space = T_height - a.height() - a.css('bottom').replace('px',''); // 要移動的距離
var n = space/3; // 轉換透明度距離
var step = 1-opcy; // 若要變動透明度值
var sec = n/opts.move_step*opts.move_speed/1000; // 距離/單步長 * 單步長秒數 = 需秒數
var s_opcy = opts.move_speed/1000/sec * step; // 每次循環中需要轉換的透明度值
var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
;
;
;
;
;
;
; var currOpcy; // 記錄滑鼠移入時以透明度為
// console.log(opts.move_speed '....' speed_)
/**元素移動循環 **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}, speed_)
a.mouseover(function(){ // 滑鼠移入
currOpcy = a.css('opacity');
clearInterval(s);
$(this).css({
zIndex: 401,
opacity: 1
});
});
a.mouseout(function(){ // 滑鼠移出
$(this).css({
zIndex: zInx,
opacity: currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},speed_);
});
}
});
}})(jQuery)
複製程式碼 程式碼如下:ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
"type="text/javascript" charset="utf-8">
$(函數(){
$('#tag').activiTag({});
});
腳本>
#標籤{
邊框：1px 灰色虛線；
寬度：250px；
高度：250px；
上方：50px；
左：300px；
}
一個{
內邊距：0px 3px;
字體大小：12px;
空白：nowrap;
顯示：無；
}
風格>
頭>
身體>
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
Atom編輯器mac版下載
最受歡迎的的開源編輯器
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Dreamweaver Mac版
視覺化網頁開發工具
