如何用js实现div的背景颜色渐变?求解答

JavaScript031

如何用js实现div的背景颜色渐变?求解答,第1张

这是我以前收藏的代码,利用CSS+JS实现渐变,代码如下:

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>

<html>

<head>

<meta http-equiv=content-type content="text/html charset=gbk">

<title>渐变背景</title>

<script>

var setGradient = (function(){

//private variables

var p_dCanvas = document.createElement('canvas')

var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function')

var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null

var p_isIE = /*@cc_on!@*/false

//test if toDataURL() is supported by Canvas since Safari may not support it

   try{   p_dCtx.canvas.toDataURL() }catch(err){

          p_useCanvas = false 

   }  

if(p_useCanvas){

    return function (dEl , sColor1 , sColor2 , bRepeatY ){

   if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

   if(!dEl) return false

   var nW = dEl.offsetWidth

   var nH = dEl.offsetHeight

   p_dCanvas.width = nW

   p_dCanvas.height = nH

   var dGradient

   var sRepeat

   // Create gradients

   if(bRepeatY){

    dGradient = p_dCtx.createLinearGradient(0,0,nW,0)

    sRepeat = 'repeat-y'

   }else{

    dGradient = p_dCtx.createLinearGradient(0,0,0,nH)

    sRepeat = 'repeat-x'

   } 

   dGradient.addColorStop(0,sColor1)

   dGradient.addColorStop(1,sColor2)    

   p_dCtx.fillStyle = dGradient  

   p_dCtx.fillRect(0,0,nW,nH)

   var sDataUrl = p_dCtx.canvas.toDataURL('image/png')

   with(dEl.style){

    backgroundRepeat = sRepeat

    backgroundImage = 'url(' + sDataUrl + ')'

    backgroundColor = sColor2    

   }

    }

}else if(p_isIE){

p_dCanvas = p_useCanvas = p_dCtx = null 

return function (dEl , sColor1 , sColor2 , bRepeatY){

   if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

   if(!dEl) return false

   dEl.style.zoom = 1

   var sF = dEl.currentStyle.filter

   dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('')

}

}else{

p_dCanvas = p_useCanvas = p_dCtx = null

return function(dEl , sColor1 , sColor2 ){

   if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

   if(!dEl) return false

   with(dEl.style){

     backgroundColor = sColor2 

   }

   //alert('your browser does not support gradient effet')

}

}

})()

</script>

<style>

body{font:0.75em/1.4 Arialtext-align:leftmargin:20px}

hr{clear:bothvisibility:hidden}

xmp{font:12px/12px "Courier New"background:#fffcolor:#666 border:solid 1px #ccc}

div.example{ border:solid 1px #555margin:0 20px 20px 0float:left display:inlinemargin:1embackground:#fffwidth:300pxpadding:40pxcolor:#222font:xx-small/1.2 "Tahoma"text-align:justify}

</style>

<body>

<h1>渐变背景-beta1</h1>

<div id="example1" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>

<div id="example2" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretiu </div>

<div id="example3" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna </div>

<div id="example4" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interdum sit amet,   </div>

<div id="example5" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>

<div id="example6" class="example">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>

<script>

setGradient('example1','#4ddbbe','#d449cc',1)

setGradient('example2','#46ddbd','#d8b617',0)

setGradient('example3','#c81fc1','#bf445f',1)

setGradient('example4','#2285e5','#d769eb',0)

setGradient('example5','#8b4286','#eac87d',1)

setGradient('example6','black','white',0)

</script>

</body>

</html>

-Enter content=RevealTrans(Duration=4,Transition=8)>

Transition=8 可以把数字改为以下参数实现不用的效果

盒状收缩 RevealTrans 0 盒状展开 RevealTrans 1 圆形收缩 RevealTrans 2 圆形展开 RevealTrans 3 向上擦除 RevealTrans 4 向下擦除

RevealTrans 5 向左擦除 RevealTrans 6 向右擦除 RevealTrans 7 垂直百页窗 RevealTrans 8 水平百页窗 RevealTrans 9 横向棋盘式 RevealTrans

10 纵向棋盘式 RevealTrans 11 溶解 RevealTrans 12 左右向中部收缩 RevealTrans 13 中部向左右展开 RevealTrans 14 上下向中部收缩

RevealTrans 15 中部向上下展开 RevealTrans 16 阶梯状向左下展开 RevealTrans 17 阶梯状向左上展开 RevealTrans 18 阶梯状向右下展开

RevealTrans 19 阶梯状向右上展开 RevealTrans 20 随机水平线 RevealTrans 21 随机垂直线 RevealTrans 22 随机 RevealTrans 23

不需要js (其实是我用js做不出来)

把以代码看懂后

加在 held部分

准备几个网页每个放一张图片

做一个线性的连接

动态渐变

<span style="font-size:12px"><html>

...

<body>

<center>

<div id="fade" style="width:600pxheight: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(level>16){

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