当前位置：首页 → 问答吧 → 一個簡單的用js創建漸變的方法。

一個簡單的用js創建漸變的方法。

时间：2010-05-13

来源：互联网

其實還是很簡單的。那個按鈕上的漸變就是這麼創建的。我做的時候是琢磨著做的，沒有考慮復用的問題。。。請在chrome和火狐下使用- -IE不支援rgba- -.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>漸變</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#content').text($('script:eq(1)').html()).hide();
      $('.gr-submit').toggle(
      function(){$('#content').show('show')},
      function(){$('#content').hide('show')}
      );
      pGr('.gr-submit',{r:31,g:163,b:246},{r:0,g:103,b:167},35,'colora');
      $('.gr-submit').bind(
      {
      'mouseout':function(){
         $(this).children('div').remove();
         pGr('.gr-submit',{r:31,g:163,b:246},{r:0,g:103,b:167},35,'colora');
      },
      'mousedown':function(){
         $(this).children('div').remove();
         pGr('.gr-submit',{r:0,g:163,b:246},{r:0,g:70,b:107},35,'colora',true);
         $(this).children('span').css('line-height','38px');
      },
      'mouseup':function(){
         $(this).children('div').remove();
         pGr('.gr-submit',{r:31,g:163,b:246},{r:0,g:103,b:167},35,'colora');
         $(this).children('span').css('line-height','35px');
      }
      });
   });

   function pGr(to,sColor,eColor,step,css,re){
      var sGr=sColor,lGr=eColor,grLeng=step;
      if(re == true){
      var sGr=eColor,lGr=sColor;
      }
      var Rz = (lGr.r-sGr.r)/grLeng, Gz = (lGr.g - sGr.g )/grLeng, Bz = ( lGr.b-sGr.b)/grLeng;
      var r=sGr.r,g=sGr.g,b=sGr.b;
      for(var i=0 ; i<grLeng ; i++){
         r += Rz;
         g += Gz;
         b += Bz;
         $(to).append('<div class="'+css+'"></div>').children().last().css('background','rgb('+parseInt(r)+','+parseInt(g)+','+parseInt(b)+')');
      }
   }

</script>
<style>
*{margin:0;padding:0}
.colora{height:1px;width:auto;}
.gr-submit {display:relative;height:35px;width:100px;border:1px rgba(0,0,0,.6) solid;}
.gr-submit .text{display:block;position:absolute;text-align:center;height:33px;width:98px;line-height:35px;color:#fff;border:rgba(255,255,255,.5) 1px solid;}
#page {width:800px;margin:0 auto;margin-top:100px}
html{background:url(bg.gif)}
#content{height:300px;width:auto;background:#fff;border:1px rgba(150,150,50,.4) solid;font-size:12px;line-height:18px;overflow:auto; white-space: pre-wrap;padding:5px;}
</style>
</head>
<body>

<div id="page">

<div class="gr-submit"><span class="text">顯示代碼</span></div>
<div id="content"></div>
</div>
</body>
</html>

作者: GuangWang 发布时间: 2010-05-13

一個簡單的用js創建漸變的方法。

热门阅读

热门下载