js Clip奇思妙想之多彩渐变字效果

  之前用Clip属性实现了文字上下两半不同色彩的拼接。

  多彩渐变字,兼容所有主流浏览器。

  页面JS当中真正有用的只有colorful()函数:

  

复制代码 代码如下:

  function colorful(obj,font,r,g,b,type){

  var boxObj;

  if(typeof(obj)=="string"||typeof(obj)=="number"){

  boxObj = document.getElementById(obj);

  }else{

  boxObj = obj;

  }

  boxObj.innerHTML="<a href='#'>"+font+"</a>";

  var num = boxObj.getElementsByTagName("a")[0].scrollWidth;

  boxObj.innerHTML="";

  for(var i=0;i<=num;i++){

  var j=i+1;

  var c=Math.round(255/num*i);

  switch(Number(type)){

  case 0:r=c;g=c;b=c;break;

  case 1:r=c;break;

  case 2:g=c;break;

  case 3:b=c;break;

  }

  var iObj = document.createElement("A");

  iObj.innerHTML=font;

  iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";

  iObj.style.color="rgb("+r+","+g+","+b+")";

  iObj.href="#";

  boxObj.appendChild(iObj);

  }

  }

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  虽然IE有自己的渐变滤镜,但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器!通过程序,我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素,分别着色,最后组合到一起,实现多彩渐变!