html星星连线特效代码,js实现飞入星星特效代码

本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考。

具体实现代码如下:

复制代码 代码如下:

星空极速飞入效果

xL=8;

xH=xW=xR=xE=xMY=xMX=xWd=xHd=0;

xF=new Array();

xY=new Array();

xX=new Array();

xS=new Array();

xA=new Array();

xB=new Array();

ini=new Array();

document.write('

');

for (i=0; i < xL; i++){

document.write('

.
');

}

document.write('

');

function Set(){

for (i=0; i < xL; i++){

transfer(i)

xF[i]=xW/14;

}

}

function Assign(){

sdiv.style.top=document.body.scrollTop;

for (i=0; i < xL; i++){

xF[i]-=xS[i]*25;

if (xF[i] < 4) xF[i]=3;

div[i].style.top =xY[i];

div[i].style.left=xX[i];

div[i].style.fontSize=xF[i];

}

}

function fly(){

xMY=window.document.body.clientHeight/2;

xMX=window.document.body.clientWidth/2;

xWd=Math.round(Math.random()*40+5);

xHd=Math.round(Math.random()*30+5);

for (i=0; i < xL; i++){

xY[i]=xA[i]+=(xMY-xA[i])*(xS[i]);

xX[i]=xB[i]+=(xMX-xB[i])*(xS[i]);

if ((xX[i] > xMX-xWd) && (xX[i] < xMX+xWd) && (xY[i] > xMY-xHd) && (xY[i] < xMY+xHd)){

transfer(i)

}

if ((xX[i]<0)||(xX[i]>xW)||(xY[i]<0)||(xY[i]>xH)){

xF[i]=xW/14;

}

}

Assign();

setTimeout('fly()',1);

}

function transfer(i){

xH=window.document.body.offsetHeight;

xW=window.document.body.offsetWidth;

xA[i]=Math.round(Math.random()*xH);

xB[i]=Math.round(Math.random()*xW);

xS[i]=Math.random()*0.05+0.05;

xR=Math.round(Math.random()*3);

xE=Math.round(Math.random()*50+50);

if (xR == 3) xB[i]=-xE;

if (xR == 2) xB[i]=xW+xE;

if (xR == 1) xA[i]=-xE;

if (xR == 0) xA[i]=xH;

}

Set();

fly();

希望本文所述对大家的javascript程序设计有所帮助

时间: 2014-10-16

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要用到d3.js库中的布局功能,具体来说是树状布局(tree layout)。具体的代码实现可以参考以下示例: ``` var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var root = { "name": "A", "children": [ { "name": "B", "children": [ { "name": "C" }, { "name": "D" } ] }, { "name": "E", "children": [ { "name": "F" }, { "name": "G" } ] } ] }; var nodes = tree.nodes(root), links = tree.links(nodes); var link = svg.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) node.append("circle") .attr("r", 4.5); node.append("text") .attr("dx", function(d) { return d.children ? -8 : 8; }) .attr("dy", 3) .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) .text(function(d) { return d.name; }); ``` 这个示例其实就是一个非常简单的树状结构,但是可以看到节点和节点之间是通过直线相连接的。具体来说,需要用到d3.layout.tree()这个函数进行树状布局,再用到d3.svg.diagonal()这个函数来定义连接线的路径,最后通过d3.selectAll()以及.data()等函数将节点和线条加入进去即可。需要注意的是,在节点连接线这一部分的代码当中,attr函数中的参数d以及diagonal函数中的参数d都表示一个节点在树状结构中的位置,需要根据实际情况加以理解。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值