其实渐变的实现归根结底都是css(样式)来控制,所以我目前想到的有2种:
所有代码直接在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-之类的
这是我以前收藏的代码,利用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部分
准备几个网页每个放一张图片
做一个线性的连接