js高手的作品
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-type"content="text/javascript;charset=utf-8">
<metaname="Author"content="hongru.chenhr">
<metaname="keywords"content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网"/>
<metaname="description"content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！"/>
<title>站长特效js高手制作的一个动画拖动效果，站长特效网</title>
<styletype="text/css">
html{
overflow:hidden;
}
body{
margin:0px;
padding:0px;
background:#222;
position:absolute;
width:100%;
height:100%;
}
#screen{
position:absolute;
left:6%;
top:10%;
width:88%;
height:80%;
background:#000;
overflow:hidden;
cursor:default;
}
#title{
position:absolute;
font-family:verdana;
width:100%;
font-size:7em;
font-weight:bold;
color:#181818;
text-align:center;
z-index:0;
}
</style>
<scripttype="text/javascript">
var__SVG=false;
var__svgNS=false;
if(document.createElementNS){
__svgNS="http://www.w3.org/2000/svg";
__svg=document.createElementNS(__svgNS,"svg");
__SVG=(__svg.x!=null);
}
if(__SVG){
/*=============SVG==============*/
vectorGraphics=function(o,antialias){
this.canvas=document.createElementNS(__svgNS,"svg");
this.canvas.style.position="absolute";
o.appendChild(this.canvas);
this.createLine=function(w,col,linecap){
varo=document.createElementNS(__svgNS,"line");
o.setAttribute("shape-rendering",antialias?"auto":"optimizeSpeed");
o.setAttribute("stroke-width",Math.round(w)+"px");
if(col)o.setAttribute("stroke",col);
if(linecap)o.setAttribute("stroke-linecap",linecap);
o.move=function(x1,y1,x2,y2){
this.setAttribute("x1",Math.round(x1)+.5);
this.setAttribute("y1",Math.round(y1));
this.setAttribute("x2",Math.round(x2));
this.setAttribute("y2",Math.round(y2));
}
o.color=function(c){this.setAttribute("stroke",c);}
o.RGBcolor=function(R,G,B){this.setAttribute("stroke","rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")");}
o.stroke_weight=function(s){this.setAttribute("stroke-width",Math.round(s)+"px");}
this.canvas.appendChild(o);
returno;
}
this.createPolyline=function(w,points,col,fill){
varo=document.createElementNS(__svgNS,"polyline");
o.setAttribute("shape-rendering",antialias?"auto":"optimizeSpeed");
o.setAttribute("stroke-width",Math.round(w));
if(col)o.setAttribute("stroke",col);
o.setAttribute("fill",fill?fill:"none");
if(points)o.setAttribute("points",points);
o.move=function(points){
this.setAttribute("points",points);
}
this.canvas.appendChild(o);
returno;
}
this.createOval=function(diam,filled){
varo=document.createElementNS(__svgNS,"circle");
o.setAttribute("shape-rendering",antialias?"auto":"optimizeSpeed");
o.setAttribute("stroke-width",0);
o.setAttribute("r",Math.round(diam/2));
o.style.cursor="pointer";
o.move=function(x1,y1,radius){
this.setAttribute("cx",Math.round(x1));
this.setAttribute("cy",Math.round(y1));
this.setAttribute("r",Math.round(radius));
}
o.stroke_color=function(col){this.setAttribute("stroke",col);}
o.fill_color=function(col){this.setAttribute("fill",col);}
o.stroke_weight=function(sw){this.setAttribute("stroke-width",sw);}
this.canvas.appendChild(o);
returno;
}
}
}elseif(document.createStyleSheet){
/*=============VML==============*/
vectorGraphics=function(o,antialias){
document.namespaces.add("v","urn:schemas-microsoft-com:vml");
varstyle=document.createStyleSheet();
varVMLel=['line','stroke','polyline','fill','oval'];
for(vari=0,l=VMLel.length;i<l;i++){
style.addRule('v\\:'+VMLel[i],"behavior:url(#default#VML);");
style.addRule('v\\:'+VMLel[i],"antialias:"+antialias+";");
}
this.canvas=o;
this.createLine=function(w,col,linecap){
varo=document.createElement("v:line");
o.strokeweight=Math.round(w)+"px";
if(col)o.strokecolor=col;
o.move=function(x1,y1,x2,y2){
this.to=(Math.round(x1)+.5)+","+Math.round(y1);
this.from=Math.round(x2)+","+Math.round(y2);
}
o.color=function(c){this.strokecolor=c;}
o.RGBcolor=function(R,G,B){this.strokecolor="rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")";}
o.stroke_weight=function(s){this.strokeweight=Math.round(s)+"px";}
if(linecap){
s=document.createElement("v:stroke");
s.endcap=linecap;
o.appendChild(s);
}
this.canvas.appendChild(o);
returno;
}
this.createPolyline=function(w,points,col,fill){
varo=document.createElement("v:polyline");
o.strokeweight=Math.round(w)+"px";
if(col)o.strokecolor=col;
o.points=points;
if(fill)o.fillcolor=fill;
else{
s=document.createElement("v:fill");
s.on="false";
o.appendChild(s);
}
o.move=function(points){
this.points.value=points;
}
this.canvas.appendChild(o);
returno;
}
this.createOval=function(diam,filled){
varo=document.createElement("v:oval");
varos=o.style;
os.position="absolute";
os.cursor="pointer";
o.strokeweight=1;
o.filled=filled;
os.width=Math.round(diam)+"px";
os.height=Math.round(diam)+"px";
o.move=function(x1,y1,radius){
os.left=Math.round(x1-radius)+"px";
os.top=Math.round(y1-radius)+"px";
os.width=Math.round(radius*2)+"px";
os.height=Math.round(radius*2)+"px";
}
o.stroke_color=function(col){this.strokecolor=col;}
o.fill_color=function(col){this.fillcolor=col;}
o.stroke_weight=function(sw){this.strokeweight=sw;}
this.canvas.appendChild(o);
returno;
}
}
}else{
/*====noscript====*/
vectorGraphics=function(o,i){
returnfalse;
}
}
</script>
<scripttype="text/javascript">
/*====Vectorconstructor====*/
functionVector(x,y){this.x=x;this.y=y;}
Vector.prototype.equ=function(vector,x,y){this.x=vector.x||x||0;this.y=vector.y||y||0;}
Vector.prototype.add=function(vector,x,y){this.x+=vector.x||x||0;this.y+=vector.y||y||0;}
/*====ragdollscript====*/
varragdoll=function(){
/*----privatevars----*/
varsvg;
varscr;
varxm=0;
varym=0;
varnw=0;
varnh=0;
varzoom=1.5;
vardragDoll=false;
varxd=0;
varyd=0;
vardolls=[];
varnodes=[];
varnBlood=100;
varblood=[];
varcollisions=[];
varinitScript=function(){
/*----bloodreserve----*/
for(vari=0;i<nBlood;i++)blood.push(newBlood());
/*----presetcollisionstable----*/
for(vari=0;i<dolls.length;i++){
for(varj=0;j<i;j++){
if(i!=j){
varo1=dolls[i];
varo2=dolls[j];
for(vari1=0,n1;n1=o1.nodes[i1++];){
for(vari2=0,n2;n2=o2.nodes[i2++];){
if(n1.testCol==1&&n2.testCol==1){
collisions.push({
n1p:n1.pos,
n1o:n1.oBody.pos,
n2p:n2.pos,
n2o:n2.oBody.pos,
n2s:newVector(0,0),
r:((n1.size*.5)+(n2.size*.5))/n1.h2Body,
m2:n1.mass/(n1.mass+n2.mass),
m1:n2.mass/(n1.mass+n2.mass)
});
}
}
}
}
}
}
}
////////////////////////////////////////////////////////////////////////////
/*====DOMevents====*/
functionaddEvent(o,e,f){
if(window.addEventListener)o.addEventListener(e,f,false);
elseif(window.attachEvent)r=o.attachEvent('on'+e,f);
}
/*====screendimensions====*/
functionresize(){
nw=scr.offsetWidth||0;
nh=scr.offsetHeight||0;
}
varinitEvents=function(){
/*----mousemoveevent----*/
addEvent(document,'mousemove',function(e){
if(window.event)e=window.event;
xm=e.clientX;
ym=e.clientY;
});
/*----mouseupevent----*/
addEvent(document,'mouseup',function(){
if(dragDoll&&document.releaseCapture)dragDoll.dragNode.o.releaseCapture();
scr.style.cursor="default";
dragDoll=false;
returnfalse;
});
/*----screenresizeevent----*/
resize();
addEvent(window,'resize',resize);
}
////////////////////////////////////////////////////////////////////////////
/*====bloodconstructor====*/
varBlood=function(){
this.o=svg.createLine(6*zoom,"#F00","round");
this.o.move(-99,-99,-99,-99);
this.pos=newVector(0,0);
this.vel=newVector(0,0);
this.bloody=false;
this.W=0;
}
Blood.prototype.start=function(x,y,vx,vy){
this.pos.equ(false,x,y);
this.vel.equ(false,vx,vy);
this.bloody=true;
}
Blood.prototype.anim=function(){
this.vel.x*=.96;
this.vel.y*=.96;
this.pos.add(this.vel);
if(Math.abs(this.vel.x)+Math.abs(this.vel.y)>1){
this.o.move(
this.pos.x,this.pos.y,
this.pos.x+this.vel.x,this.pos.y+this.vel.y
);
this.W=parseInt(document.getElementById('red').style.width)+1;
document.getElementById('red').style.width=this.W+'px';
//if(this.W>=2000){document.getElementById('red').style.width='0px';}
}else{
this.o.move(-99,-99,-99,-99);
this.bloody=false;
}
}
////////////////////////////////////////////////////////////////////////////
/*====Dollconstructor====*/
varDoll=function(x,y,structure){
this.nodes=[];
/*====Nodeconstructor====*/
this.Node=function(doll,p){
this.parent=doll;
this.oBody=p[1];
this.oSpring=p[3];
this.hBody=p[2]*p[2]*zoom*zoom;
this.h2Body=p[2]*zoom;
this.hSpring=p[4]*p[4]*zoom*zoom;
this.size=p[5]*zoom;
this.pos=newVector(x+Math.random(),y);
this.old=newVector(x+Math.random(),y);
this.vel=newVector(0,0);
this.mass=p[6];
this.ind=p[0];
this.bloody=p[8];
this.testCol=p[9];
this.o=svg.createLine(this.size,p[7],"round");
this.s=false;
this.o.style.cursor="pointer";
this.o.parent=this;
this.barW=0;
/*----dragevents----*/
this.o.onselectstart=function(){returnfalse;}
this.o.ondrag=function(){returnfalse;}
this.o.onmousedown=function(){
dragDoll=this.parent.parent;
dragDoll.dragNode=this.parent;
xd=dragDoll.dragNode.pos.x-xm;
yd=dragDoll.dragNode.pos.y-ym;
scr.style.cursor="pointer";
if(this.setCapture)this.setCapture();
returnfalse;
}
/*====maintaintables====*/
doll.nodes[this.ind]=this;
nodes.push(this);
}
/*====bloodsplash====*/
this.Node.prototype.bounce=function(val){
if(this.bloody)
if(this.vel.x*this.vel.x+this.vel.y*this.vel.y>zoom)
for(vari=2;i<2+Math.random();i+=.25)
if(ragdoll.eBlood)
blood[Math.floor(Math.random()*nBlood)].start(this.pos.x,this.pos.y,.001-this.vel.x*zoom*i,.001-this.vel.y*zoom*i);
this.old.equ(this.pos);
returnval;
}
/*====solvingconstraintsbyrelaxation====*/
this.Node.prototype.satisfyConstraints=function(that,len){
vardx=that.pos.x-this.pos.x;
vardy=that.pos.y-this.pos.y;
vardelta=len/(dx*dx+dy*dy+len)-.5;
varm1=(this.mass+that.mass)*ragdoll.flexibility;
varm2=this.mass/m1;
m1=that.mass/m1;
this.pos.add(false,-m1*dx*delta,-m1*dy*delta);
that.pos.add(false,m2*dx*delta,m2*dy*delta);
}
/*====Graphicrendering====*/
this.Node.prototype.rendering=function(){
/*----body----*/
if(this.size)this.o.move(
this.pos.x,this.pos.y,
this.oBody.pos.x,this.oBody.pos.y
);
/*----springs----*/
if(this.s)
this.s.move(
this.pos.x,this.pos.y,
this.oSpring.pos.x,this.oSpring.pos.y
);
}
/*====VerletIntegration====*/
this.Node.prototype.verlet=function(){
this.vel.x=(ragdoll.viscosity*(this.pos.x-this.old.x))||1;
this.vel.y=(ragdoll.viscosity*(this.pos.y-this.old.y)+ragdoll.gravity)||1;
this.old.equ(this.pos);
this.pos.add(this.vel);
/*---testborders---*/
if(this.testCol){
varsize=this.size*.5;
if(this.pos.x<size)this.pos.x=this.bounce(size);
elseif(this.pos.x>nw-size)this.pos.x=this.bounce(nw-size);
if(this.pos.y<size)this.pos.y=this.bounce(size);
elseif(this.pos.y>nh-size)this.pos.y=this.bounce(nh-size);
}
/*---Constraint---*/
if(this!=this.oSpring)this.satisfyConstraints(this.oSpring,this.hSpring);
if(this!=this.oBody)this.satisfyConstraints(this.oBody,this.hBody);
}
/*====createspringsdisplay====*/
this.Node.prototype.dispSpring=function(){
if(ragdoll.eSprings){
/*----createspringline----*/
this.s=svg.createLine(1,"#0F0","");
this.s.onselectstart=function(){returnfalse;}
this.s.ondrag=function(){returnfalse;}
this.s.o=this;
this.s.onmousedown=function(){
this.o.o.onmousedown();
returnfalse;
}
}else{
/*----clearDOM----*/
this.s.parentNode.removeChild(this.s);
this.s=false;
}
}
/*====createNodes====*/
for(vari=0,p;p=structure[i++];)newthis.Node(this,p);
for(vari=0,o;o=this.nodes[i++];){
o.oBody=this.nodes[o.oBody];
o.oSpring=this.nodes[o.oSpring];
}
}
////////////////////////////////////////////////////////////////////////////
/*====determineSegmentIntersection====*/
varsegmentsIntersection=function(p1,p2,p3,p4){
vardn=((p4.y-p3.y)*(p2.x-p1.x))-((p4.x-p3.x)*(p2.y-p1.y));
if(dn){
varna=((p4.x-p3.x)*(p1.y-p3.y))-((p4.y-p3.y)*(p1.x-p3.x));
varnb=((p2.x-p1.x)*(p1.y-p3.y))-((p2.y-p1.y)*(p1.x-p3.x));
varua=na/dn;
varub=nb/dn;
if(ua>=0&&ua<=1&&ub>=0&&ub<=1)returnua;
}
returnfalse;
}
////////////////////////////////////////////////////////////////////////////
/*====mainloop====*/
varrun=function(){
/*---dragnode---*/
if(dragDoll){
dragDoll.dragNode.pos.x+=(xm+xd-dragDoll.dragNode.pos.x)*.2;
dragDoll.dragNode.pos.y+=(ym+yd-dragDoll.dragNode.pos.y)*.2;
}
/*----dolls----*/
for(vari=0,o;o=nodes[i++];)o.verlet();
for(vari=0,o;o=nodes[i++];)o.rendering();
/*----blood----*/
for(vari=0,o;o=blood[i++];)if(o.bloody)o.anim();
/*----collisionsbtwdolls----*/
if(ragdoll.collision){
for(vari=0,o;o=collisions[i++];){
o.n2s.x=o.n2p.x-(o.n2o.x-o.n2p.x)*o.r;
o.n2s.y=o.n2p.y-(o.n2o.y-o.n2p.y)*o.r;
varua=segmentsIntersection(o.n1p,o.n1o,o.n2s,o.n2o);
if(ua!=false){
/*----bounce----*/
varix=ua*(o.n2o.x-o.n2p.x)*ragdoll.collision;
variy=ua*(o.n2o.y-o.n2p.y)*ragdoll.collision;
o.n1o.x-=ix*o.m1;
o.n2o.x+=ix*o.m2;
o.n1o.y-=iy*o.m1;
o.n2o.y+=iy*o.m2;
}
}
}
setTimeout(run,16);
}
return{
////////////////////////////////////////////////////////////////////////////
/*====PUBLICparameterssetup====*/
viscosity:.999,
flexibility:3,
gravity:.1,
collision:.05,
eBlood:true,
eSprings:false,
dispSprings:function(){
this.eSprings=!this.eSprings;
for(vari=0,o;o=nodes[i++];)o.dispSpring();
},
/*====initializescript====*/
init:function(){
addEvent(window,'load',function(){
/*----initSVG/VMLcanvas----*/
scr=document.getElementById("screen");
initEvents();
svg=newvectorGraphics(scr,true);
zoom=nh/250;
/*----syntax----*/
//dolls.push(newDoll(ragdoll_init_pos_x,ragdoll_init_pos_y,[
//[node_ind,node_parent_ind,node_length,node_spring_parent_ind,spring_length,node_width,node_mass,node_color,blood_on_off,collisions_on_off],
//note:declarenodesbyz-indexorder(paintingalgorithm)-thanksSVGfornotimplementingzIndexproperty!!!
/*----createragdoll----*/
dolls.push(newDoll(nw*.5,40,[
[1,0,3,7,80,10,1,"#888",0,0],
[5,3,20,1,60,8,1,"#888",0,1],
[6,4,20,1,60,8,1,"#888",0,1],
[3,1,20,4,40,10,1,"#FFF",1,1],
[4,1,20,2,40,10,1,"#FFF",1,1],
[9,7,30,2,80,8,2,"#888",0,1],
[10,8,30,2,80,8,2,"#888",0,1],
[7,2,30,8,30,13,1,"#F80",1,1],
[8,2,30,1,80,13,1,"#F80",1,1],
[2,1,30,3,40,20,2,"#FFF",1,1],
[0,0,35,2,60,35,1,"#888",1,1],
[11,1,1,2,25,0,1,"#000",0,0],
[12,11,25,11,25,5,1,"#444",0,0]
]));
initScript();
run();
});
}
}
}();
/*====startscript====*/
ragdoll.init();
</script>
</head>
<body>
<ahref="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，[email protected],用.net打造靓站-->
<divid="screen">
<divid="title"style="color:#0000FF">花多少时间折磨死他</div>
<divid="red"style="position:absolute;height:20px;background:red;width:20px"></div>
</div>
</body>
</html>