1、返回顶部（完全兼容各个浏览器，不含美化）

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>无标题文档</title>
  6.  <style type="text/css">
  7.  #div1 {
  8.      width:20px;
  9.      height:100px;
  10.      position:absolute;
  11.      top:0;
  12.      right:0;
  13.      background:#f00;
  14.  }
  15.  </style>
  16.  
  17.  <script>
  18.  //完全兼容所有浏览器
  19.  var bSys=null;//标志用户滚动了滚动条
  20.  var timer=null;
  21.  window.onload=window.onresize=window.onscroll=function() {
  22.      var oDiv=document.getElementById("div1");
  23.      var sctop=document.body.scrollTop||document.documentElement.scrollTop;
  24.      var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
  25.      oDiv.style.top=sctop+t+'px';
  26.      //检测用户滚动了滚动条
  27.      if(!bSys) {
  28.          clearInterval(timer);
  29.      }
  30.      bSys=false;
  31.  
  32.      oDiv.onclick=function() {
  33.          timer=setInterval(function() {
  34.                  var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
  35.                  var ispeed=Math.floor(-scrolltop/8);
  36.                  if(scrolltop==0) {
  37.                      clearInterval(timer);    //当scrolltop为0的时候，就停止这个定时器
  38.                  }
  39.                  bSys=true;
  40.                  document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed;
  41.          },30);
  42.      };
  43.  };
  44.  </script>
  45.  </head>
  46.  
  47.  <body>
  48.  1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
  49.  <div id="div1">返回顶部</div>
  50.  </body>
  51.  </html>

2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>返回顶部+缓冲</title>
  6.  <style>
  7.  #div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;}
  8.  span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}
  9.  //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  10.  </style>
  11.  <script>
  12.  
  13.  window.onload=window.onscroll=window.onresize=function() {
  14.      var oDiv=document.getElementById("div1");
  15.      var sct=document.documentElement.scrollTop||document.body.scrollTop;
  16.      var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
  17.      startMove(parseInt(t));  //scrolltop,ff/ie:document.documentElement   chrome:document.body获取
  18.  };
  19.  
  20.  var timer=null;
  21.  function startMove(iTarget) {
  22.      var oDiv=document.getElementById("div1");
  23.      var iSpeed=null;
  24.      clearInterval(timer);
  25.      timer=setInterval(function() {
  26.          iSpeed=(iTarget-oDiv.offsetTop)/8;
  27.          iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度
  28.          if(oDiv.offsetTop==iTarget) {
  29.              clearInterval(timer);
  30.          }
  31.          else {
  32.              oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
  33.          }
  34.      },30);
  35.  }
  36.  </script>
  37.  </head>
  38.  <body style="height:2000px;">
  39.  </body>
  40.  </html>

3、拖拽（完全兼容各个浏览器，不含美化）

  1.  function drag() {
  2.      var oDiv=document.getElementById('div1');
  3.      var disX=disY=0;
  4.      oDiv.onmousedown=function(ev) {
  5.          var oEvent=ev||event;
  6.          disX=oEvent.clientX-oDiv.offsetLeft;
  7.          disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置
  8.  
  9.          document.onmousemove=function(ev) {
  10.              var oEvent=ev||event;
  11.              var l=oEvent.clientX-disX;
  12.              var t=oEvent.clientY-disY;
  13.              if(l<0)
  14.                  l=0;
  15.              else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
  16.                  l=document.documentElement.clientWidth-oDiv.offsetWidth;
  17.              if(t<0)
  18.                  t=0;
  19.              else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
  20.                  t=document.documentElement.clientHeight-oDiv.offsetHeight;
  21.              oDiv.style.left=l+'px';
  22.              oDiv.style.top=t+'px';
  23.          };
  24.  
  25.          document.onmouseup=function()　{
  26.              document.onmousemove=document.onmouseup=null;
  27.          };
  28.          return false;//解决ff早期的bug发生
  29.      };
  30.  
  31.  }

4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  #div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;}
  8.  span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}
  9.  //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8
  10.  </style>
  11.  <script>
  12.  window.onload=function() {
  13.      var oDiv=document.getElementById("div1");
  14.      var obt=document.getElementById("obt");
  15.      var timer=null;
  16.      var iSpeed=null;
  17.      var iTarget=300;
  18.      obt.onclick=function() {
  19.          clearInterval(timer);
  20.  
  21.          timer=setInterval(function() {
  22.              iSpeed=(iTarget-oDiv.offsetLeft)/8;
  23.                  iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  24.              if(oDiv.offsetLeft==iTarget) {
  25.                  clearInterval(timer);
  26.              }
  27.              else {
  28.                  oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
  29.              }
  30.          },30);
  31.      };
  32.  };
  33.  </script>
  34.  </head>
  35.  
  36.  <body>
  37.  <input type="button" value="开始运动" id="obt"/>
  38.  <div id="div1"></div>
  39.  <span></span>
  40.  </body>
  41.  </html>

5、多个定时器共同进行

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  div{width:70px; height:30px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}
  8.  </style>
  9.  <script>
  10.  window.onload=function() {
  11.      var divs=document.getElementsByTagName("div");
  12.      for(var i=0; i<divs.length; i++) {
  13.          divs[i].onmouseover=function() {startMove(this, 300);};
  14.          divs[i].onmouseout=function() {startMove(this, 70);};
  15.      }
  16.  };
  17.  //var timer=null; 此处用了一个共用的定时器timer
  18.  function startMove(obj, iTarget) {
  19.      var iSpeed=null;
  20.      clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
  21.      obj.timer=setInterval(function() {
  22.          iSpeed=(iTarget-obj.offsetWidth)/8;
  23.          iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
  24.          if(obj.offsetWidth==iTarget) {
  25.              clearInterval(obj.timer);
  26.          } else {
  27.              obj.style.width=obj.offsetWidth+iSpeed+'px';
  28.          }
  29.      }, 30);
  30.  }
  31.  
  32.  </script>
  33.  </head>
  34.  
  35.  <body>
  36.  <div id="div1"></div>
  37.  <div id="div1"></div>
  38.  <div id="div1"></div>
  39.  <div id="div1"></div>
  40.  <div id="div1"></div>
  41.  </body>
  42.  </html>

6、多个淡入淡出

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}
  8.  </style>
  9.  
  10.  <script>
  11.  //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用
  12.  //取html中标签中的行内样式：style
  13.  //取非行内样式：ff:getComputeStyle  ie:currentStyle
  14.  //取所有样式的通用写法
  15.  function getStyle(obj, attr) {
  16.      if(obj.currentStyle)
  17.          return obj.currentStyle[attr];
  18.      else
  19.          return obj.getComputeStyle(obj, false)[attr];
  20.  }
  21.  
  22.  function startMove(obj, iTarget) {
  23.      var iSpeed=null;
  24.      clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
  25.      obj.timer=setInterval(function() {
  26.          iSpeed=(iTarget-obj.alpha)/8;
  27.          iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
  28.          if(obj.alpha==iTarget) {
  29.              clearInterval(obj.timer);
  30.          } else {
  31.              obj.alpha+=iSpeed;
  32.              obj.style.filter='alpha(opacity:'+obj.alpha+')';
  33.              obj.style.opacity=obj.alpha/100;
  34.          }
  35.      }, 30);
  36.  }
  37.  
  38.  window.onload=function() {
  39.      var divs=document.getElementsByTagName("div");
  40.      for(var i=0; i<divs.length; i++) {
  41.          divs[i].alpha=30;
  42.          divs[i].onmouseover=function() {startMove(this, 100);};
  43.          divs[i].onmouseout=function() {startMove(this, 30);};
  44.      }
  45.  };
  46.  
  47.  </script>
  48.  </head>
  49.  
  50.  <body>
  51.  <div></div>
  52.  <div></div>
  53.  <div></div>
  54.  <div></div>
  55.  
  56.  </body>
  57.  </html>

7、通用动画带渐变

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity=30); opacity:0.3;}
  8.  </style>
  9.  
  10.  <script>
  11.  //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用
  12.  //取html中标签中的行内样式：style
  13.  //取非行内样式：ff:getComputeStyle  ie:currentStyle--->替换offsetXXX之类的获取
  14.  //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）
  15.  //取所有样式的通用写法
  16.  function getStyle(obj, attr) {
  17.      if(obj.currentStyle)
  18.          return obj.currentStyle[attr];
  19.      else
  20.          return obj.getComputeStyle(obj, false)[attr];
  21.  }
  22.  
  23.  function startMove(obj, attr, iTarget) {
  24.      var iSpeed=null;
  25.      clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
  26.      obj.timer=setInterval(function() {
  27.          var iCur=null;
  28.          if(attr=='opacity') {
  29.              iCur=parseInt(100*parseFloat(getStyle(obj, attr)));
  30.              //获得指定对象属性的值,小数很容易爆发问题存在，避免小数发生问题，这里采用抛出小数部分，parseInt
  31.          } else {
  32.              iCur=parseInt(getStyle(obj, attr));
  33.              //取非行内样式：ff:getComputeStyle  ie:currentStyle--->替换offsetXXX之类的获取
  34.              //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）
  35.              //取所有样式的通用写法
  36.          }
  37.          iSpeed=(iTarget-iCur)/8;
  38.          iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
  39.          if(iCur==iTarget) {
  40.              clearInterval(obj.timer);
  41.          } else {
  42.              if(attr=='opacity') {
  43.                  obj.style[attr]=(iCur+iSpeed)/100;
  44.                  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  45.                  document.getElementById('tct').value=obj.style[attr];
  46.              } else {
  47.                  obj.style[attr]=iCur+iSpeed+'px';
  48.              }
  49.          }
  50.      }, 30);
  51.  }
  52.  
  53.  window.onload=function() {
  54.      var divs=document.getElementsByTagName("div");
  55.      for(var i=0; i<divs.length; i++) {
  56.          divs[i].alpha=30;
  57.          divs[i].onmouseover=function() {startMove(this, 'opacity', 100);};
  58.          divs[i].onmouseout=function() {startMove(this, 'opacity', 30);};
  59.      }
  60.  };
  61.  </script>
  62.  </head>
  63.  
  64.  <body>
  65.  <input type="text" value="" id="tct"/>
  66.  <div></div>
  67.  <div></div>
  68.  <div></div>
  69.  <div></div>
  70.  
  71.  </body>
  72.  </html>

8、FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>仿FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复</title>
  6.  <link rel="stylesheet" type="text/css" href="miao_style.css">
  7.  <script src="../move.js"></script>
  8.  <script>
  9.  function getClass(oParent, sClass) {
  10.      var aEle=oParent.getElementsByTagName('*');
  11.      var aResult=[];
  12.      for(var i=0; i<aEle.length; i++) {
  13.          if(aEle[i].className==sClass){
  14.              aResult.push(aEle[i]);
  15.          }
  16.      }
  17.      return aResult;
  18.  }
  19.  
  20.  window.onload=function() {
  21.      var oDiv=document.getElementById('playimages');
  22.      //左右按钮
  23.      var oBtnPrev=getClass(oDiv, 'prev')[0];
  24.      var oBtnNext=getClass(oDiv, 'next')[0];
  25.      var oMarkLeft=getClass(oDiv, 'mark_left')[0];
  26.      var oMarkRight=getClass(oDiv, 'mark_right')[0];
  27.      //小图点击
  28.      var oSmallUl=getClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0];
  29.      var aSmallLi=oSmallUl.getElementsByTagName('li');
  30.      var oBigUl=getClass(oDiv, 'big_pic')[0];
  31.      var aBigLi=oBigUl.getElementsByTagName('li');
  32.      var iNow=0;
  33.      var iMinZindex=2 ;
  34.      oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
  35.          startMove(oBtnPrev, 'opacity', 100);
  36.      };
  37.  
  38.      oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
  39.          startMove(oBtnPrev, 'opacity', 0);
  40.      };
  41.  
  42.      oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
  43.          startMove(oBtnNext, 'opacity', 100);
  44.      };
  45.  
  46.      oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
  47.          startMove(oBtnNext, 'opacity', 0);
  48.      };
  49.      oSmallUl.style.width=aSmallLi[0].offsetWidth*aSmallLi.length+'px';
  50.      for(var i=0; i<aSmallLi.length; i++) {
  51.          aSmallLi[i].index=i;
  52.          aSmallLi[i].onmouseover=function(){
  53.              startMove(this, 'opacity', 100);
  54.          };
  55.  
  56.          aSmallLi[i].onmouseout=function(){
  57.              if(this.index!=iNow) {
  58.                  startMove(this, 'opacity', 60);
  59.              }
  60.          };        
  61.  
  62.          aSmallLi[i].onclick=function() {
  63.  
  64.              if(this.index==0) return;
  65.              iNow=this.index;
  66.              tab();
  67.          };
  68.  
  69.          function tab() {
  70.              for(var j=0; j<aSmallLi.length; j++) {
  71.                  startMove(aSmallLi[j], 'opacity', 60);
  72.              }
  73.              startMove(aSmallLi[iNow], 'opacity', 100);
  74.              aBigLi[iNow].style.zIndex=iMinZindex++;
  75.              aBigLi[iNow].style.height=0+'px';
  76.              //大图上下动
  77.              startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight);
  78.              //小图左右动
  79.              if(iNow==0) {
  80.                  startMove(oSmallUl, 'left', 0);
  81.              } else if(iNow==aSmallLi.length-1) {
  82.                  startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth);
  83.              } else {
  84.                  startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth);
  85.              }
  86.          }
  87.  
  88.          //向前
  89.          oBtnPrev.onclick=function() {
  90.              iNow--;
  91.              if(iNow==-1)
  92.                  iNow=aSmallLi.length-1;
  93.              tab();
  94.          };
  95.          //向后
  96.          oBtnNext.onclick=function() {
  97.              iNow++;
  98.              if(iNow==aSmallLi.length)
  99.                  iNow=0;
  100.              tab();
  101.          };
  102.      }
  103.  
  104.  };
  105.  </script>
  106.  </head>
  107.  
  108.  <body>
  109.  <div id="playimages" class="play">
  110.      <ul class="big_pic">
  111.          <div class="prev"></div>
  112.          <div class="next"></div>
  113.  
  114.          <div class="text">加载图片说明……</div>
  115.          <div class="length">计算图片数量……</div>
  116.  
  117.          <a class="mark_left" href="javascript:;"></a>
  118.          <a class="mark_right" href="javascript:;"></a>
  119.          <div class="bg"></div>
  120.  
  121.          <li style="z-index:1;"><img src="data:images/1.jpg" /></li>
  122.          <li><img src="data:images/2.jpg" /></li>
  123.          <li><img src="data:images/3.jpg" /></li>
  124.          <li><img src="data:images/4.jpg" /></li>
  125.          <li><img src="data:images/5.jpg" /></li>
  126.          <li><img src="data:images/6.jpg" /></li>
  127.      </ul>
  128.      <div class="small_pic">
  129.          <ul style="width:390px;">
  130.              <li style="filter: 100; opacity: 1;"><img src="data:images/1.jpg" /></li>
  131.              <li><img src="data:images/2.jpg" /></li>
  132.              <li><img src="data:images/3.jpg" /></li>
  133.              <li><img src="data:images/4.jpg" /></li>
  134.              <li><img src="data:images/5.jpg" /></li>
  135.              <li><img src="data:images/6.jpg" /></li>
  136.          </ul>
  137.      </div>
  138.  </div>
  139.  
  140.  </body>
  141.  </html>

特效合集（原生JS代码）适合初学者的更多相关文章

  1. CSS3悬停特效合集Hover.css

    CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...

  2. 奇舞js笔记——第0课——如何写好原生js代码

    摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当 ...

  3. jsonp原生js代码示例

    /* mightygumball.js */ /* * get the content of a JSON file using JSONP * update every 3 seconds. * * ...

  4. AJAX原生JS代码

    var http_request = false;function send_request(method,url,content,responseType,callback){ http_reque ...

  5. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  6. 原生js代码挑战之动态添加双色球

    var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...

  7. 比sort()性能更好的原生js代码实现数组从小到大排序

    nums = [1,2,4,1,34,6,-1,2] for(let i = nums.length - 1; i > 0; i--) { let maxIdx = i; for(let j = ...

  8. 原生JS代码实现随机产生一个16进制的颜色值

    封装一个函数 function getColor() { var str = "#"; //一个十六进制的值的数组 var arr = ["0", " ...

  9. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

随机推荐

  1. ddl dml dcl

    DCL数据控制语言 创建临时表空间 create temporary tablespace user_temp tempfile 'E:/oracle/product/10.1.0/oradata/o ...

  2. jfinal 基本应用 --事务回滚

    事务回滚 1.当时需要用到事务回滚,但是看到网上只有问题,没有真实的到底怎么用法. 2.我看了一下文档,结合了网上的大神的博客. 第一种方法: Db.tx(new IAtom(){ @Override ...

  3. 三星在GPL下发布其exFAT文件系统实现源码

    exFAT文件系统是微软的一个产品,设计让外置储存设备和PC之间实现无缝的TB级数据转移和数据交换,它只支持Windows和OS X,不支持Linux.作为一个含有大量专利的私有产品,没有人会预计它会 ...

  4. plist

    <a title="iphone" href="itms-services://?action=download-manifest&url=https:// ...

  5. 滤镜与CSS3效果

    -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.一起学习一下filter这个属性吧. 现在规范中支持的效果有: grayscale 灰度       ...

  6. 国际性公司的中国化BPM业务流程管理怎么落地？

    康奈可集团于1938年在日本成立,总部位于东京,日本康奈可自2002年开始投资中国,现已在江苏无锡.湖北襄樊和广州地区投资设立8家公司,总投资超过1亿美元.公司主要生产汽车模块及散热器.车用空调.消音 ...

  7. C# List和String互相转换

    List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a");list.Add(& ...

  8. javaweb---html标签

    img标签

  9. LayaAir引擎——（一）

    LayaAir是LayaBox推出的Html5游戏引擎,支持 ActionScript3.TypeScript.JavaScript,开源,并且商用免费.   LayaAir IDE 是一款使用Lay ...

  10. [转]http://makefiletutorial.com/

    Intro This makefile will always run. The default target is some_binary, because it is first. some_bi ...