帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 一例动态效果显示的人物结构的关系图的文字特效
一例动态效果显示的人物结构的关系图的文字特效
浏览:855次
-
评论:1次
-
发布时间:2019-08-23
Html
Css
Js
#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}
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 ="
"+array[n].name+"
"; 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[i].name+""; } $(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[i].relationship+""; } 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[i].friend[j][name]+""; $(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) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.8.3
<!doctype html><html><head><meta charset="utf-8"><title>一例动态效果显示的人物结构的关系图的文字特效-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:一例动态效果显示的人物结构的关系图的文字特效 一个人物关系图,动态展示,效果非常漂亮的一款网页特效
一个人物关系图,动态展示,效果非常漂亮的一款网页特效
线上无法显示,请下载附件本地演示
动态文本文字TAG标签随机变换排列显示的JS特效代码
鼠标点击数字可以实现三栏式文字表格轮播特效展示
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv7 码师
qq***43
2019年12月26日
这么6啊
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
855
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值