jquery 怎样让css内容有渐变效果？

html-css011

jquery 怎样让css内容有渐变效果？,第1张

<script type="text/javascript">

$(document).ready(function() {

$("input").click(function() {

$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显，你可以测试一下，如果不是你想要的效果，你可以查一下jq的渐隐效果函数或者animate（）函数，控制这个input的透明度就好了，例如 $(this).animate（‘opacity’，‘0’）；

//点击text增加b效果

$("body").one("click", function() {

$("input").removeClass("b")

//点击其他地方消除b效果

})

return false

})

})

页面背景颜色渐变可以分为四个部分

一、从上往下渐变：

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)

}

二、从左上至右下渐变：

body{

FILTER: Alpha( style=1,opacity=25,finishOpacity=100,

startX=50,finishX= 100,startY=50,finishY=100)

background-color: skyblue

}

三、从左往右渐变：

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000)

}

四、从上往下渐变：

style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white)"

下面是整合的完整格式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>背景渐变</title>

<style type="text/css">

<!--

body {

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

}

-->

</style></head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white)">&nbsp</td>

</tr>

</table>

</body>

</html>

如果是在同一个页面里面显示多重渐变效果，可以定义每个渐变的width和height。

不可以，只提供以下方法：但是有个插件可以办到

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

minWidth

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

附件里有这个插件

使用方法：$(selector).animate({backgroundColor:"#FFFFFF"},speed,callback_function)