search

Home  >  Q&A  >  body text

javascript - jquery css背景色 渐进显示

我做一个价格展示 需要根据涨跌显示不同的颜色

.css('background','#C13B3F');
.css('background','#2BA838');

但 这样显示的太生硬 怎么让他显示的柔和一点的变化

巴扎黑巴扎黑2773 days ago580

reply all(3)I'll reply

  • PHPz

    PHPz2017-04-11 13:10:11

    看了眼btc123 大致懂题主的意思
    使用jQ的animate() 如果要改背景色需要用官方的插件jQuery.color.js

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="jquery.color.js"></script>
    </head>
    
    <body>
    <button>1</button>
    <p style="background-color:#eee;">2017</p>
    
    </body>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").animate({backgroundColor:'#d43b3b'},"slow")
        $("p").animate({backgroundColor:'#eee'},"slow")
      });
    });
    </script>
    </html>

    reply
    0
  • 怪我咯

    怪我咯2017-04-11 13:10:11

    CSS3 transition 属性 http://www.w3school.com.cn/cs...

    比如鼠标滑过p变色

    CSS:

    #p1
    {
    width:100px;
    height:100px;
    background:#C13B3F;
    transition:background 1s;
    }
    
    #p1:hover
    {
    background:#2BA838;
    }
    

    HTML:

    <p id="p1"></p>

    reply
    0
  • 阿神

    阿神2017-04-11 13:10:11

    谢邀……

    刚才本来想的是背景柔和用线性渐变就好了,但是想来想去都想不到怎么表示价格的涨跌(感觉用数据可视化库来做是不是更好?),所以把删掉的答案再加上,顺便跟题主探讨下~

    reply
    0
  • Cancelreply