CSS不透明度表現。圖像褪色

看看這個site的首頁這是5張圖片，在旋轉，純css2，html4，javascript中淡入和淡出，並且是跨瀏覽器（據我所知）。 JavaScript有點陳腐 - 前段時間寫過:)但它似乎足夠流暢。看看它是如何在你的機器上。如果它滯後，你可以嘗試一個較慢的更新，比如說150或200ms，而不是100.

來源

2011-01-21 17:03:19

性能主要與JavaScript代碼效率有關。你使用任何框架（jQuery，Mootools）？

順便說一下，新的CSS3 transition將適合這些情況。

在撰寫本文時，它支持Gecko 2（Firefox 4），webkit（Safari和Chrome）和Opera。

因爲CSS轉換規範仍然處於草案階段，與之相關聯的所有屬性必須有自己特定的供應商名稱：

#example { 
    opacity: 0; 

    -o-transition: opacity .3s linear; 
    -moz-transition: opacity .3s linear; 
    -webkit-transition: opacity .3s linear; 
    transition: opacity .3s linear; 
} 

#example:hover { 
    opacity: 1; 
}

什麼不支持的瀏覽器？一個漂亮的解決方案可以瞄準他們（實質上是Firefox < 4和IE），併爲他們發送一些專用的Javascript代碼。對於小休息，總是有優雅的退化原則。

來源

2011-01-21 17:11:57 achairapart

這裏是代碼，對於所有瀏覽器的工作原理：添加到頭：

/* **************************** 
    * updated for all browsers by 
    * Evan Neumann of Orbiting Eden on 
    * October 6, 2011.  
    * www.orbitingeden.com - [email protected] 
    * original version only worked for IE 
    *****************************/ 
<!-- Begin 
    /* ***************************** 
    * * editable by user 
    * ***************************/ 
    var slideShowSpeed  = 5000; // Set slideShowSpeed (milliseconds)  shared by IE and other borwsers 
    var crossFadeDuration = 5; // Duration of crossfade (1/10 second)  shared by IE and other borwsers 
    var crossFadeIncrement = .05; //crossfade step amount (1 is opaque) for non-IE browsers 

    // Specify the image files 
var Pic = new Array();  // do not change this line 
// to add more images, just continue the pattern, adding to the array below 
Pic[0] = 'images/dare2wear-427ED-e.jpg';   
Pic[1] = 'images/PBW_3238EDSM-e.jpg';   
Pic[2] = 'images/dare2wear-441_2ED-e.jpg';  

/* ******************************** 
    * do not change anything below this line 
    **********************************/ 
var f = 0;   //index of the foreground picture 
var b = 1;   //index of the background picture 
var p = Pic.length; //number of pictures loaded and in queue - this may increase as time goes on depending on number and size of pictures and network speed 

//load the picture url's into an image object array 
//used to control download of images and for IE shortcut 
var preLoad = new Array(); 
for (i = 0; i < p; i++) { 
    preLoad[i] = new Image(); 
    preLoad[i].src = Pic[i]; 
} 

function runSlideShow() {//this is trigerred by <body onload="runSlideShow()" > 
    //if IE, use alternate method 
    if (document.all) { 
     document.images.SlideShow.style.filter="blendTrans(duration=2)"; 
     document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; 
     document.images.SlideShow.filters.blendTrans.Apply(); 
    } 

    //increment the foreground image source 
    document.images.SlideShow.src = preLoad[f].src; 

    //if IE, use the shortcut 
    if(document.all) { 
     document.images.SlideShow.filters.blendTrans.Play(); 
    } 
    //all other browser use opacity cycling 
    else { 
     var imageContainer = document.getElementById('imageContainer'); 
     var image   = document.images.SlideShow; 
     //convert an integer to a textual number for stylesheets 
     imageContainer.style.background = "url('"+Pic[b]+"')"; 
     //set opacity to fully opaque (not transparent) 
     image.style.opacity = 1; 
     //run fade out function to expose background image 
     fadeOut(); 
    } 

    //increment picture index 
    f++; 
    //if you have reached the last picture, start agin at 0 
    if (f > (p - 1)) f = 0; 
    //set the background image index (b) to one advanced from foreground image 
    b = f+1; 
    //if b is greater than the number of pictures, reset to zero 
    if(b >= p) {b = 0;} 

    //recursively call this function again ad infinitum 
    setTimeout('runSlideShow()', slideShowSpeed); 
} 

function fadeOut(){ 
    //convert to element 
    var el = document.images.SlideShow; 

    //decrement opacity by 1/20th or 5% 
    el.style.opacity = el.style.opacity - crossFadeIncrement; 
    //if we have gone below 5%, escape out to the next picture 
    if(el.style.opacity <= crossFadeIncrement) { 
     return; 
    } 
    //wait 50 milliseconds then continue on to decrement another 5% 
    setTimeout('fadeOut()', crossFadeDuration*10); 
} 
// End -->

，並添加兩個元素的身體。第一個是容器背景元素。我使用了div，但td，body和其他人也應該工作。第二個是前景圖像。最後，<body>標籤內，添加的onload函數調用

<body onLoad="runSlideShow()"> 
     <!-- this is the main image background --> 
     <div id="imageContainer"> 
     <!-- this is the main image foreground --> 
     <img id="SlideShow" name='SlideShow' width="324" height="486"> 
     </div>

來源

2011-10-07 20:57:22

CSS不透明度表現。圖像褪色

回答

相關問題