`
xianbin
  • 浏览: 215854 次
  • 来自: ...
社区版块
存档分类
最新评论

javascript 动态显示家庭人物结构关系图

javascript家庭成员家庭关系 
阅读更多 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript动态人物关系结构图</title>
<style>
#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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
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:"娱乐圈"},
                {name:"成龙",relationship:"激吻"},
                {name:"黄立行",relationship:"电影"}]
        },
        {name:"方大同",friend:[
                {name:"房祖名",relationship:"情敌"},
                {name:"薛凯琪",relationship:"否认拍拖"},
                {name:"林宥嘉",relationship:"歌手"},
                {name:"韩庚",relationship:"演唱会"}]
        },
        {name:"薛凯琪",friend:[
                {name:"方大同",relationship:"否认拍拖"},
                {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){//传入参数1：数组 参数2：第几个
                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:代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度
                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>
<div id="box"></div>
</body>
</html>
<p>查找更多代码，请访问：<a href="http://www.18sucai.com" target="_blank">18素材</a></p>
分享到：
| Jquery EasyUI中级篇
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    echarts人物关系图

    在众多图表类型中，人物关系图是一种用于展示人际关系、组织结构或网络连接的特殊图表，常用于社交网络分析、组织架构展示等领域。本篇将详细介绍如何利用ECharts生成人物关系图。 **一、力导向图与人物关系图** ...

    人物家庭网站模板

    【人物家庭网站模板】是一种专为展示个人或家庭生活、活动和故事而设计的网站模板。这类模板通常具有温馨、亲切的设计风格，旨在通过视觉效果和布局，将访客带入一个富有情感色彩的网络空间。它适用于创建个人博客、...

    家庭网站模板

    例如，家庭相册可能使用JavaScript实现图片轮播效果，增加用户体验。同时，响应式设计也是现代模板不可或缺的一部分，确保网站在不同设备（手机、平板、电脑）上都能良好显示。 在压缩包"boxedart133"中，可能包含...

    8紫白简约儿童培训产品代理交互动态网站模版.rar

    6. **图片和图形**：儿童培训产品代理网站可能会用到许多教育相关的图片和图形，如卡通人物、教学工具、课程图标等，这些都需要优化以保证快速加载，并且在不同浏览器和设备上都能正确显示。 7. **SEO优化**：对于...

    亲属关系

    在处理"亲属关系"这一主题时，还可以结合JavaScript或jQuery等技术实现动态交互，如点击某个家庭成员时显示其详细信息，或者使用拖放功能重新排列家庭树的结构。 在"affliate-main"这个文件名中，"affiliate"通常指...

    FamilyEmoji：:man_dark_skin_tone:‍:woman_medium-dark_skin_tone:‍:girl_medium_skin_tone:‍:boy_light_skin_tone:将您的家人重新创建为表情符号ZWJ序列

    总结来说，"FamilyEmoji"项目利用了Unicode的ZWJ序列技术和JavaScript编程，为用户提供了一种创新的方式，让他们能够个性化地表达家庭关系，同时也展示了Web技术在提高用户体验和互动性方面的强大能力。通过深入研究...

    OregonTrail:基于简单文本的Oregon Trail游戏

    JavaScript作为游戏的主要开发语言，是Web开发中最常用的脚本语言，具有轻量级、跨平台和动态性等特点。在《俄勒冈足迹》游戏中，JavaScript负责处理游戏逻辑、用户交互以及图形界面的更新。开发者可能使用了DOM...

    韩国卡通乐园网站模板

    通常，这种模板会包括首页、关于我们、服务介绍、卡通人物展示、新闻更新、活动日程、联系我们等常见页面结构，以便于展示各种信息和服务。 在技术实现上，这些模板可能基于HTML5、CSS3和JavaScript，以确保在现代...

Magicbox
Global site tag (gtag.js) - Google Analytics