javascript - jquery css背景色 渐进显示
巴扎黑
巴扎黑 2017-04-11 13:08:11
0
3
578

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

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

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

巴扎黑
巴扎黑

reply all(3)
PHPzhong

看了眼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>
刘奇

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>
阿神

谢邀……

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!