jQuery 動(dòng)態(tài)云標(biāo)簽插件
更新時(shí)間：2014年11月11日 14:17:28 投稿：hebedich
這里推薦給大家一款jquery動(dòng)態(tài)云標(biāo)簽的插件，非常的炫，在指定塊級(jí)元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽，a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控，a標(biāo)簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標(biāo)懸浮停止動(dòng)畫且透明度最大，層數(shù)最高，鼠標(biāo)離開，恢復(fù)之前狀態(tài)
前言：
最近對(duì)js的插件封裝特別感興趣，無耐就目前的技術(shù)想做到j(luò)s的完全封裝，還是有一定困難，就基于jQuery封裝了一個(gè)小的插件，而且是基于對(duì)象級(jí)開發(fā)的，不是添加全局方法。高深的語法幾乎沒有，就有一個(gè)return：foreach()方法來返回對(duì)象實(shí)例本身，還有一個(gè)extend（）函數(shù)，用來擴(kuò)展參數(shù)對(duì)象的屬性，這也是為了對(duì)象在調(diào)完我這個(gè)方法后方便鏈?zhǔn)讲僮鳌?/p>
插件打包下載地址：點(diǎn)我下載
插件名：動(dòng)態(tài)云標(biāo)簽
插件特點(diǎn)：
在指定塊級(jí)元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽
a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控
a標(biāo)簽漸隱顯示和漸隱消失，可改變初始化的透明度
a標(biāo)簽創(chuàng)建的速度和移動(dòng)速度可控（計(jì)時(shí)器）
a標(biāo)簽移動(dòng)的步長可控制（每次循環(huán)移動(dòng)的距離）
鼠標(biāo)懸浮停止動(dòng)畫且透明度最大，層數(shù)最高，鼠標(biāo)離開，恢復(fù)之前狀態(tài)
遇到問題：
目前插件是可以正常運(yùn)行，但如果切換瀏覽器標(biāo)簽，不把插件頁顯示，過一會(huì)再切換回來，會(huì)有卡頓的現(xiàn)象，這個(gè)現(xiàn)在還不知道什么情況，請(qǐng)了解的給予指點(diǎn)，里面也有很多需要優(yōu)化的地方，有好的點(diǎn)子希望提出來，我好及時(shí)給予更正。
動(dòng)畫效果：
汗：gif圖片可能有點(diǎn)大，稍等會(huì)就動(dòng)了。耐心哦
JS代碼片段：
復(fù)制代碼 代碼如下:
(function($){
$.fn.activiTag = function(opts) {
opts = $.extend({
move_step:2, // 元素移動(dòng)步長--px
move_speed:40, // 元素移動(dòng)速度--ms
init_speed:1000,// 元素創(chuàng)建速度--ms
min_opacity:0, // 元素最低透明度--0-1小數(shù)
max_grain: 10, // 最大粒度
// a標(biāo)簽數(shù)組
a_List: ["<a href='#'>請(qǐng)?zhí)砑釉嘏?lt;/a>","<a href='#'>Spring Jpa詳解</a>","<a href='#'>javamail郵箱</a>"], // a標(biāo)簽字符串?dāng)?shù)組
// 背景顏色數(shù)組
color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED'] // 標(biāo)簽顏色數(shù)組
},opts||{});
var aTag = $(this); // 當(dāng)前容器對(duì)象
var T_width = aTag.width(), T_height = aTag.height(); // 容器高度、寬度
return this.each(function(){
function setATagCss() { // 設(shè)置容器相應(yīng)css
aTag.css({position:'relative',overflow:'hidden'});
}
function getRandomNum(Min, Max){ // 獲取兩個(gè)區(qū)間之內(nèi)隨機(jī)數(shù)
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) { // 隨機(jī)返回一個(gè) 正/負(fù)參數(shù)
num = new Number(num);
if(Math.random()<=0.5)
num = -num;
return num;
}
/**
* 隨機(jī)創(chuàng)建a標(biāo)簽，寬度為容器寬度的三分之一，然后在自身基礎(chǔ)上+-五分之一寬度
* 高度自身寬度的三分之一，然后+-三分之一
*/
function createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]); // 每個(gè)標(biāo)簽元素
aTag.append(a);
return a;
}
/** 設(shè)置a標(biāo)簽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); // 層數(shù)
var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// 行高、層數(shù)、透明度
a.css({
opacity:rdmOpcy,
zIndex: zIndex,
lineHeight:h+'px',
position: 'absolute',
textDecoration:'none',
textAlign:'center',
borderRadius: '3px',
color:'#FFFFFF',
whiteSpace: 'nowrap',
});
return a;
}
/** 計(jì)算標(biāo)簽相對(duì)于容器的初始化位置(X_Y 坐標(biāo)) **/
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;
}
/** 設(shè)置隨機(jī)背景顏色 **/
function setColor(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
}
/** 構(gòu)造函數(shù)入口 **/
function construct() {
var a = createATag();
setCss(a); // css
setColor(a); // color
setXY(a); // 坐標(biāo)位置
return a;
}
/** 動(dòng)畫定時(shí)器函數(shù) **/
function interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity'); // 透明度
var botm_ = a.css('bottom').replace('px',''); // 實(shí)時(shí)底部距離
var opcy_ = parseFloat(new Number(a.css('opacity'))) + s_opcy; // ++透明度
var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --透明度
var fall = botm_ - botm; // 已移動(dòng)的距離
botm_ = new Number(botm_) + new Number(opts.move_step);
a.css({
display: 'block',
bottom: botm_,
});
if(fall < n)
{ a.css({opacity: opcy_}) }
else if(2*n < fall)
{ 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'); // 層數(shù)
var botm = a.css('bottom').replace('px',''); // 初始到底部距離
var space = T_height - a.height() - a.css('bottom').replace('px',''); // 要移動(dòng)的距離
var n = space/3; // 變換透明度距離
var step = 1-opcy; // 要變化透明度值
var sec = n/opts.move_step*opts.move_speed/1000; // 距離/單步長 * 單步長秒數(shù) = 需要秒數(shù)
var s_opcy = opts.move_speed/1000/sec * step; // 每次循環(huán)需要變換的透明度值
var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed)+30);
var currOpcy; // 記錄鼠標(biāo)移入時(shí)透明度
// console.log(opts.move_speed+'....'+speed_)
/** 元素移動(dòng)循環(huán) **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}, speed_)
a.mouseover(function(){ // 鼠標(biāo)移入
currOpcy = a.css('opacity');
clearInterval(s);
$(this).css({
zIndex: 401,
opacity: 1
});
});
a.mouseout(function(){ // 鼠標(biāo)移出
$(this).css({
zIndex: zInx,
opacity: currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},speed_);
});
}
setATagCss();
setInterval(init,opts.init_speed);
});
}
})(jQuery)
HTML：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云動(dòng)態(tài)標(biāo)簽生成插件</title>
<script src="jquery.min.js"type="text/javascript" charset="utf-8"></script>
<script src="jquery-tag.js"/>"type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$('#tag').activiTag({});
});
</script>
<style>
#tag{
border:1px dashed gray;
width:250px;
height:250px;
top: 50px;
left: 300px;
}
a{
padding:0px 3px;
font-size:12px;
white-space: nowrap;
display:none;
}
</style>
</head>
<body>
<div id='tag'></div>
</body>
</html>
您可能感興趣的文章:
- jquery 3D 標(biāo)簽云示例代碼
- javascript實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽云
- js簡單實(shí)現(xiàn)標(biāo)簽云效果實(shí)例
- JavaScript實(shí)現(xiàn)的圓形浮動(dòng)標(biāo)簽云效果實(shí)例
- 用JS實(shí)現(xiàn)3D球狀標(biāo)簽云示例代碼
- jQuery實(shí)現(xiàn)的簡單百分比進(jìn)度條效果示例
- jQuery簡單實(shí)現(xiàn)頁面元素置頂時(shí)懸浮效果示例
- jQuery簡單實(shí)現(xiàn)title提示效果示例
- jQuery+css實(shí)現(xiàn)非常漂亮的水平導(dǎo)航菜單效果
- jQuery簡單實(shí)現(xiàn)彩色云標(biāo)簽效果示例
相關(guān)文章
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強(qiáng)大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項(xiàng)目的不同需求，需要的朋友可以參考下2015-11-11
可以顯示單圖片，多圖片ajax請(qǐng)求的ThickBox3.1類下載
ThickBox是一個(gè)基于JQuery類庫的擴(kuò)展 以下的是ThickBox3.1的實(shí)例+代碼調(diào)用方法2007-12-12
jquery實(shí)現(xiàn)百分比記分進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)百分比記分進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09
jQuery3.0中的buildFragment私有函數(shù)詳解
在 jQuery3.0中，buildFragment 是一個(gè)私有函數(shù)，用來構(gòu)建一個(gè)包含子節(jié)點(diǎn) fragment 對(duì)象。下文給大家介紹jQuery3.0中的buildFragment私有函數(shù)詳解，對(duì)jquery3.0 buildfragment相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
JQuery的事件處理機(jī)制在JQuery框架中起著重要的左右，它就像電視機(jī)的開關(guān)，我們打開電視機(jī)的開關(guān)才能看到各個(gè)電視臺(tái)精彩的節(jié)目，那么我們使用JQuery的事件處理機(jī)制就可以創(chuàng)造我們自定義的行為，比如說提交、改變樣式、效果顯示等等，使我們的網(wǎng)頁更加豐富。2010-11-11
jquery ajax傳遞中文參數(shù)亂碼問題及解決方法說明
本篇文章主要是對(duì)jquery ajax傳遞中文參數(shù)亂碼問題及解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙Ｕ刯query中detach()和remove()的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了jquery中為什么能用$操作，jquery直接用$來獲取dom節(jié)點(diǎn)的方式也非常便捷方便，那么他是怎么實(shí)現(xiàn)的呢？,需要的朋友可以參考下2019-06-06
jQuery查找節(jié)點(diǎn)方法完整實(shí)例
這篇文章主要介紹了jQuery查找節(jié)點(diǎn)方法,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)DOM節(jié)點(diǎn)屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09