注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发Asp → 文章内容

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

作者:IT 来源:不详 发布时间:2007-9-2 0:08:35
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>
http://www.itcnw.com/
  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体
关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved