<!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>Untitled Document</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 src="http://www.zhangxinxu.com/study/js/jquery.corner.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)
$("span").corner("round60px");
})
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
相关推荐
【标题】：“jQuery HTML5三维线性人物关系图特效代码” 在现代网页设计中，可视化数据已经成为一种重要的信息展示方式，特别是在复杂的人物关系或者组织结构的呈现上。"jQuery HTML5三维线性人物关系图特效代码...
首先，CSS3提供了许多新的样式规则，其中圆角边框（border-radius）允许我们不借助图片就能创建圆角效果。在本实例中，导航条的每个按钮都通过设置border-radius属性实现了圆润的外观，这使得整体设计更加现代且易于...
在本实例中，我们将探讨如何利用 jQuery 来实现元素的圆角效果，包括层的圆角和背景的圆角。 首先，要实现 jQuery 圆角功能，我们需要理解 CSS3 的 border-radius 属性，这是原生支持元素圆角的关键。在 CSS3 中，...
【jQuery人物关系拓扑图代码.zip】是一个包含jQuery特效实现的人物关系展示的代码资源。这个压缩包中的核心是"jiaoben7637"文件，它可能是一个HTML、CSS和JavaScript组合的项目，用于创建一个交互式的人物关系拓扑图...
首先，`jquery.curvycorners.source.js`、`jquery.curvycorners.min.js` 和 `jquery.curvycorners.packed.js` 这三个文件是jQuery圆角边框插件的不同版本。`source.js` 是源代码文件，便于开发者查看和理解实现机制...
jQuery shutter.js圆角百叶窗图片轮播代码
在这个"jQuery缩略图突出圆角焦点图.zip"项目中，我们可以深入探讨一些核心知识点，包括jQuery、CSS、HTML5以及JavaScript在创建动态、美观的网页元素方面的应用。 首先，jQuery库是这个项目的基石。jQuery通过提供...
在这个案例中，"jquery插件集-圆角效果" 可能包含了一个用于设置元素圆角的函数，并将其绑定到了 jQuery 对象上，使得我们可以通过简单的 jQuery 选择器调用来应用这个效果。 要实现圆角效果，早期的浏览器并不支持...
**jQuery人物关系拓扑图代码**是用于展示和可视化人际关系或事物之间复杂关系的一种JavaScript实现。这个代码利用了流行的jQuery库以及HTML5的一些特性，提供了一种交互式的、直观的方式来呈现网络状的数据结构。在...
【jQuery手机环形圆角菜单效果】是一种在移动设备上实现的独特交互设计，它结合了jQuery库的强大功能和视觉上的吸引力。这种菜单设计通常用于触摸屏设备，为用户提供直观且有趣的导航体验。以下是对这个主题的详细...
### 使用jQuery实现图片圆角效果 #### 背景与目的 在网页设计中，为了增强用户体验和美观性，开发者经常需要对图片进行各种样式处理，其中“圆角”效果是一种非常受欢迎的设计元素。传统的CSS圆角技术在某些浏览器...
"JQUERY CSS3 文本圆角 光晕效果"是一个利用这两种技术实现的高级网页元素美化方法，主要关注文本框的外观设计。在支持CSS3的现代浏览器中，这种效果可以显著提升网站的美感和用户体验。 首先，让我们详细了解一下...
在本主题中，我们将探讨如何使用jQuery库来实现一个div元素的圆角效果，同时也会涉及到其他边框效果的实现。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。 首先，让我们...
而`jquery.corners.js`则是jQuery圆角插件的主要脚本，它包含实现圆角效果的函数和逻辑。 在页面中引入这些文件后，可以通过jQuery选择器选取需要添加圆角效果的元素，并调用`.corners()`方法来应用插件。例如： `...
【jQuery人物图片拼图游戏代码】是一个基于JavaScript库jQuery实现的互动游戏，旨在提供一种娱乐方式，同时让学习者了解和实践DOM操作、事件处理以及简单的动画效果。在这个游戏中，玩家需要将打乱的人物图片拼回...
无图片，无CSS的JQuery脚本，支持1.3+以上的版本
在CSS3之前，创建圆角效果通常需要复杂的图片切片或使用JavaScript，而jQuery的圆角插件如`jquery.corners.js`则简化了这一过程。 `jquery.corners.js`是一个小巧而实用的jQuery插件，它通过动态添加CSS样式来实现...
在早期的Web开发中，CSS2无法直接创建圆角，所以开发者会利用JavaScript库如jQuery来实现这一功能。以下是对这个主题的详细知识解释： **jQuery插件**： jQuery插件是扩展jQuery功能的代码库，允许开发者轻松地添加...
"jQuery鼠标悬停图片震动特效"就是这样一种巧妙的技术应用，它结合了CSS3的圆角样式和jQuery库，实现了当鼠标悬停在图片上时，图片产生震动的视觉效果。这一特效不仅增加了交互性，还为网页增添了一丝趣味性。 首先...
jQuery的原型关系图是理解其内部工作原理的关键。在这个图中，我们可以看到对象之间的继承关系，以及jQuery如何扩展和利用JavaScript的原型链机制。 首先，让我们讨论JavaScript的原型（Prototype）概念。在...