jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
更新時(shí)間：2015年10月16日 09:29:32 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖。分享給大家供大家參考。具體如下：
這里演示jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖，setQuestPose:function中的n代表共幾個(gè)對(duì)象 r代表周長(zhǎng) i代表第幾個(gè)對(duì)象 w代表外面對(duì)象的寬帶 h代表外面對(duì)象的高度 d代表其實(shí)角度，測(cè)試時(shí)請(qǐng)注意，如果右下角提示有錯(cuò)誤，請(qǐng)重新刷新頁(yè)面即可。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-show-gxt-style-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery漸顯效果的人物多級(jí)關(guān)系圖</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#box{width:500px;height:500px;position:relative;}
.host{position:absolute;width:100px;height:50px;line-height:50px;text-align:center;color:#000000;background-color:#eeeeee;border:#000000 1px solid;font-weight:bolder;}
.guest{position:absolute;width:80px;height:40px;line-height:40px;text-align:center;color:#999999;background-color:#FFFFFF;border:#000000 1px solid;cursor:pointer;}
.relationship{position:absolute;width:60px;height:20px;color:#aaa;line-height:20px;font-size:12px;text-align:center;}
</style>
<script src="jquery1.3.2.js"></script>
<script type="text/javascript">
var relationName = [
{name:"成龍",friend:[
{name:"房祖名",relationship:"父子"},
{name:"林鳳嬌",relationship:"夫妻"},
{name:"吳綺莉",relationship:"緋聞"},
{name:"徐靜蕾",relationship:"激吻"}]
},
{name:"房祖名",friend:[
{name:"成龍",relationship:"父子"},
{name:"林鳳嬌",relationship:"母子"},
{name:"方大同",relationship:"情敵"},
{name:"薛凱琪",relationship:"女友"},
{name:"陳坤",relationship:"朋友"},
{name:"趙薇",relationship:"朋友"}]
},
{name:"林鳳嬌",friend:[
{name:"成龍",relationship:"夫妻"},
{name:"房祖名",relationship:"母子"},
{name:"吳綺莉",relationship:"情敵"}]
},
{name:"吳綺莉",friend:[
{name:"成龍",relationship:"緋聞"},
{name:"林鳳嬌",relationship:"情敵"},
{name:"吳卓林",relationship:"母女"}]
},
{name:"徐靜蕾",friend:[
{name:"李亞鵬",relationship:"電影"},
{name:"韓寒",relationship:"娛樂(lè)圈"},
{name:"成龍",relationship:"激吻"},
{name:"黃立行",relationship:"電影"}]
},
{name:"方大同",friend:[
{name:"房祖名",relationship:"情敵"},
{name:"薛凱琪",relationship:"否認(rèn)拍拖"},
{name:"林宥嘉",relationship:"歌手"},
{name:"韓庚",relationship:"演唱會(huì)"}]
},
{name:"薛凱琪",friend:[
{name:"方大同",relationship:"否認(rèn)拍拖"},
{name:"房祖名",relationship:"女友"}]
}
]
var relation = {
radius:150,
boxW:500,
boxH:500,
hostW:100,
hostH:50,
guestW:80,
guestH:40,
relationW:60,
relationH:20,
angle:0,
id:"box",
init:function(array,n){//傳入?yún)?shù)1：數(shù)組 參數(shù)2：第幾個(gè)
this.array = array;
this.appendHost(this.array,n);
this.appendQuest(this.array,n);
this.appendRelationShip(this.array,n);
},
appendHost:function(array,n){
var box = $("#"+this.id);
var host ="<span class='host'>"+array[n].name+"</span>";
box.append(host)
this.postHost();
},
postHost:function(){
var x = (this.boxW - this.hostW)/2;
var y = (this.boxH - this.hostH)/2;
$(".host").css({
left:x,
top:y
})
},
appendQuest:function(array,n){
var box = $("#"+this.id);
var guests="";
var that = this;
for(var i=0; i<array[n].friend.length; i++){
guests+="<span class='guest'>"+array[n].friend[i].name+"</span>";
}
$(guests).appendTo(box);
$(".guest").live("click",function(){
that.move(that,this);
})
this.postQuest();
},
postQuest:function(){
var guests = $(".guest");
var that = this;
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).top
}).attr("angle",i/guests.length)
})
},
setQuestPose:function(n,r,i,w,h,d){//n代表共幾個(gè)對(duì)象 r代表周長(zhǎng) i代表第幾個(gè)對(duì)象 w代表外面對(duì)象的寬帶 h代表外面對(duì)象的高度 d代表其實(shí)角度
var p = i/n*Math.PI*2+Math.PI*2*d;
var x = r * Math.cos(p);
var y = r * Math.sin(p);
return {
"left":parseInt(this.boxW/2+ x - w/2),
"top":parseInt(this.boxH/2 + y - h/2)
}
},
appendRelationShip:function(array,n){
var box = $("#"+this.id);
var relation="";
for(var i=0; i<array[n].friend.length; i++){
relation+="<span class='relationship'>"+array[n].friend[i].relationship+"</span>";
}
box.append(relation);
this.postRelationShip();
},
postRelationShip:function(){
var guests = $(".relationship");
var that = this;
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).top
})
})
},
move:function(t,i){
var n = $(".guest").index($(i));
this.angle = parseFloat($(i).attr("angle"))+0.5;
this.delect(n);
this.moveHost(i);
this.moveQuest(i);
this.moveRelationship(i);
this.changeClass();
setTimeout(function(){t.newAppend(i)},500);
},
newAppend:function(i){
this.newAppendGuest(i,"guest","name",this.guestW,this.guestH,this.radius);
this.newAppendGuest(i,"relationship","relationship",this.relationW,this.relationH,this.radius/2);
},
newAppendGuest:function(i,className,name,w,h,r){
var host = $(i).html();
var guest = $(".guest").html();
var box = $("#"+this.id);
var that = this;
var next=0;
for(var i=0; i<this.array.length; i++){
if(host == this.array[i].name){
for(var j=0;j<this.array[i].friend.length; j++){
if(guest !== this.array[i].friend[j].name){
next++;
var guests ="<span class='"+className+"'>"+this.array[i].friend[j][name]+"</span>";
$(guests).appendTo(box).css({
left:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).left,
top:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).top
}).attr("angle",that.angle+next/this.array[i].friend.length).hide().fadeIn(1000);
}
}
}
}
},
moveHost:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2;
var hTop = parseInt($(".host").css("top")) + this.hostH/2;
var gLeft = parseInt($(i).css("left")) + this.guestW/2;
var gTop = parseInt($(i).css("top")) + this.guestH/2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.guestW/2)+"px";
var top = (hTop - t - this.guestH/2)+"px";
this.animate(".host",left,top);
},
moveRelationship:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2;;
var hTop = parseInt($(".host").css("top")) + this.hostH/2;
var gLeft = parseInt($(".relationship").css("left")) + this.relationW/2;
var gTop = parseInt($(".relationship").css("top")) + this.relationH/2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.relationW/2)+"px";
var top = (hTop - t - this.relationH/2)+"px";
this.animate(".relationship",left,top);
},
moveQuest:function(i){
var left = $(".host").css("left");
var top = $(".host").css("top");
this.animate(i,left,top);
},
delect:function(n){
$(".guest").slice(0,n).remove();
$(".guest").slice(1).remove();
$(".relationship").slice(0,n).remove();
$(".relationship").slice(1).remove();
},
animate:function(i,left,top){
$(i).animate({
left:left,
top:top
},500);
},
changeClass:function(){
var that =this;
$(".guest").addClass("abcdef").removeClass("guest");
$(".host").addClass("guest").removeClass("host").attr("angle",that.angle);
$(".abcdef").addClass("host").removeClass("abcdef").attr("angle",null);
}
}
$(document).ready(function(){
relation.init(relationName,0)
})
</script>
</head>
<body>
看不到效果，刷新一下就可以了；<br>
<div id="box"></div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
- jquery簡(jiǎn)單實(shí)現(xiàn)帶漸顯效果的選項(xiàng)卡菜單代碼
- jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
- jquery漸隱漸顯的圖片幻燈閃爍切換實(shí)現(xiàn)方法
- jQuery頁(yè)面圖片伴隨滾動(dòng)條逐漸顯示的小例子
- jquery 圖片Silhouette Fadeins漸顯效果
- jQuery動(dòng)態(tài)效果顯示人物結(jié)構(gòu)關(guān)系圖的方法
- jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的彈出層效果代碼
相關(guān)文章
jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03
修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法
為什么我不直接用modal form來(lái)做呢？所以我就做了個(gè)jquery下面dialog的插件，需要引用原來(lái)dialog的文件。2010-09-09
針對(duì)jquery性能優(yōu)化這個(gè)主題，想必大家都有所了解。下面是我搜集點(diǎn)一點(diǎn)資料關(guān)于jquery性能優(yōu)化，大家可以參考參考。2014-05-05
jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒
XSS指的是跨站腳本攻擊,比如人們常說(shuō)的向$傳入字符串或者字符串轉(zhuǎn)換可執(zhí)行函數(shù)等一些安全方面值得注意的細(xì)節(jié),下面就為大家整理了jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒2016-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
這篇文章主要介紹了JQuery EasyUI datagrid 添加、修改、刪除操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開(kāi)發(fā)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget
這篇文章介紹了jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要是對(duì)使用jquery操作iframe的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
Jquery Easyui驗(yàn)證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12