搜索文章：

首页  |  Java技术  |  Asp.net  |  Asp编程  |  VC/C++  |  Delphi  |  VB编程
上一篇：非常好的东西，有助于学习css虑镜，转msdn [1] >>

非常好的东西，有助于学习css虑镜，转msdn [2]

作者： unknow
function changeTrans() {
    obj = getControlObject("oSelect");
    selectedValue = obj.options[obj.selectedIndex].value;
    if (selectedValue != "empty") {
        if (selectedValue.indexOf(@#Barn@#)!=-1) {
            oControlsSpan.innerHTML = oBarnControls.innerHTML;
            barnTransChange();
        }
        else if (selectedValue.indexOf(@#Blinds@#)!=-1) {
            oControlsSpan.innerHTML = oBlindsControls.innerHTML;
            blindsTransChange();
        }
        else if (selectedValue.indexOf(@#Checkerboard@#)!=-1) {
            oControlsSpan.innerHTML = oCheckerboardControls.innerHTML;
            checkerboardTransChange();
        }
        else if (selectedValue.indexOf(@#Fade@#)!=-1) {
            oControlsSpan.innerHTML = oFadeControls.innerHTML;
            fadeTransChange();
        }
        else if (selectedValue.indexOf(@#Iris@#)!=-1) {
            oControlsSpan.innerHTML = oIrisControls.innerHTML;
            irisTransChange();
        }
        else if (selectedValue.indexOf(@#Pixelate@#)!=-1) {
            oControlsSpan.innerHTML = oPixelateTransControls.innerHTML;
            pixelateTransChange();
        }
        else if (selectedValue.indexOf(@#RadialWipe@#)!=-1) {
            oControlsSpan.innerHTML = oRadialWipeControls.innerHTML;
            radialWipeTransChange();
        }
        else if (selectedValue.indexOf(@#RandomBars@#)!=-1) {
            oControlsSpan.innerHTML = oRandomBarsControls.innerHTML;
            randomBarsTransChange();
        }
        else if (selectedValue.indexOf(@#Slide@#)!=-1) {
            oControlsSpan.innerHTML = oSlideControls.innerHTML;
            slideTransChange();
        }
        else if (selectedValue.indexOf(@#Spiral@#)!=-1) {
            oControlsSpan.innerHTML = oSpiralControls.innerHTML;
            spiralTransChange();
        }
        else if (selectedValue.indexOf(@#Stretch@#)!=-1) {
            oControlsSpan.innerHTML = oStretchControls.innerHTML;
            stretchTransChange();
        }
        else if (selectedValue.indexOf(@#Strips@#)!=-1) {
            oControlsSpan.innerHTML = oStripsControls.innerHTML;
            stripsTransChange();
        }
        else if (selectedValue.indexOf(@#Wheel@#)!=-1) {
            oControlsSpan.innerHTML = oWheelControls.innerHTML;
            wheelTransChange();
        }
        else if (selectedValue.indexOf(@#.Wipe@#)!=-1) {
            oControlsSpan.innerHTML = oWipeControls.innerHTML;
            wipeTransChange();
        }
        else if (selectedValue.indexOf(@#Zigzag@#)!=-1) {
            oControlsSpan.innerHTML = oZigzagControls.innerHTML;
            zigzagTransChange();
        }
        else {
            oImg.style.filter=selectedValue;
            oControlsSpan.innerHTML = featuresHeader + @#This transition does not support any additional features.@#;
        }
    }
    else {
            oImg.style.filter=@#@#;
            oControlsSpan.innerHTML =  featuresHeader + @#No transition is currently selected.@#;
    }
    updateTransCode();
}

function updateTransCode() {
    obj = getControlObject("oSelect");
    selectedValue=obj.options[obj.selectedIndex].value;
    imgContents = imgObj.innerHTML;
    if (selectedValue != "empty") {
        oCodePre.innerText=completeTransCode(imgContents);
    }
    else {
        oCodePre.innerText=imgContents;
    }
    highlightText(imgContents);
}

function completeTransCode(imgText) {
    scriptBlock = @#@#;
    scriptBlock = scriptBlock + @#var startImage ="@# + startImage + @#";\n@#;
    scriptBlock = scriptBlock + @#var endImage="@# + endImage + @#";\n@#;
    scriptBlock = scriptBlock + @#function doTrans() {\n@#;
    scriptBlock = scriptBlock + @#        oImg.filters[0].apply();\n@#;
    scriptBlock = scriptBlock + @#        if (oImg.src.indexOf(startImage)!=-1) {\n@#;
    scriptBlock = scriptBlock + @#            oImg.src = endImage;\n@#;
    scriptBlock = scriptBlock + @#        }\n@#;
    scriptBlock = scriptBlock + @#        else {\n@#;
    scriptBlock = scriptBlock + @#            oImg.src = startImage;\n@#;
    scriptBlock = scriptBlock + @#        }\n@#;
    scriptBlock = scriptBlock + @#        oImg.filters[0].play();\n@#;
    scriptBlock = scriptBlock + @#}\n@#
    buttonBlock = @#\<BR\>\<BR\>\n<BUTTON onclick="doTrans()">Play Transition</BUTTON>\n@#
    fullBlock = @#\<HEAD\>\n\<SCRIPT\>\n@# + scriptBlock + @#\<\/SCRIPT\>\n\<\/HEAD\>\n\<BODY\>\n@# + imgText + buttonBlock + @#\<\/BODY\>@#;
    return(fullBlock);  
}

function barnTransChange(){
    controlObject = getControlObject("openingSwitch");
    opening = controlObject.checked;
    controlObject = getControlObject("barnVerticalSwitch");
    vertical = controlObject.checked;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrBarn(opening="+ opening+",vertical="+ vertical+")@#";
    eval(cmd);
    updateTransCode();
}

function blindsTransChange(){
    controlObject = getControlObject("blindsBandsList");
    bands = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("blindsDirectionList");
    direction = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrBlinds(Bands="+ bands+",direction="+ direction+")@#";
    eval(cmd);
    updateTransCode();
}

function checkerboardTransChange(){
    controlObject = getControlObject("checkerboardDirectionList");
    direction = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("squaresXList");
    squaresX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("squaresYList");
    squaresY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Checkerboard(Direction="+ direction+",SquaresX="+ squaresX+",SquaresY="+ squaresY+")@#";
    eval(cmd);
    updateTransCode();
}

function fadeTransChange(){
    controlObject = getControlObject("centerSwitch");
    controlObject.checked==true ? center = 1 : center = 0;
    controlObject = getControlObject("fadeOverlapList");
    overlap = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Fade(Overlap=" + overlap + ",Center="+ center+")@#";
    eval(cmd);
    updateTransCode();
}

function irisTransChange(){
    controlObject = getControlObject("irisStyleList");
    irisStyle = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("irisReverseSwitch");
    reverse = controlObject.checked;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrIris(irisStyle="+ irisStyle+",reverse=" + reverse +")@#";
    eval(cmd);
    updateTransCode();
}

function pixelateTransChange(){
    controlObject = getControlObject("maxSquareTransList");
    maxSquare = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Pixelate(MaxSquare="+ maxSquare+")@#";
    eval(cmd);
    updateTransCode();
}

function randomBarsTransChange(){
    controlObject = getControlObject("randomBarsVerticalSwitch");
    vertical = controlObject.checked;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.RandomBars(vertical="+ vertical+")@#";
    eval(cmd);
    updateTransCode();
}

function radialWipeTransChange(){
    controlObject = getControlObject("radialWipeStyleList");
    wipeStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrRadialWipe(wipeStyle="+ wipeStyle+")@#";
    eval(cmd);
    updateTransCode();
}

function slideTransChange(){
    controlObject = getControlObject("slideStyleList");
    slideStyle = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("slideBandsList");
    bands = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrSlide(slideStyle="+ slideStyle+",Bands=" + bands +")@#";
    eval(cmd);
    updateTransCode();
}

function spiralTransChange(){
    controlObject = getControlObject("spiralGridSizeXList");
    gridSizeX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("spiralGridSizeYList");
    gridSizeY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrSpiral(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")@#";
    eval(cmd);
    updateTransCode();
}

function stretchTransChange(){
    controlObject = getControlObject("stretchStyleList");
    stretchStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrStretch(stretchStyle="+ stretchStyle+")@#";
    eval(cmd);
    updateTransCode();
}

function stripsTransChange(){
    controlObject = getControlObject("movementList");
    movement = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("stripsYList");
    stripsY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Strips(Movement="+ movement+",StripsY="+ stripsY+")@#";
    eval(cmd);
    updateTransCode();
}

function wheelTransChange(){
    controlObject = getControlObject("spokesList");
    spokes = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrWheel(spokes="+ spokes+")@#";
    eval(cmd);
    updateTransCode();
}

function wipeTransChange(){
    controlObject = getControlObject("wipeReverseSwitch");
    reverse = controlObject.checked;
    if (!reverse) {
        getControlObject("wipeStyleList").options("ltrrtlText").innerText="0 (Left-to-right)";
        getControlObject("wipeStyleList").options("ttbbttText").innerText="1 (Top-to-bottom)";
    }
    else
    {
        getControlObject("wipeStyleList").options("ltrrtlText").innerText="0 (Right-to-left)";
        getControlObject("wipeStyleList").options("ttbbttText").innerText="1 (Bottom-to-top)";
    }
    controlObject = getControlObject("gradientSizeList");
    gradientSize = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("wipeStyleList");
    wipeStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Wipe(GradientSize="+ gradientSize+",wipeStyle=" + wipeStyle +",reverse=" + reverse +")@#";
    eval(cmd);
    updateTransCode();
}

function zigzagTransChange(){
    controlObject = getControlObject("zigzagGridSizeXList");
    gridSizeX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("zigzagGridSizeYList");
    gridSizeY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrZigzag(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")@#";
    eval(cmd);
    updateTransCode();
}
</SCRIPT>

<LINK REL="stylesheet" TYPE="text/css" HREF="IASample.css">
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BGCOLOR="#FFFFFF" onload="switchContent(filterSection)">

<!-- DOCUMENT CONTENT START -->
<SPAN ID="oLiveSpan" style="BACKGROUND: #BBBBBB; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 210px; LEFT: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 300px; z-index: 2"
ALIGN="LEFT">
<!-- START Live Content -->
<TABLE ALIGN="CENTER">
<TR><TD>
<P><SPAN ID="imgObj"><IMG ID="oImg"></SPAN></P>
</TD></TR>
</TABLE>
<!-- END Live Content -->
</SPAN>

<SPAN
style="BACKGROUND: #000000; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 165; LEFT: 300; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 500px; z-index: 3; background-image:  url(descbg.gif); background-repeat: no-repeat; overflow: hidden">
<br>
<br>
<P class="desctext">Modify the code using the controls in the left portion of this window. </P>
<P class="desctext">First, select the type of effect to demonstrate: Filters or Transitions.
<BR>
Next, select a filter or transition from the list of effects. If the selected effect supports specific features, the lower left portion of the window contains controls you can use to further modify the effect.
<BR>
<BR>
The code used to generate the effect is shown in the area below.</P>
</SPAN>

<SPAN id=oCodeSpan
style="BACKGROUND: #eeeeee; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-FAMILY: arial; font-size: 9pt; HEIGHT: 254px; LEFT: 300px; POSITION: absolute; TOP: 165px; WIDTH: 500px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; overflow: scroll; z-index: 4">
<SPAN ID="oCodePre" style="BACKGROUND: #eeeeee; HEIGHT: 100%; WIDTH: 50%">
</SPAN>
</SPAN>

<SPAN ID="oControlPanel" style="BACKGROUND: #dddddd; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 245; LEFT: 0px; POSITION: absolute; TOP: 210; WIDTH: 300; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 15px; z-index: 5; background-image:  url(controlbg.gif); background-repeat: no-repeat">
<BR>
<P>Effect Type: <INPUT TYPE=radio NAME="DemoChoice" VALUE="Filters" onclick="switchContent(filterSection)" CHECKED> Filters 
<INPUT TYPE=radio NAME="DemoChoice" VALUE="Transitions" onclick="switchContent(transitionSection)"> Transitions
</P>
<SPAN ID="oContentHolder">
</SPAN>
<SPAN ID="oControlsSpan">
</SPAN>
</SPAN>
下一篇：经常看见有人问能不能实现这个效果：下拉选框中输入文字。想实现的进来看看 >>
相关文章：
© 2006   www.java-asp.net