<SCRIPT>
function fnToggle(oObj) {
if (oDiv.filters(0).enabled){
oDiv.filters(0).enabled='false';
oObj.innerText='Add Gradient';}
else {
oDiv.filters(0).enabled='true';
oObj.innerText='Make Normal';}
}
</SCRIPT><font size="+5">
<DIV ID="oDiv" STYLE="position:absolute; left:270px;
height:120; color:green; filter:
progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr=#550000FF, endColorstr=#55FFFF00)" >
A simple gradient
</DIV>
</font>
<BUTTON onclick="fnToggle(this)">Add Gradient</BUTTON><BR/>
function fnToggle(oObj) {
if (oDiv.filters(0).enabled){
oDiv.filters(0).enabled='false';
oObj.innerText='Add Gradient';}
else {
oDiv.filters(0).enabled='true';
oObj.innerText='Make Normal';}
}
</SCRIPT><font size="+5">
<DIV ID="oDiv" STYLE="position:absolute; left:270px;
height:120; color:green; filter:
progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr=#550000FF, endColorstr=#55FFFF00)" >
A simple gradient
</DIV>
</font>
<BUTTON onclick="fnToggle(this)">Add Gradient</BUTTON><BR/>
解决方案 »
- 一段JS代码不知道为什么执行不了,大家帮忙看看啊
- Ext.data.Record的create方法里的元素在api的什么地方可以找得到
- ShowModalDialg生面的窗口能不能改变大小
- firefox中如何把enter键转化为tab键?
- 晕,再问~~正则表达式怎么匹配中文
- 怎样取放在单元格里的表单项的值?
- 谁有jquery mobile lazyloader 的demo 发一个纯html的
- 为什么我的checkbox无法遍历
- 新手的问题---怎样使文本框“不记住”以往输入过的值??(在线)
- js如何定义一个全局变量供所有的js文件用
- windows.open中如何传递本页面中表单form的值?
- 返回值到主父窗口的select的问题
<HEAD>
<TITLE>Gradient Filter</TITLE><SCRIPT>
var bTranState = 0;
function fnToggle() {
oDIV2.filters[0].Apply();
if (bTranState) {
bTranState = 0;
oDIV2.style.visibility="hidden"; }
else {
bTranState = 1;
oDIV2.style.visibility="visible"; }
oDIV2.filters[0].Play();
}function copy2Clipboard()
{
textRange = document.body.createTextRange();
textRange.moveToElementText(oCode);
textRange.execCommand("Copy");
}
function grayScale(){
if (chkgrayscale.checked='true'){
filterDIV.filters.item(1).grayscale='1';}
else {
filterDIV.filters.item(1).grayscale='0';
chkgrayscale.checked='false'}
}
var alphaOne ='FF';
var alphaTwo ='FF';
</SCRIPT>
<STYLE>
body{
margin:0;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
}
.desbar{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:8pt;
height:105;
}
.title{
font-size:15pt;
color:white;
padding-left:10px;
}
PRE { margin:0}a:link
{
text-decoration:none;
color:white
}
a:visited
{
text-decoration:none;
color:white
}
a:active
{
text-decoration:none;
color:white
}
a:hover
{
text-decoration:none;
color:yellow
}
</STYLE></HEAD><BODY STYLE="font-family:verdana; font-size:9pt">
<DIV CLASS="bar title">
Gradient Filter
</DIV>
<DIV STYLE="position:absolute; top:45; left:270; width:310">
Modify the individual properties of the<BR/>filter using the controls below.<BR/><BR/><B> GradientType: </B> <SELECT onchange="oGradientType.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(0).GradientType=this.options[this.selectedIndex].value">
<OPTION VALUE="0">0</OPTION>
<OPTION VALUE="1">1</OPTION></SELECT><BR/><BR/><B> StartColorStr</B> <BR/><BR/>
Alpha: <SELECT ID="concAlpha1" onchange="alphaOne=this.options[this.selectedIndex].innerText; var conColorVal=this.options[this.selectedIndex].value.concat(startColorSelect.value); filterDIV.filters.item(0).StartColorStr=conColorVal; oStartColorStr.innerText=conColorVal">
<OPTION VALUE="#00" >00</OPTION>
<OPTION VALUE="#20" >20</OPTION>
<OPTION VALUE="#50" >50</OPTION>
<OPTION VALUE="#80" >80</OPTION>
<OPTION VALUE="#A0" >A0</OPTION>
<OPTION VALUE="#C0" >C0</OPTION>
<OPTION VALUE="#FF" selected>FF</OPTION>
</SELECT>
Color: <SELECT ID="startColorSelect" onchange=" oStartColorStr.innerText='#'.concat(alphaOne).concat(this.options[this.selectedIndex].value); filterDIV.filters.item(0).StartColorStr='#'.concat(alphaOne).concat(this.options[this.selectedIndex].value)">
<OPTION VALUE="0000FF">Default</OPTION>
<OPTION VALUE="99CCFF" >#99CCFF</OPTION>
<OPTION VALUE="FF3300" >#FF3300</OPTION>
<OPTION VALUE="FFCC00" >#FFCC00</OPTION>
<OPTION VALUE="99FF33" >#99FF33</OPTION>
<OPTION VALUE="000000" >#000000</OPTION>
<OPTION VALUE="CC3300" >#CC3300</OPTION>
<OPTION VALUE="006600" >#006600</OPTION>
<OPTION VALUE="000066" >#000066</OPTION>
</SELECT>
<BR/><BR/>
<B> EndColorStr </B> <BR/><BR/>
Alpha: <SELECT ID="concAlpha2" onchange="alphaTwo=this.options[this.selectedIndex].innerText; var conColorVal=this.options[this.selectedIndex].value.concat(endColorSelect.value); filterDIV.filters.item(0).EndColorStr=conColorVal; oEndColorStr.innerText=conColorVal">
<OPTION VALUE="#00" >00</OPTION>
<OPTION VALUE="#20" >20</OPTION>
<OPTION VALUE="#50" >50</OPTION>
<OPTION VALUE="#80" >80</OPTION>
<OPTION VALUE="#A0" >A0</OPTION>
<OPTION VALUE="#C0" >C0</OPTION>
<OPTION VALUE="#FF" selected>FF</OPTION>
</SELECT>
Color: <SELECT ID="endColorSelect" onchange="oEndColorStr.innerText='#'.concat(alphaTwo).concat(this.options[this.selectedIndex].value); filterDIV.filters.item(0).EndColorStr='#'.concat(alphaTwo).concat(this.options[this.selectedIndex].value)">
<OPTION VALUE="000000">Default</OPTION>
<OPTION VALUE="99CCFF" >#99CCFF</OPTION>
<OPTION VALUE="FF3300" >#FF3300</OPTION>
<OPTION VALUE="FFCC00" >#FFCC00</OPTION>
<OPTION VALUE="99FF33" >#99FF33</OPTION>
<OPTION VALUE="000000" >#000000</OPTION>
<OPTION VALUE="CC3300" >#CC3300</OPTION>
<OPTION VALUE="006600" >#006600</OPTION>
<OPTION VALUE="000066" >#000066</OPTION>
</SELECT><BR/><BR/>
</DIV> <DIV ID="filterDIV" STYLE="position:absolute; top:40; left:10; width:240; height: 180; padding:5px; font-size:15pt; border:1px solid black; filter:progid:DXImageTransform.Microsoft.gradient() ; color:white; text-align:center; font-weight:bold; z-index:1 "></DIV>
<DIV STYLE="position:absolute; top:40; left:10; width:240; height: 180; padding:5px; font-size:15pt; color:black; text-align:center; font-weight:bold; z-index:0">This text is positioned behind the filtered DIV.</DIV> <DIV CLASS="bar" STYLE="position:relative; top:230; z-index:3">
<BUTTON STYLE="margin:5px"onclick="copy2Clipboard()">Copy Code to Clipboard</BUTTON>
</DIV> <PRE ID="oCode" STYLE="position:relative; top:210; font-size:9pt; background:white; padding:10px; color:black;"><DIV STYLE="position:absolute; top:50; left:10; width:240; height:160;<BR/> padding:10px; font:bold 11pt verdana;">
This text is positioned behind the filtered DIV.
</DIV>
<DIV ID="oFilterDIV" STYLE="position:absolute; top:50; left:10; width:240;<BR/> height:160; padding:10px; font:bold 13pt verdana; color:white;
<SPAN STYLE="color:red; font-size:8pt; font-family:verdana; ">filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=<SPAN ID="oGradientType">0</SPAN>,<BR/> StartColorStr='<SPAN ID="oStartColorStr">#0000FF</SPAN>', EndColorStr='<SPAN ID="oEndColorStr">#000000</SPAN>')</SPAN>">
<BR/><BR/><BR/>This is the DIV content.</DIV>
</PRE></DIV>
</BODY>
</HTML>