13518219792
其实渐变的实现归根结底都是css（样式）来控制，所以我目前想到的有2种：
十年的罗山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整罗山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“罗山网站设计”,“罗山网站推广”以来，每个客户项目都认真落实执行。
所有代码直接在JS里面写：
var test = document.getelementById(''test);
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';
PS:这儿的backgroundImage的‘i’一定要大写，并且一定要这么写，不能写成和长沙市里面的background-image一样，JS不识别的。
2.在css里面写好之后，通过js给element添加class来新增样式：
在样式表定义好样式
css：
.jianbian{
background-image: linear-gradient(120deg, #155799, #159957);
}
然后通过js给元素添加class
js:
var test = document.getelementById(''test);
test.className = 'jianbian' ;
大概就这样了，不过你还需要考虑一下不同浏览器的兼容性，关于渐变的写法。
-webket-/-moz-之类的
动态渐变
span style="font-size:12px;"html
...
body
center
div id="fade" style="width:600px;height:200px;"/div
/center
/body
/html/span
为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
span style="font-size:12px;"script type="text/javascript"
var node=document.getElementById("fade");
var color="#0000";
var level=1;
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
script/span
静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
简单解释下：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；
附送下简单的其他的基本代码
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
title
RunJS 演示代码
/title
style
body {
margin:auto;
}
div {
border: 1px solid black;
width:100px;
float:left;
height:100px;
text-align:center;
line-height:100px;
}
div#div1 {
cursor:pointer;
background-color:#fd3;
}
/style
script
onload = function(){
var w1 = parseFloat(div1.style.width) || div1.offsetWidth;
var w3 = parseFloat(div3.style.width) || div3.offsetWidth;
var anonymous = function(div, asc){
var me = div;
clearInterval(me.interval);
me.interval = setInterval (function(){
var w = parseFloat(me.style.width) || me.offsetWidth;
asc ? w w1 + w3 ? w++ : clearInterval(me.interval) : w w1 ? w-- : clearInterval(me.interval);
me.style.width = w+"px";
div3.style.width = w1 + w3 - w + "px";
}, 10);
};
div1.onmouseover = function(){
anonymous (this, 1);
};
div1.onmouseout = function(){
anonymous (this, 0);
};
}
/script
/head
body
div id="div1"
1
/div
div
2
/div
div id="div3"
3
/div
/body
/html
。。。---------------------由于知道的太少，，，所以认为javascript 实现“渐变” 或者 “渐隐渐现” 的效果是不可能的。---------------------今天看了一别人网站上的js代码，发现其“渐变” 或者 “渐隐渐现” 的效果 完全是靠 javascript 实现的。。。。。自己很是惊叹！！---------------------------我想仔细研究一下来着，，但是他们的代码实在是太乱了，，找不着重点，，，不想看。。-------------------------所以，请您教教我：------------------------用javascript 实现“渐变” 或者 “渐隐渐现” 的效果 的原理是什么？------------------------只说说原理和用到的几个最关键的函数或属性就可以了。其余我自己百度。---------------------当然越详细越好，最好给出一个非常单纯的例子，，，让我一下就可以领悟其精髓。。---------------------谢谢！！！！
