javascript渐变,HTML5渐变

怎么用js设置一个渐变色的背景颜色

其实渐变的实现归根结底都是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-之类的

javascript 如何实现div 颜色的渐变??

动态渐变

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的其它*/

javascript实现渐变效果。。。

!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 实现“渐变”或“渐隐渐现”的原理是什么?

。。。---------------------由于知道的太少,,,所以认为javascript 实现“渐变” 或者 “渐隐渐现” 的效果是不可能的。---------------------今天看了一别人网站上的js代码,发现其“渐变” 或者 “渐隐渐现” 的效果 完全是靠 javascript 实现的。。。。。自己很是惊叹!!---------------------------我想仔细研究一下来着,,但是他们的代码实在是太乱了,,找不着重点,,,不想看。。-------------------------所以,请您教教我:------------------------用javascript 实现“渐变” 或者 “渐隐渐现” 的效果 的原理是什么?------------------------只说说原理和用到的几个最关键的函数或属性就可以了。其余我自己百度。---------------------当然越详细越好,最好给出一个非常单纯的例子,,,让我一下就可以领悟其精髓。。---------------------谢谢!!!!


新闻标题:javascript渐变,HTML5渐变
标题来源:http://scyanting.com/article/dssjdih.html