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

作者： unknow

<HTML>
<HEAD>
<TITLE>DirectX Transform Filters Interactive Demo</TITLE>

<SCRIPT LANGUAGE="javascript">
var browserCapable = true;    // Prevents errors on downlevel browsers
var startImage = "/workshop/graphics/tigerstripe.jpg";
var endImage = "/workshop/graphics/metablob.jpg";
var featuresHeader = "<B>Features:</B><BR>"

function copy2Clipboard()
{
  // Copy currently displayed code to user@#s clipboard.
  textRange = document.body.createTextRange();
  textRange.moveToElementText(oCodeSpan);
  textRange.execCommand("Copy");
}

function highlightText(whatToHighlight) {
  oRng = document.body.createTextRange();
  oRng.moveToElementText(oCodePre);
  oRng.execCommand("RemoveFormat");
  oHL = document.body.createTextRange();
  oHL.moveToElementText(oCodePre);
  oHL.findText(whatToHighlight);
  oHL.execCommand("Bold");
}

function switchContent(obj) {
    oContentHolder.innerHTML=obj.innerHTML;
    oImg.src=startImage;
    if (obj==filterSection){
        changeFilter();
        updateFilterCode();
    }
    else {
        changeTrans();
        updateTransCode();
    }
}

function getControlObject(controlName) {
   for (x=0; x < document.all(controlName).length; x++) {
       objTemp = document.all(controlName,x);
       if (objTemp.parentElement.isSource==null) {
           obj=objTemp;
       }
    }
    return(obj);
}

function changeFilter() {
    selectObject = getControlObject("oSelect");
    selectedValue = selectObject.options[selectObject.selectedIndex].value;
    transitionAsFilter = selectObject.options[selectObject.selectedIndex].TRANS;
    if (selectedValue != "empty") {
        if (selectedValue.indexOf(@#Blur@#)!=-1) {
            oControlsSpan.innerHTML = oBlurControls.innerHTML;
            blurFilterChange();
        }
        else if (selectedValue.indexOf(@#Pixelate@#)!=-1) {
            oControlsSpan.innerHTML = oPixelateControls.innerHTML;
            pixelateFilterChange();
        }
        else if (selectedValue.indexOf(@#DropShadow@#)!=-1) {
            oControlsSpan.innerHTML = oDropShadowControls.innerHTML;
            dropShadowFilterChange();
        }
        else if (selectedValue.indexOf(@#Chroma@#)!=-1) {
            oControlsSpan.innerHTML = oChromaControls.innerHTML;
            chromaFilterChange();
        }
        else if (selectedValue.indexOf(@#BasicImage@#)!=-1) {
            oControlsSpan.innerHTML = oBasicImageControls.innerHTML;
            basicImageFilterChange();
        }
        else {
            oImg.style.filter=selectedValue;
            oControlsSpan.innerHTML = @#@#;
        }
        if (oControlsSpan.innerHTML!=@#@#) {
            oControlsSpan.innerHTML = featuresHeader + oControlsSpan.innerHTML;
        }
        if (transitionAsFilter == "TRUE") {
            oControlsSpan.innerHTML = oControlsSpan.innerHTML + oGlobalControls.innerHTML;
            progressChange();
        }
    }
    else {
            oImg.style.filter=@#@#;
            oControlsSpan.innerHTML = featuresHeader + @#No filter is currently selected.@#;
    }
    updateFilterCode();
}

function updateFilterCode() {
    oCodePre.innerText=imgObj.innerHTML;
}

function blurFilterChange(){
    controlObject = getControlObject("pixelRadiusList");
    pixelRadius = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("shadowOpacityList");
    shadowOpacity = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("makeShadowSwitch");
    makeShadow = controlObject.checked;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrBlur(PixelRadius="+ pixelRadius +"," + "MakeShadow=" + makeShadow + ",ShadowOpacity=" + shadowOpacity +")@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function embossFilterChange(){
    controlObject = getControlObject("embossBiasList");
    bias = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrEmboss()@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function engraveFilterChange(){
    controlObject = getControlObject("engraveBiasList");
    bias = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.CrEngrave()@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function pixelateFilterChange(){
    controlObject = getControlObject("maxSquareList");
    maxSquare = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Pixelate(MaxSquare="+ maxSquare +")@#";
    eval(cmd);
    controlObject = getControlObject("progressList");
    progress = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.filters[0].progress=" + progress + ";";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function dropShadowFilterChange(){
    controlObject = getControlObject("shadowColorList");
    shadowColor = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("offsetXList");
    offX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("offsetYList");
    offY = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("positiveSwitch");
    positive = controlObject.checked;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.dropShadow(Color=" + shadowColor + ",offX=" + offX + ",offY=" + offY + ",positive=" + positive + ")@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function chromaFilterChange(){
    controlObject = getControlObject("chromaColorList");
    chromaColor = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.Chroma(Color="+ chromaColor +")@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function basicImageFilterChange(){
    var cmd;
    controlObject = getControlObject("rotationList");
    rotation = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("mirrorSwitch");
    controlObject.checked==true ? mirror = 1 : mirror = 0
    controlObject = getControlObject("invertSwitch");
    controlObject.checked==true ? invert = 1 : invert = 0
    controlObject = getControlObject("xraySwitch");
    controlObject.checked==true ? xray = 1 : xray = 0
    controlObject = getControlObject("grayscaleSwitch");
    controlObject.checked==true ? grayscale = 1 : grayscale = 0
    controlObject = getControlObject("basicImageMaskSwitch");
    controlObject.checked==true ? mask = 1 : mask = 0
    controlObject = getControlObject("basicImageOpacityList");
    opacity = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("basicImageMaskColorList");
    controlObject2 = getControlObject("maskColorSpan");
    if (mask==0) {
        controlObject2.style.display = @#none@#;
    }
    else {
        controlObject2.style.display = @#inline@#;
    }
    cmd = "oImg.style.filter=@#progid:DXImageTransform.Microsoft.BasicImage(Rotation="+ rotation +",Mirror=" + mirror + ",Invert=" + invert + ",XRay=" + xray + ",Grayscale=" + grayscale + ",Opacity=" + opacity + ",Mask=" + mask ;
    if (mask!=0) {
        maskcolor = controlObject.options[controlObject.selectedIndex].value;
        cmd = cmd +",MaskColor=" + maskcolor;
    }
    cmd = cmd + ")@#";
    eval(cmd);
    updateFilterCode();
    highlightText(cmd);
}

function transStart(arg) {
    obj = getControlObject("oSelect");
    selectedValue=obj.options[obj.selectedIndex].value;
    if (selectedValue != "empty") {
        arg.filters[0].apply();
        if (arg.src.indexOf(startImage)!=-1) {
            arg.src = endImage;
        }
        else {
            arg.src = startImage;
        }
        arg.filters[0].play();
    }
}

返回顶部

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