改变世界的是这样一群人,他们寻找梦想中的乐园,当他们找不到时,他们亲手创造了它

粘人的小泥块源代码

1.js代码:

<script type="text/javascript">
    var i=void 0,p=!0,A=null,V=!1;
(function(){
  function Ca(){
    L=t*(0.105+0.895*((x-C)/(M-C)));
    L<W&&(L=W)}
  var Da,Ea;
  function Fa(a){
    this.p(a)}
  function Ga(a,b){
    this.V=[];
    this.height=32;
    this.a;
    this.z;
    this.da;
    this.m;
    this.t;
    this.O;
    this.w=p;
    this.K=-1;
    this.ua=p;
    this.p(b||{
    }
          );
    a.appendChild(this.a)}
  function X(a){
    this.u=a;
    this.ca=1;
    this.h=this.l=A;
    this.n=this.e=0;
    this.c=[];
    this.b=[];
    this.L=this.M=this.I=this.H=0;
    this.Da=2}
  function G(a){
    this.u=a;
    this.h=this.l=A;
    this.n=this.e=0;
    this.c=[];
    this.b=[];
    this.B=this.C=0}
  function sb(){
    var a=w,b=t;
    w=0.0375;
    t=22;
    setTimeout(function(){
      w=a;
      t=b}
               ,2500)}
  function Ha(a){
    N=a;
    1300>window.innerWidth&&(o=0.65+0.35*((window.innerWidth-950)/350));
    800>window.innerWidth&&(o=O);
    Y=!P;
    ca=da.match(/Firefox/i)?oa:Y?tb?ub:oa:vb;
    u&&wb();
    P&&xb();
    Q&&(document.body.style.overflow="visible",q("out").style.display="block",q("out").style.height=window.outerHeight+100+"px",q("stickyContainer").style.visibility="visible",Y=p,ca=oa,Ia=0.055,Ja=0.94,x=w=0.18,Ka=10,v=s=4);
    for(var a=La/(v-1),b=yb/(s-1),c=v*s;c--;){
      var d=c%v,e=Math.floor(c/
                             v),f;
      f=new zb;
      u||(f.i=-25-15*Math.random(),f.f=-5-5*Math.random());
      f.x=a*d+Ma;
      f.y=b*e+Na;
      f.fa=d;
      f.ta=e;
      if(0==d||d==v-1||0==e||e==s-1)f.ja=p,Ab.push(f);
      j[c]=f;
      var h;
      e<s-1&&(h=j[Math.floor((e+1)*v+d)],y.push(H(f,h)),y.push(H(h,f)));
      e<s-2&&(h=j[Math.floor((e+2)*v+d)],y.push(H(f,h)),y.push(H(h,f)));
      d<s-1&&(h=j[Math.floor(e*v+(d+1))],y.push(H(f,h)),y.push(H(h,f)));
      d<s-2&&(h=j[Math.floor(e*v+(d+2))],y.push(H(f,h)),y.push(H(h,f)))}
    D=j.length;
    Oa=0.5*D;
    l.push(j[0]);
    l.push(j[v-1]);
    l.push(j[D-1]);
    l.push(j[D-
             v]);
    Bb();
    Cb();
    Pa=V}
  function wb(){
    Qa=Ra=pa;
    ea=-2;
    v=s=5;
    x=0.07;
    C=0.0635;
    M=0.2;
    t=4.5;
    qa=10;
    Na=Ma=0;
    I=0.5;
    ra?(o=0.77,Z*=0.9,O*=0.75):(o=0.35,O=0.225,Z=0.85);
    Ca=function(){
      L=t*(0.35+0.65*((x-C)/(M-C)));
      L<W&&(L=W)};
    setTimeout(P?function(){
      for(var a=D;a--;){
        var b=j[a];
        b.x=0.5*$;
        b.y=0.35*fa;
        b.i=0;
        b.f=0}
    }
               :function(){
      for(var a=window.innerWidth<window.innerHeight,b=0.9*((a?window.innerWidth:window.innerHeight)/3/s),a=a?8:3,c=0.5*($-3*b),d=0.5*(fa-3*b),e=D;e--;){
        var f=j[e];
        f.x=c+b*f.fa;
        f.y=d+b*f.ta;
        f.f=-a-Math.random()*
          a}
      b=0.5<Math.random()?1:-1;
      j[0].f=(40+20*Math.random())*b;
      j[3].f=50*-b}
               ,50)}
  function xb(){
    ca=function(){
      return p}
  }
  function ga(){
    ha=V;
    Sa()}
  function Bb(){
    R=q("bigCanvas");
    sa=R.getContext("2d");
    var a=q("stickyContainer");
    Y?S=new X(a):(S=new G(a),a.addEventListener("mouseover",function(){
      ta=p}
                                                ,V),a.addEventListener("mouseout",function(){
      ta=V}
                                                                       ,V));
    S.p(N,v-1,s-1,sa)}
  function Cb(){
    u?Y?(R.addEventListener("touchstart",Ta,V),R.addEventListener("touchend",Ua,V),R.addEventListener("touchmove",Va,V)):(q("stickyContainer").addEventListener("touchstart",
Ta,V),q("stickyContainer").addEventListener("touchend",Ua,V),q("stickyContainer").addEventListener("touchmove",Va,V),document.addEventListener("touchmove",function(a){
      a.preventDefault()}
                                                                                                                                               ,V)):(document.addEventListener("mousedown",Wa,V),document.addEventListener("mouseup",ua,V),document.addEventListener("mousemove",Db,V));
    document.addEventListener("gesturestart",function(a){
      a.preventDefault();
      Xa=o}
                              ,V);
    document.addEventListener("gesturechange",function(a){
      if(!Ya||!g.w)a.preventDefault(),o=Xa+0.415*
        (a.scale-1),o=Math.min(Z,Math.max(o,O))}
                              ,V);
    document.addEventListener("gestureend",function(){
      localStorage.removeItem("stickything.scale");
      localStorage.setItem("stickything.scale",o)}
                              ,V);
    window.addEventListener("devicemotion",Eb,V);
    document.getElementById("options").addEventListener("click",Za,V);
    if(!u)for(var a=document.getElementsByTagName("a"),b=0;b<a.length;b++)a[b].addEventListener("mouseover",function(){
      aa=p}
                                                                                                ,V),a[b].addEventListener("mouseout",function(){
      aa=V}
                                                                                                                          ,V);
    document.onselectstart=function(){
      return V};
    document.body.addEventListener("orientationchange",T,V)}
  function Eb(a){
    if(15>$a)$a++;
    else{
      var a=a.accelerationIncludingGravity,b=0.1*a.x,a=0.1*a.y,c=2.65*ia,d=0.85*ia;
      switch(window.orientation){
        case -90:d*=b;
          b=a*c;
          break;
        case 90:d*=-b;
          b=-a*c;
          break;
        case 180:b=-b*c;
          d*=a;
          break;
        default:b*=c,d*=-a}
      ab=b;
      u&&(I=d)}
  }
  function ub(){
    return 0<sa.getImageData(E-1,F-1,1,1).data[0]}
  function oa(){
    var a=bb(l);
    return E>a.x-2&&E<a.x+a.width+2&&F>a.y-2&&F<a.y+a.height+2}
  function vb(){
    return ta}
  function H(a,b){
    var c=new Fb;
    c.pa=a;
    c.qa=b;
    var d=b.x-a.x,e=b.y-a.y;
    c.length=Math.sqrt(d*d+e*e);
    c.s=Math.atan2(e,d);
    c.color=16777215*Math.random();
    return c}
  function Sa(){
    if(!ha){
      var a=(new Date).getTime(),b=a-cb;
      cb=a;
      if(33>b&&!va)va=p;
      else{
        va=V;
        Pa&&(db=window.screenX-eb,fb=window.screenY-gb,eb=window.screenX,gb=window.screenY);
        ja=ca();
        wa||(a=ka>0.8*D,!hb(l)||a?la++:la=0,30<la&&(la=0,ib()));
        a=C+0.75*(M-C);
        x=U&&0==ba&&w<a?a:w;
        xa=U&&0==ba?0.94:1;
        Ca();
        jb();
        kb();
        jb();
        kb();
        for(a=D;a--;)S.c[a][0]=j[a].x,S.c[a][1]=j[a].y;
        S.sa();
        u||(a=
            "",a=U?Qa:ja&&!aa?Ra:pa,a!=ya&&(ya=a,document.body.style.cursor=ya))}
      requestAnimFrame(Sa)}
  }
  function jb(){
    for(var a=y.length;a--;){
      var b=y[a],c=b.pa,d=b.qa,e=d.x-c.x,f=d.y-c.y,h=lb(b.s+c.s),J=(d.x-(c.x+Math.cos(h)*b.length*o))*x,h=(d.y-(c.y+Math.sin(h)*b.length*o))*x,g=0.5*(Math.abs(J)+Math.abs(h))>L;
      u&&U&&(g=p);
      if(!c.q||g)e=Math.atan2(f,e),c.q=V,c.j+=J,c.k+=h,c.x+=J*ma,c.y+=h*ma,c.G+=lb(e-(b.s+c.s))*Ia,c.s+=c.G;
      if(!d.q||g)d.q=V,d.j-=J,d.k-=h,d.x-=J*ma,d.y-=h*ma}
  }
  function kb(){
    ba=ka=0;
    for(var a=j.length;a--;){
      var b=
          j[a];
      if(b.Z){
        var c=E-b.x,d=F-b.y,e=Math.sqrt(c*c+d*d)||1.0E-4,f=b.$?0.5:0.15;
        b.j+=c/e*e*f;
        b.k+=d/e*e*f;
        b.q=V}
      if(b.q)if(ka++,ba<Oa){
        ba++;
        continue}
        else b.q=V;
      b.i*=xa;
      b.f*=xa;
      b.j+=ab;
      b.k+=I;
      b.j+=-mb*b.i;
      b.k+=-mb*b.f;
      b.G*=Ja;
      b.i+=b.j;
      b.f+=b.k;
      b.j=0;
      b.k=0;
      b.x-=0.5*db;
      b.y-=0.5*fb;
      b.i>K&&(b.i=K);
      b.i<-K&&(b.i=-K);
      b.f>K&&(b.f=K);
      b.f<-K&&(b.f=-K);
      var c=b.x+b.i,d=b.y+b.f,f=e=V,h=ea,J=$-ea,g=ea,k=fa-ea;
      c>J&&(e=p,c=J);
      c<h&&(e=p,c=h);
      d>k&&(f=p,d=k);
      d<g&&(f=p,d=g);
      (e||f)&&ka++;
      (h=(e||f)&&ba<0.25*D)?(b.i=0,b.f=0,
                             b.G=0,e&&(b.x=c),f&&(b.y=d)):(b.x=c,b.y=d);
      b.q=h}
  }
  function ib(){
    setTimeout(function(a,b,c,d){
      x=a;
      t=b;
      o=c;
      I=d;
      wa=V;
      hb(l)||ib()}
               ,450,x,t,o,I);
    x=0.8*M;
    t=0;
    o*=1.05;
    ua();
    T();
    wa=p;
    for(var a=bb(l),b=a.x+0.5*a.width,c=a.y+0.5*a.height,d=Number.MAX_VALUE,e,f=l.length;f--;){
      var h=l[f],a=h.x-b,h=h.y-c,a=Math.sqrt(a*a+h*h);
      a<d&&(d=a,e=f,l[e].y-=170)}
    b=(400+100*Math.random())*o;
    a=l.length;
    c=0==e?a-1:e-1;
    d=(e+1)%a;
    a=l[d].x-l[c].x;
    h=l[d].y-l[c].y;
    a=Gb(l[c].x+0.5*a,l[c].y+0.5*h,l[e].x,l[e].y,b);
    l[e].x=a.Qa;
    l[e].y=
      a.Ra}
  function Wa(){
    if(ja&&!aa){
      U=p;
      for(var a,b=[],c=j.length;c--;){
        a=j[c];
        var d=E-a.x,e=F-a.y;
        b[c]={
          oa:a,ha:Math.sqrt(d*d+e*e)}
      }
      b.sort(Hb);
      a=b[0].oa;
      a.$=p;
      d=a.ja?5:9;
      for(c=-1;++c<d;)a=b[c].oa,a.Z=p,a.Ta=E-a.x,a.Ua=F-a.y}
  }
  function ua(){
    if(U){
      for(var a=j.length;a--;)j[a].Z=V,j[a].$=V;
      U=V}
  }
  function Db(a){
    a=a?a:window.event;
    E=a.clientX;
    F=a.clientY}
  function T(){
    u&&1!=document.body.scrollTop&&window.scrollTo(0,1);
    $=window.innerWidth;
    fa=window.innerHeight;
    for(var a=j.length;a--;)j[a].q=V;
    R.width=$;
    R.height=
      fa}
  function Ta(a){
    1==a.touches.length&&(E=a.touches[0].pageX,F=a.touches[0].pageY,3!=a.target.nodeType&&(a.preventDefault(),Y&&(ja=ca()),Wa()))}
  function Ua(a){
    3!=a.target.nodeType&&(a.preventDefault(),ua())}
  function Va(a){
    1==a.touches.length&&(a.preventDefault(),E=a.touches[0].pageX,F=a.touches[0].pageY)}
  function bb(a){
    for(var b=1E5,c=-1E5,d=1E5,e=-1E5,f=a.length;f--;){
      var h=a[f];
      h.x<b&&(b=h.x);
      h.x>c&&(c=h.x);
      h.y<d&&(d=h.y);
      h.y>e&&(e=h.y)}
    return{
      x:b,y:d,width:c-b,height:e-d}
  }
  function Hb(a,b){
    return a.ha-
      b.ha}
  function lb(a){
    for(;a>za;)a-=nb;
    for(;a<-za;)a+=nb;
    return a}
  function hb(a){
    for(var b,c=a.length,d=0;d<c;++d){
      var e=0==d?c-1:d-1,f=d,h=d==c-1?0:d+1,e=0<(a[f].x-a[e].x)*(a[h].y-a[f].y)-(a[h].x-a[f].x)*(a[f].y-a[e].y)?p:V;
      if(0==d)b=e;
      else if(b!=e)return V}
    return p}
  function Gb(a,b,c,d,e){
    var f=c-a,h=d-b,g=Math.sqrt(f*f+h*h),f=f/g*e,h=h/g*e;
    return{
      Qa:a-f,Ra:b-h,Ya:c+f,Za:d+h}
  }
  function Aa(a,b,c){
    a<b&&(a=b);
    a>c&&(a=c);
    return a}
  function zb(){
    this.s=this.G=this.k=this.j=this.f=this.i=this.ta=this.fa=0;
    this.ja=this.$=this.Z=this.q=V}
  function Fb(){
    this.qa=this.pa=A;
    this.length=0.001;
    this.s=0;
    this.color="#000"}
  function Ib(){
    Q?setTimeout(function(){
      Ha(N);
      ob();
      pb.p()}
                 ,750):(Ha(N),isNaN(parseFloat(localStorage.getItem("stickything.stickiness")))||(t=parseFloat(localStorage.getItem("stickything.stickiness")),t=Aa(t,W,qa),qb=V),isNaN(parseFloat(localStorage.getItem("stickything.stiffness")))||(w=parseFloat(localStorage.getItem("stickything.stiffness")),w=Aa(w,C,M)),isNaN(parseFloat(localStorage.getItem("stickything.scale")))||
                        (o=parseFloat(localStorage.getItem("stickything.scale")),o=Aa(o,O,Z)),isNaN(parseFloat(localStorage.getItem("stickything.gravityY")))||(I=parseFloat(localStorage.getItem("stickything.gravityY"))),isNaN(parseFloat(localStorage.getItem("stickything.accelerometerFactor")))||(ia=parseFloat(localStorage.getItem("stickything.accelerometerFactor"))),ob(),u?pb.p():Jb())}
  function Jb(){
    g.U(242,-1);
    g.P();
    g.S=Za;
    q("navContainer").style.display="block";
    T();
    window.onresize=T;
    setTimeout(function(){
      q("stickyContainer").style.visibility=
        "visible";
      qb&&sb();
      ga()}
               ,150)}
  function ob(){
    g=new Ga(document.body,{
      draggable:!u}
            );
    g.add("stickiness",t,W,qa,function(a){
      t=a}
          ,this,0,u?9.9:10,function(a){
      localStorage.removeItem("stickything.stickiness");
      localStorage.setItem("stickything.stickiness",a)}
         );
    Q||g.add("stiffness",w,C,M,function(a){
      w=a;
      q("out").innerHTML="&nbsp;<br>"}
             ,this,1,u?9.9:10,function(a){
      localStorage.removeItem("stickything.stiffness");
      localStorage.setItem("stickything.stiffness",a)}
            );
    Da||g.add("size",o,O,Z,function(a){
      o=a}
              ,this,
              0.25,u?9.9:10,function(a){
      localStorage.removeItem("stickything.scale");
      localStorage.setItem("stickything.scale",a)}
             );
    Ea?g.add("gravity",ia,0,1.75,function(a){
      ia=a}
             ,this,0,2,function(a){
      localStorage.removeItem("stickything.accelerometerFactor");
      localStorage.setItem("stickything.accelerometerFactor",a)}
            ):g.add("gravity",I,0,1,function(a){
      I=a}
                    ,this,0,1,function(a){
      localStorage.removeItem("stickything.gravityY");
      localStorage.setItem("stickything.gravityY",a)}
                   );
    g.P()}
  function Za(a){
    g.w?(g.a.removeEventListener("mouseover",
                                 na,V),g.a.removeEventListener("mouseout",na,V),a&&g.X(),aa=V):(g.a.addEventListener("mouseover",na,V),g.a.addEventListener("mouseout",na,V),Kb())}
  function na(a){
    aa="mouseover"==a.type?p:V}
  function Kb(){
    var a=window.innerWidth-318,b=rb;
    r.o(g.a,a,Ka);
    g.show();
    g.a.style.opacity=0;
    clearInterval(Ba);
    Ba=setInterval(function(){
      var c=r.v(g.a).y,d=0.35*(b-c);
      r.o(g.a,a,c+d);
      g.a.style.opacity=parseFloat(g.a.style.opacity)+0.125;
      0.65>Math.abs(d)&&clearInterval(Ba)}
                   ,25)}
  function q(a){
    return document.getElementById(a)}
  function Lb(){
    q("out").style.display="block";
    for(var a=arguments[arguments.length-1],b=arguments.length-1;b--;)a=arguments[b]+", "+a;
    q("out").innerHTML=q("out").innerHTML+"<br>"+a}
  var r=function(){
    function a(a){
      function c(a){
        var b=d(a),f=h[0]+(b[0]-j[0]),b=h[1]+(b[1]-j[1]);
        if(e.d){
          var g=e.d;
          f<g.left&&(f=g.left);
          f>g.right&&(f=g.right);
          b<g.top&&(b=g.top);
          b>g.bottom&&(b=g.bottom)}
        e.Ea||B(e.element,f,b);
        e.J!==i&&e.J(a,f,b)}
      function d(a){
        var c;
        a.touches&&a.touches.length?(c=a.touches[0].clientX,a=a.touches[0].clientY):
        (c=a.clientX,a=a.clientY);
        c=b(e.element,c,a);
        return[c.x,c.y]}
      var e=g[a.target.wa];
      "touchstart"===a.type?(e.handle.onmousedown=A,e.handle.ontouchmove=c,e.handle.ontouchend=function(){
        e.handle.ontouchmove=A;
        e.handle.ontouchend=A;
        e.r&&e.r(a)}
                            ):(document.onmousemove=c,document.onmouseup=function(){
        document.onmousemove=A;
        document.onmouseup=A;
        e.r&&e.r(a)}
                              );
      a.preventDefault();
      var f=k(e.element),h=[f.x,f.y],j=d(a);
      e.T&&e.T(a);
      return V}
    function b(a,b,c){
      for(a=a.parentElement;a;)b-=a.offsetLeft,c-=a.offsetTop,
        a=a.parentElement;
      return{
        x:b,y:c}
    }
    function c(a,b,c){
      a.style.left=b+"px";
      a.style.top=c+"px"}
    function d(a){
      return{
        x:a.offsetLeft,y:a.offsetTop}
    }
    function e(a,b,c){
      a.style.WebkitTransform="translate3d("+b+"px,"+c+"px,0px)"}
    function f(a){
      a=new WebKitCSSMatrix(window.getComputedStyle(a).webkitTransform);
      return{
        x:a.m41,y:a.m42}
    }
    var h=0,g={
    }
    ,B,k;
    navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i);
    /AppleWebKit/.test(navigator.userAgent)?(B=e,k=f):(B=
                                                       c,k=d);
    return{
      ka:function(b){
        b.handle||(b.handle=b.element);
        b.handle.onmousedown=b.handle.ontouchstart=a;
        var c=h++;
        b.handle.wa=c;
        g[c]=b}
      ,Wa:b,o:B,v:k,ra:function(a){
        var b=k(a);
        a.style.left=b.x+"px";
        a.style.top=b.y+"px";
        a.style.WebkitTransform=""}
    }
  }
  (),n=Fa.prototype;
  n.U=function(a){
    this.width=a-=this.A.offsetWidth;
    this.d.right=this.width-this.D;
    this.F.style.width=this.width+"px";
    this.A.style.left=a+10+"px";
    a=this.map(this.value,this.R,this.Q,this.d.left,this.d.right);
    r.o(this.g,a,0)};
  n.p=function(a){
    this.za();
    this.Ka=a.Ca!==i?a.Ca:1;
    this.id=a.id;
    this.index=a.index;
    this.u=a.u;
    this.R=a.min;
    this.Q=a.max;
    this.Ja=a.na!==i?a.na:a.min;
    this.Ia=a.ma!==i?a.ma:a.max;
    this.ba=a.ba||function(){
    };
    this.La=a.r!==i?a.r:function(){
    };
    this.width=175;
    this.D=16;
    this.d={
      top:0,left:0,right:this.width-this.D,bottom:0};
    this.u.appendChild(this.a);
    this.Ma();
    var b=this;
    r.ka({
      element:this.g,handle:this.W,Sa:this.d,T:function(){
        b.T()}
      ,r:function(){
        b.r()}
      ,J:function(a,d,e){
        b.J(a,d,e)}
      ,Ea:p}
        );
    this.va(a.value!==i?a.value:-1);
    setTimeout(function(){
      b.D=
        b.g.offsetWidth;
      b.D=b.g.offsetWidth;
      var a=b.width-b.D;
      r.v(b.g).x>a&&r.o(b.g,a,0)}
               ,0)};
  n.za=function(){
    this.a=document.createElement("div");
    this.a.className="sliderContainer";
    this.g=document.createElement("div");
    this.g.className="sliderThumb";
    this.W=document.createElement("div");
    this.W.className="sliderThumbHit";
    this.g.appendChild(this.W);
    this.F=document.createElement("div");
    this.F.className="sliderTrack";
    this.scale=document.createElement("div");
    this.scale.className="sliderScale";
    this.A=document.createElement("div");
    this.A.className="sliderOutput";
    this.A.innerHTML="0.0";
    this.a.appendChild(this.F);
    this.a.appendChild(this.scale);
    this.a.appendChild(this.g);
    this.a.appendChild(this.A)};
  n.va=function(a){
    if(a!=this.value){
      var b=this.map(a,this.R,this.Q,this.d.left,this.d.right);
      r.o(this.g,b,0);
      this.value=a;
      this.Y=this.map(a,this.R,this.Q,this.Ja,this.Ia);
      this.A.innerHTML=this.Y.toFixed(this.Ka);
      this.ba(this.value,this.Y,this)}
  };
  n.Va=function(){
    return this.value};
  n.J=function(a,b){
    this.va(this.map(b,this.d.left,this.d.right,
                     this.R,this.Q))};
  n.T=function(){
    this.g.className="sliderThumbActive";
    this.F.className="sliderTrackActive";
    this.d.right=this.width-this.g.offsetWidth};
  n.r=function(){
    this.g.className="sliderThumb";
    this.F.className="sliderTrack";
    this.La.apply(A,[this.value,this.Y])};
  n.Xa=function(){
  };
  n.Oa=function(a){
    var b=a?a:window.event,c=r.v(this.a.parentElement?this.a.parentElement.parentElement:this.a.parentNode.parentNode),c=("mousedown"==a.type?a.pageX:a.touches[0].pageX)-c.x-20-0.5*this.D;
    c<this.d.left&&(c=
                    this.d.left);
    c>this.d.right&&(c=this.d.right);
    var d=r.v(this.g);
    r.o(this.g,c,d.y);
    this.J(b,c,0);
    b.preventDefault();
    try{
      this.W.dispatchEvent(a)}
    catch(e){
    }
  };
  n.Ma=function(){
    var a=this;
    this.F.addEventListener("mousedown",function(b){
      a.Oa(b)}
                            ,V)};
  n.map=function(a,b,c,d,e){
    a=d+(a-b)/(c-b)*(e-d);
    a>e?a=e:a<d&&(a=d);
    return a};
  n.toString=function(){
    return"[Slider]"};
  n=Ga.prototype;
  n.p=function(a){
    this.ya();
    if(a.draggable){
      this.O={
        element:this.a,handle:this.z,d:{
          left:0,top:0,right:window.innerWidth,bottom:window.innerHeight}
      };
      r.ka(this.O);
      var b=this;
      setTimeout(function(){
        b.ga()}
                 ,100);
      window.addEventListener("resize",function(){
        b.ga()}
                              ,V)}
  };
  n.add=function(a,b,c,d,e,f,h,g,B){
    var k=document.createElement("div");
    k.className="sliderItem";
    this.a.appendChild(k);
    var j=document.createElement("div");
    j.className="sliderLabel";
    j.innerHTML=a;
    k.appendChild(j);
    var m=m||{
    };
    m.label=a;
    m.index=this.V.length;
    m.u=k;
    m.value=b;
    m.min=c;
    m.max=d;
    m.ba=e;
    m.r=B;
    m.na=h;
    m.ma=g;
    a=new Fa(m);
    this.V.push({
      scope:f,Na:a}
               )};
  n.U=function(a,b){
    for(var c=a-40,
        d=this.V.length;d--;)this.V[d].Na.U(c,b);
    this.a.style.width=a+"px";
    this.m.style.left=a-this.t.offsetWidth-12+"px"};
  n.ya=function(){
    this.a=document.createElement("div");
    this.a.className="sliderBoard";
    this.z=document.createElement("div");
    this.z.className="sliderBoardBG";
    this.da=document.createElement("div");
    this.da.className="sliderBoardTitleBar";
    var a=this;
    this.m=document.createElement("div");
    this.m.className="sliderBoardCloseButton";
    this.m.onmouseup=function(){
      a.X()};
    this.m.ontouchstart=function(b){
      a.xa();
      b.preventDefault()};
    this.m.ontouchend=function(b){
      b.preventDefault();
      a.X()};
    var b=document.createElement("div");
    b.className="sliderBoardCloseButtonHit";
    this.m.appendChild(b);
    b=document.createElement("div");
    b.className="sliderBoardCloseButtonBG";
    this.m.appendChild(b);
    this.t=document.createElement("div");
    this.t.innerHTML="\u2715";
    this.t.className="sliderBoardCloseButtonIcon";
    this.m.appendChild(this.t);
    this.a.appendChild(this.z);
    this.a.appendChild(this.da);
    this.a.appendChild(this.m)};
  n.move=function(a,
                   b){
    r.o(this.a,a,b)};
  n.ga=function(){
    var a=window.innerWidth-this.z.offsetWidth,b=window.innerHeight-this.z.offsetHeight;
    0>a&&(a=0);
    0>b&&(b=0);
    var c=r.v(this.a);
    c.x>a&&c.y>b?r.o(this.a,a,b):c.x>a?r.o(this.a,a,c.y):c.y>b&&r.o(this.a,c.x,b);
    this.O.d.right=a;
    this.O.d.bottom=b};
  n.show=function(){
    this.a.style.visibility="visible";
    this.w=p;
    clearInterval(this.K)};
  n.P=function(){
    this.a.style.visibility="hidden";
    this.w=V;
    clearInterval(this.K)};
  n.X=function(){
    this.S&&this.S.apply(A);
    if(this.ua){
      var a=r.v(this.a);
      this.move(a.x,a.y-4);
      this.w=V;
      this.a.style.opacity=0.75;
      clearInterval(this.K);
      this.K=setInterval(function(a){
        var c=r.v(a.a);
        a.move(c.x,c.y-5);
        c=parseFloat(a.a.style.opacity);
        a.a.style.opacity=c-0.175;
        0>=c&&a.P()}
                         ,20,this)}
  };
  n.xa=function(){
    this.t.style.color="#CCCCCC";
    var a=this.t.style;
    setTimeout(function(){
      a.color="#444444";
      a.WebkitTransition="color 0.3s ease-in-out"}
               ,100);
    setTimeout(function(){
      a.WebkitTransition=""}
               ,450)};
  delete n;
  X.prototype.p=function(a,b,c,d){
    this.h=d;
    this.l=document.createElement("canvas");
    this.l.width=a.width+2;
    this.l.height=a.width+2;
    this.l.getContext("2d").drawImage(a,0,0);
    d=a.width/b;
    a=a.height/c;
    this.e=b+1;
    this.n=c+1;
    this.c=[];
    this.b=[];
    for(b=0;b<this.n;b++)for(c=0;c<this.e;c++){
      var e=c*d,f=b*a;
      this.c.push([e,f]);
      if(c<this.e-1&&b<this.n-1){
        var h=e+d,g=f+a;
        this.b.push(e);
        this.b.push(f);
        this.b.push(h);
        this.b.push(f);
        this.b.push(e);
        this.b.push(g);
        this.b.push(h);
        this.b.push(g);
        this.b.push(e);
        this.b.push(g);
        this.b.push(h);
        this.b.push(f)}
    }
  };
  X.prototype.sa=function(){
    var a=this.Da;
    this.h.clearRect(this.H-
                     a,this.I-a,this.M-this.H+2*a,this.L-this.I+2*a);
    this.I=this.H=Number.MAX_VALUE;
    for(var a=this.L=this.M=0,b=this.e,c=this.n,d=0;d<c;d++)for(var e=0;e<b;e++)if(e<b-1&&d<c-1){
      var f=this.c[d*b+e],h=f[0],f=f[1],g=this.c[d*b+e+1],B=g[0],g=g[1],k=this.c[(d+1)*b+e],j=k[0],k=k[1],m=this.c[(d+1)*b+e+1],n=m[0],m=m[1],l=this.b[a],q=this.b[a+1],o=this.b[a+2],r=this.b[a+3],v=this.b[a+4],t=this.b[a+5],u=this.b[a+6],s=this.b[a+7],a=a+12;
      this.ia(h,f,B,g,j,k,l,q,o,r,v,t);
      this.ia(n,m,j,k,B,g,u,s,v,t,o,r);
      this.Pa([h,
               f,B,g,j,k,n,m])}
  };
  X.prototype.ia=function(a,b,c,d,e,f,h,g,j,k,n,m){
    if(!(a==c&&a==e&&c==e||b==d&&b==f&&d==f)){
      var b=this.aa(a,b,c,d),a=b[0],b=b[1],l=this.aa(c,d,e,f),c=l[0],d=l[1],l=this.aa(e,f,a,b),e=l[0],f=l[1];
      this.h.beginPath();
      this.h.moveTo(a,b);
      this.h.lineTo(c,d);
      this.h.lineTo(e,f);
      this.h.closePath();
      var c=c-a,d=d-b,e=e-a,f=f-b,j=j-h,k=k-g,n=n-h,m=m-g,o=1/(j*m-n*k),l=(m*c-k*e)*o,k=(m*d-k*f)*o,c=(j*e-n*c)*o,j=(j*f-n*d)*o,a=a-l*h-c*g,h=b-k*h-j*g;
      this.h.save();
      this.h.transform(l,k,c,j,a,h);
      this.h.clip();
      this.h.drawImage(this.l,0,0);
      this.h.restore()}
  };
  X.prototype.aa=function(a,b,c,d){
    var c=c-a,d=d-b,e=Math.sqrt(c*c+d*d);
    return[a-c/e*this.ca,b-d/e*this.ca]};
  X.prototype.Pa=function(a){
    for(var b=a.length,c=0;c<b;c+=2){
      var d=a[c],e=a[c+1];
      d<this.H&&(this.H=d);
      d>this.M&&(this.M=d);
      e<this.I&&(this.I=e);
      e>this.L&&(this.L=e)}
  };
  G.prototype.p=function(a,b,c,d){
    this.h=d;
    this.l=document.createElement("canvas");
    this.l.width=a.width+6;
    this.l.height=a.width+6;
    this.l.getContext("2d").drawImage(a,0,0);
    this.C=a.width/
      b;
    this.B=a.height/c;
    this.e=b+1;
    this.n=c+1;
    this.Ba();
    this.Aa()};
  G.prototype.Ba=function(){
    this.c=[];
    this.b=[];
    for(var a=0;a<this.n;a++)for(var b=0;b<this.e;b++){
      var c=b*this.C,d=a*this.B;
      this.c.push([c,d]);
      if(b<this.e-1&&a<this.n-1){
        var e=c+this.C,f=d+this.B;
        this.b.push(c);
        this.b.push(d);
        this.b.push(e);
        this.b.push(d);
        this.b.push(c);
        this.b.push(f);
        this.b.push(e);
        this.b.push(f);
        this.b.push(c);
        this.b.push(f);
        this.b.push(e);
        this.b.push(d)}
    }
  };
  G.prototype.Aa=function(){
    this.ea=this.Fa();
    this.Ga="WebkitTransform"==
      this.ea?this.la:this.Ha;
    this.N=[];
    for(var a=this.c.length-this.n,b=0;b<a;b++)if(b%this.e!=this.e-1){
      var c=this.c[b][0],d=this.c[b][1],e=Math.ceil(this.C),f=Math.ceil(this.B),h=document.createElement("div"),g=document.createElement("div");
      h.style.position=g.style.position="absolute";
      h.style.left="0px";
      h.style.top="0px";
      g.style.left="0px";
      g.style.top="0px";
      var j=document.createElement("canvas"),k=document.createElement("canvas");
      j.style.position=k.style.position="absolute";
      j.style.left=k.style.left=
        "-1px";
      j.style.top=k.style.top="-1px";
      j.setAttribute("width",e+2);
      j.setAttribute("height",f+2);
      k.setAttribute("width",e+2);
      k.setAttribute("height",f+2);
      h.appendChild(j);
      g.appendChild(k);
      this.u.appendChild(h);
      this.u.appendChild(g);
      this.N.push(h);
      this.N.push(g);
      h=j.getContext("2d");
      h.beginPath();
      h.moveTo(0,0);
      h.lineTo(e+4,0);
      h.lineTo(0,f+4);
      h.clip();
      h.drawImage(this.l,c,d,e+2,f+2,0,0,e+2,f+2);
      k=k.getContext("2d");
      k.beginPath();
      k.moveTo(e+1,f+1);
      k.lineTo(0,f+1);
      k.lineTo(e+1,0);
      k.clip();
      k.drawImage(this.l,
                  c,d,e+1,f+1,0,0,e+1,f+1)}
  };
  G.prototype.sa=function(){
    for(var a=0,b=0,c=0,d=this.c.length-this.n,e=0;e<d;e++)if(e%this.e==this.e-1)a=0,b++;
      else{
        var f=this.c[b*this.e+a],h=f[0],f=f[1],g=this.c[b*this.e+a+1],j=g[0],g=g[1],k=this.c[(b+1)*this.e+a],l=k[0],k=k[1],m=this.c[(b+1)*this.e+a+1],n=m[0],m=m[1],o=this.N[c++],q=this.N[c++];
        o.style[this.ea]=this.Ga(0,0,this.C,0,0,this.B,h,f,j,g,l,k);
        q.style[this.ea]=this.la(this.C,this.B,0,0,0,0,n,m,l,k,j,g);
        a++}
  };
  G.prototype.la=function(a,b,c,d,e,f,g,j,l,k,n,m){
    d=
      (l-g)/(c-a);
    m=(m-j)/(f-b);
    c=(k-j)/(c-a);
    f=(n-g)/(f-b);
    return"matrix3d("+d+","+c+",0,0,"+f+","+m+",0,0,0,0,1,0,"+(g-a*d-b*f)+","+(j-b*m-a*c)+",0,1)"};
  G.prototype.Ha=function(a,b,c,d,e,f,g,j,l,k,n,m){
    d=(l-g)/(c-a);
    m=(m-j)/(f-b);
    c=(k-j)/(c-a);
    f=(n-g)/(f-b);
    return"matrix("+d+","+c+","+f+","+m+","+(g-a*d-b*f)+","+(j-b*m-a*c)+")"};
  G.prototype.Fa=function(){
    for(var a=document.body,b=["transform","WebkitTransform","MozTransform","msTransform","OTransform"],c;c=b.shift();)if("undefined"!=typeof a.style[c])return c;
    return V};
  var pb=function(){
    function a(a){
      a=a?"addEventListener":"removeEventListener";
      u[a]("touchend",d,V);
      s[a]("touchend",k,V)}
    function b(){
      q("iconBar").style.width=window.innerWidth+"px";
      z.style.width=window.innerWidth+"px";
      z.style.height=window.innerHeight+1+"px"}
    function c(a){
      var b,c;
      b||(b="#BBBBBB");
      c||(c="#444444");
      a.style.backgroundColor=b;
      setTimeout(function(){
        a.style.backgroundColor=c;
        a.style.WebkitTransition="background-color 0.4s ease-in-out"}
                 ,100);
      setTimeout(function(){
        a.style.WebkitTransition=
          ""}
                 ,750)}
    function d(){
      g.w?e():(window.addEventListener("resize",f,V),g.S=e,j())}
    function e(){
      g.S=A;
      l();
      window.removeEventListener("resize",f,V)}
    function f(){
      setTimeout(function(){
        var a=h();
        g.a.style.left="0px";
        g.a.style.top="0px";
        g.move(a.x,a.y);
        r.ra(g.a)}
                 ,10)}
    function h(){
      var a,b;
      switch(v){
        case "":b=window.innerHeight-g.a.offsetHeight;
          a=Math.round(0.5*(window.innerWidth-t));
          b=Math.round(0.5*b-(80<b?22:5));
          break;
        case "TR":a=window.innerWidth-t-32;
          b=60;
          break;
        default:console.log("Board align wrong.")}
      0>
        b&&(b=0);
      return{
        x:Math.round(a),y:Math.round(b)}
    }
    function j(){
      ha=p;
      clearInterval(y);
      var a=h(),b=a.x,c=a.y;
      g.a.style.left="0px";
      g.a.style.top="0px";
      g.move(b,0);
      g.a.style.opacity=0;
      g.show();
      setTimeout(function(){
        g.a.style.opacity=1;
        g.a.style.WebkitTransform="translate3d("+b+"px,"+c+"px,0px)";
        g.a.style.WebkitTransition="all 0.45s cubic-bezier(0.0,0.55,0.0,1.0)"}
                 ,0);
      setTimeout(function(){
        g.a.style.WebkitTransition="";
        r.ra(g.a);
        Ya||ga()}
                 ,500)}
    function l(){
      ha=p;
      clearInterval(y);
      var a=0.3*-h().y;
      setTimeout(function(){
        g.a.style.opacity=
          0;
        g.a.style.WebkitTransform="translate3d(0px,"+a+"px,0px)";
        g.a.style.WebkitTransition="all 0.25s ease-in-out"}
                 ,0);
      setTimeout(function(){
        g.a.style.WebkitTransition="";
        g.P();
        x||ga()}
                 ,200)}
    function k(){
      if(w==s){
        w={
          id:"NULL"};
        c(s);
        b();
        g.w&&e();
        ha=p;
        m(V);
        a(V);
        z.style.display="block";
        x=p;
        var d=document.getElementById("aboutOverlayInner");
        d.style.WebkitTransform="translate3d(0px,35px,0px)";
        var f=0.5*-d.offsetHeight,f=300>window.innerHeight?f-4:f-8;
        Q&&(f-=10);
        setTimeout(function(){
          z.style.opacity=1;
          z.style.WebkitTransition=
            "opacity 0.25s ease-out";
          d.style.WebkitTransform="translate3d(0px,"+f+"px,0px)";
          d.style.WebkitTransition="-webkit-transform 0.45s cubic-bezier(0.0,0.5,0.0,1.0)"}
                   ,0);
        setTimeout(function(){
          z.addEventListener("touchstart",n,V)}
                   ,650)}
    }
    function n(b){
      b.target==z&&(setTimeout(function(){
        z.removeEventListener("touchstart",n,V);
        z.style.opacity=0;
        z.style.WebkitTransition="opacity 0.2s ease-out";
        var a=document.getElementById("aboutOverlayInner");
        a.style.WebkitTransform="translate3d(0px,8px,0px)";
        a.style.WebkitTransition=
          "-webkit-transform 0.25s cubic-bezier(1.000, 0.000, 1.000, 0.750)"}
                               ,0),setTimeout(function(){
        z.style.display="none";
        m(p);
        a(p);
        ga();
        x=V}
                                              ,300))}
    function m(a){
      a?document.addEventListener("touchstart",o,V):document.removeEventListener("touchstart",o,V)}
    function o(a){
      3!=a.target.nodeType&&a.preventDefault()}
    var v="",t=280,u,s,z,x=V,w,y;
    return{
      p:function(){
        if(Q){
          var d=navigator.userAgent.split("Android ")[1],d=d.substring(0,d.indexOf(";"));
          if(2.2>parseFloat(d)){
            Lb('<br><br><div style="font-family:sans;font-size:20px;color:#666666;padding:0 10px">Hello,<br><br>Sorry but you need a newer Android version to run this, at least <strong>2.2</strong> (Froyo).<br><br>But you can still view this site on a desktop computer instead.</div>');
            return}
          S.ca=1.5}
        var e=q("iconBar");
        e.style.display="block";
        w=s=q("infoBTN");
        s.addEventListener("touchstart",function(){
          w=s;
          c(s)}
                           ,V);
        u=q("optionsBTN");
        u.addEventListener("touchstart",function(){
          c(u)}
                           ,V);
        m(p);
        a(p);
        z=q("aboutOverlay");
        g.ua=V;
        g.U(t,-1);
        ra&&(v="TR");
        Q||document.addEventListener("touchstart",function(){
          0==document.body.scrollTop&&setTimeout(window.scrollTo,10,0,1)}
                                     ,V);
        setTimeout(function(){
          T();
          b()}
                   ,100);
        setTimeout(function(){
          Q&&(q("out").style.height="100%",T());
          window.onresize=T;
          window.addEventListener("resize",
                                  b,V);
          q("stickyContainer").style.visibility="visible";
          ga()}
                   ,P?150:1250);
        P?(setTimeout(function(){
          e.style.opacity=1;
          e.style.WebkitTransition="opacity 0.55s ease-in-out"}
                      ,1500),setTimeout(function(){
          e.style.WebkitTransition=""}
                                        ,3E3)):e.style.opacity=1}
    }
  }
  (),R,sa,S,E=0,F=0,Ba,N,za=Math.PI,nb=2*za,Ra="url(https://images2018.cnblogs.com/blog/993337/201804/993337-20180403155453880-1214885401.jpg),auto",Qa="url(https://images2018.cnblogs.com/blog/993337/201804/993337-20180403155453880-1214885401.jpg),auto",pa="default",ya=pa,ma=0.5,Ia=0.02,mb=0.01,Ja=0.88,o=0.9,O=0.5,Z=2,ab=0,I=0.5,t=12,L,W=0,qa=24,x=0.07,C=0.045,M=0.2,w=x,qb=p,ea=-4,K=60,$=window.innerWidth,
    fa=window.innerHeight,j=[],l=[],Ab=[],y=[],v=7,s=7,La=50*v,yb=50*s,D,ba,ka,la=0,Oa,Ma=0.5*($-La),Na=100,db=0,fb=0,eb=0,gb=0,aa=V,Pa=V,ja=V,U=V,wa=V,tb=-1!=document.location.href.indexOf("http"),da=navigator.userAgent,P=da.match(/iPhone/i)||da.match(/iPod/i)||da.match(/iPad/i),Q=/Android/.test(da),u="ontouchend"in document,ra=u&&740<window.innerWidth&&520<window.innerHeight,Y=p,ca,ta=V,cb=0,va=V,ha=V,Xa=0,g,rb=60,Ka=rb-130,Ya=!ra,ia=0.875;
  Da=P;
  Ea=P;
  var $a=0,xa=1;
  requestAnimFrame=function(){
    return function(a){
      window.setTimeout(a,15)}
  }
  ();
  window.onload=function(){
    q("stickyContainer").style.visibility="hidden";
    N=new Image;
    N.onload=Ib;
    N.src="https://images2018.cnblogs.com/blog/993337/201804/993337-20180403155453880-1214885401.jpg"}
}
)();

</script>

 

2.css代码:

<style>
.sliderBoard {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 242px;
    color: #808080;
    font-size: 12px;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased
}

.sliderBoardTitleBar {
    width: 220px;
    height: 18px;
    top: 0px;
    left: 0px;
    padding-top: 10px;
    padding-left: 22px;
    font-weight: bold;
    background-color: #f00;
    visibility: hidden
}

.sliderBoardBG {
    position: absolute;
    width: 100%;
    height: 106%;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #F2F2F2;
    opacity: 0.92;
    background-image: -moz-linear-gradient(100% 100% 90deg, #EBEBEB, #F7F7F7);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7),
        to(#EBEBEB))
}

.sliderItem {
    margin-left: 20px;
    width: 10px;
    height: 44px;
    display: block;
    float: left;
    cursor: default;
    clear: both
}

.sliderContainer {
    position: absolute;
    margin-top: 16px
}

.sliderLabel {
    position: absolute
}

.sliderOutput {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 186px;
    top: 1px;
    width: 28px
}

.sliderBoardCloseButton {
    position: absolute;
    top: 9px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: center;
    opacity: 1;
    -webkit-user-select: none
}

.sliderBoardCloseButtonHit {
    position: absolute;
    width: 34px;
    height: 34px;
    left: -3px;
    top: -8px;
    background-color: #00F;
    opacity: 0.0
}

.sliderBoardCloseButtonBG {
    position: absolute;
    width: 27px;
    height: 27px;
    top: -0px;
    left: -1px;
    -webkit-border-radius: 16px;
    background-color: #CDCDCD;
    margin: 0;
    padding: 0;
    display: none
}

.sliderBoardCloseButtonIcon {
    position: absolute;
    font-weight: normal;
    text-shadow: 0px 1px 1px #FFF;
    margin: 0;
    padding: 0px 0px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-border-radius: 20px
}

.sliderBoardCloseButton:hover {
    opacity: 0.65;
    -webkit-transition: opacity, 0.2s ease-out;
    */
}

.sliderThumb {
    position: absolute;
    width: 16px;
    height: 16px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #484848;
    background-image: -moz-linear-gradient(100% 100% 90deg, #2D2D2D, #828282);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#828282),
        to(#2D2D2D));
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.25s
}

.sliderThumbActive {
    position: absolute;
    width: 16px;
    height: 16px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #393939;
    background-image: -moz-linear-gradient(100% 100% 90deg, #000, #A6A6A6);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A6A6A6),
        to(#000));
    opacity: 1
}

.sliderThumbOver {
    position: absolute;
    width: 16px;
    height: 16px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #484848;
    background-image: -moz-linear-gradient(100% 100% 90deg, #2D2D2D, #828282);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#828282),
        to(#2D2D2D));
    opacity: 0.85;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s
}

.sliderThumbHit {
    position: absolute;
    background-color: #0F0;
    width: 25px;
    height: 25px;
    left: -4px;
    top: -4px;
    opacity: 0.0
}

.sliderTrack {
    position: absolute;
    top: 0px;
    width: 175px;
    height: 16px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    opacity: 0.9;
    background-color: #CECECE;
    background-image: -moz-linear-gradient(100% 100% 90deg, #DCDCDC, #BBB);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BABABA),
        to(#DCDCDC));
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.25s
}

.sliderTrackActive {
    position: absolute;
    top: 0px;
    width: 175px;
    height: 16px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    opacity: 0.7;
    background-color: #CCC;
    background-image: -moz-linear-gradient(100% 100% 90deg, #DCDCDC, #BABABA);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BABABA),
        to(#DCDCDC));
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.175s;
    -moz-transition-property: opacity;
    -moz-transition-duration: 0.175s;
    transition-property: opacity;
    transition-duration: 0.175s
}

@media screen and (max-device-width:1024px) {
    .sliderBoard {
        font-size: 16px;
        color: #545454
    }
    .sliderBoardBG {
        -webkit-border-radius: 12px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F6),
            to(#EBEBEB))
    }
    .sliderItem {
        height: 58px
    }
    .sliderContainer {
        margin-top: 22px
    }
    .sliderBoardCloseButton {
        font-size: 23px;
        top: 5px
    }
    .sliderBoardCloseButtonHit {
        width: 54px;
        height: 54px;
        left: -18px;
        top: -14px
    }
    .sliderBoardCloseButton:hover {
        opacity: 1
    }
    .sliderTrack {
        height: 24px;
        -webkit-border-radius: 12px;
        opacity: 0.6;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9d9d9d),
            to(#CFCFCF))
    }
    .sliderTrackActive {
        height: 24px;
        -webkit-border-radius: 12px;
        opacity: 1;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9d9d9d),
            to(#CDCDCD))
    }
    .sliderThumb {
        width: 24px;
        height: 24px;
        -webkit-border-radius: 12px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#696969),
            to(#202020))
    }
    .sliderThumbActive {
        width: 24px;
        height: 24px;
        -webkit-border-radius: 12px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777),
            to(#000))
    }
    .sliderThumbHit {
        width: 74px;
        height: 60px;
        top: -17px;
        left: -23px
    }
}

@media screen and (max-height:320px) {
    .sliderBoard {
        font-size: 16px
    }
    .sliderItem {
        height: 50px
    }
    .sliderContainer {
        margin-top: 21px
    }
}

#iconBar {
    display: none;
    opacity: 0;
    position: absolute;
    width: 200px;
    height: 44px;
    left: 0px;
    top: 0px
}

.ico-btn {
    margin: 18px 22px 0px -4px;
    position: relative;
    width: 27px;
    height: 27px;
    float: right;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    background-color: #444;
    -webkit-border-radius: 25px
}

.ico-hit {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 56px;
    height: 56px;
    background-color: #0F0;
    opacity: 0.0
}

.ico-ico-info {
    position: absolute;
    overflow: hidden;
    width: 27px;
    height: 27px
}

.ico-ico-gears {
    position: absolute;
    overflow: hidden;
    width: 27px;
    height: 27px
}

#aboutOverlay {
    display: none;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    text-align: center;
    z-index: 100
}

#aboutOverlayInner {
    -webkit-font-smoothing: antialiased;
    top: 50%;
    position: absolute;
    width: 100%;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -2px
}

#aboutLabLink {
    padding: 2px 3px;
    -webkit-tap-highlight-color: rgba(255, 0, 153, 0)
}

#aboutOverlayInner a {
    color: #262626;
    background-color: rgba(255, 0, 153, 0)
}

#aboutOverlayInner a:focus {
    color: #262626;
    background-color: rgba(255, 0, 153, 1)
}

#aboutOverlayInner a:hover {
    color: #262626;
    background-color: rgba(255, 0, 153, 1)
}

#aboutOverlayInner a:active {
    color: #262626;
    background-color: rgba(255, 0, 153, 1)
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
    font-family: Arial, Helvetiva, sans-serif;
    -webkit-tap-highlight-color: #F09
}

a {
    text-decoration: none
}

#navContainer a {
    color: #444;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.25s
}

#navContainer a:hover {
    color: #F09;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.15s
}

#navContainer {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none
}

#nav {
    font-size: 0.75em;
    color: #777;
    text-align: right;
    margin-top: 10px;
    margin-right: 80px
}

#bigCanvas {
    position: absolute;
    left: 0px;
    top: 0px
}

#stickyContainer {
    position: absolute;
    left: 0px;
    top: 0px
}

.pipe {
    font-size: 1.2em;
    color: #CCC;
    margin: 0px 6px
}

.slashWithSpace {
    padding: 0px 1px
}

#out {
    position: absolute;
    margin: 0px 0px;
    font-family: monospace;
    font-size: 11px;
    color: #900;
    border: 1px solid #FFF;
    width: 100%;
    height: 100%;
    display: none
}

@media screen and (max-device-width:1024px) {
    body {
        font-family: Helvetica, Arial, sans
    }
    #out {
        font-size: 9px
    }
}
</style>

 

3.html代码:

<!DOCTYPE html>
<html lang="en">
<!--  manifest="./cache.manifest"  -->
<head>
<meta charset=utf-8>
<title>新7款HTML5/CSS3特效之浏览器的小泥块</title>
<meta name="description" content="Sticky Thing" />
<meta name="keywords"
    content="experiment,html5,javascript,canvas,css3,interactive,physics,demo,mobile,web-based,iphone,android" />
<meta name="viewport"
    content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
    <div id="out">&nbsp;</div>
    <canvas id="bigCanvas">Throw it around and see if it sticks.
            <br>
            <br>You need a newer browser.
            <br>In the meantime please try the 
            <a href="http://spielzeugz.de/lab/sticky-thing/flash">Flash version
            </a>.
        </canvas>
    <div id="iconBar">
        <div class="ico-btn" id="infoBTN">
            <div class="ico-hit"></div>
            <div class="ico-ico-info">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAT0lEQVR42uzUuw0AMAhDwZf9l44yQEBGKQIy/RWYD6tUmJn1YZySGQTuF1bsbeq4IczxwqixdGwjmBoJfZi6kwxm2RFky4VfkJnZM7YFGACj+QrIDs75qgAAAABJRU5ErkJggg=="
                    width="27" height="27" />
            </div>
        </div>
        <div class="ico-btn" id="optionsBTN">
            <div class="ico-hit"></div>
            <div class="ico-ico-gears">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF/v7+/f39////////uwDIMAAAAAR0Uk5T////AEAqqfQAAABvSURBVHja7NVLCsAgDATQSbz/nUsoUmxjSSyKhZmNijyQ+EMZCsjIyO5RS9OJM73aFKvZj2knmzMgx2zWiARYaVdlBE410au+M5jA1GMa3+7nKMLOuqeYYGy7ZdHh+sU1/fwE5R88fh1kZO85BBgAUbsgdHGHgrIAAAAASUVORK5CYII="
                    width="27" height="27" />
            </div>
        </div>
    </div>
    <div id="stickyContainer"></div>
    <div id="navContainer">
        <div id="nav">
            <a href="javascript:void(0)" id="options">设置 </a> <span class="pipe"
                id="navPipe">| </span>
        </div>
    </div>
</body>
</html>

 点击下载示例

posted @ 2016-07-27 18:16  水狼一族  阅读(321)  评论(0编辑  收藏  举报
改变世界的是这样一群人,他们寻找梦想中的乐园,当他们找不到时,他们亲手创造了它