如何轉換CSS值的更改？

我正在使用JavaScript來更改CSS值，以便在單擊按鈕時使特定div填充頁面。但是我想從小到平滑地填充屏幕。我如何使用CSS或Javascript做到這一點？這是目前我如何改變該div如何轉換CSS值的更改？

function fullscreen(){ // called when button is clicked 

      var d = document.getElementById('viewer').style; 
      if(!isFullscreen){ // if not already fullscreen change values to fill screen 
       d.width = "100%"; 
       d.height="100%"; 
       d.position= "absolute"; 
       d.left="0%"; 
       d.top="0%"; 
       d.margin="0 0 0 0"; 
       isFullscreen = true; 
      }else{  // minimizie it 
       d.width="600px"; 
       d.height="400px"; 
       d.margin="0 auto"; 
       d.position="relative"; 
       isFullscreen = false; 
      } 
     }

的大小如何從全屏值變化碼以最小化的值是一個平穩過渡，而不是瞬間？

來源

2011-08-22 deztructicus

你試過jQuery和它的.Animation（）？ – diceler

@Ziga可以更改div的動畫從一個值到另一個？ – deztructicus

是的，它可以。看看這個 - [jQuery.Animated（）]（http://api.jquery.com/animate/） – diceler

使用jQuery'sanimate()功能！

例如：

function fullscreen(){ // called when button is clicked 

     var o = {} // options 
     var speed = "fast"; // You can specify another value 
     if(!isFullscreen){ // if not already fullscreen change values to fill screen 
      o.width = "100%"; 
      o.height="100%"; 
      o.left="0%"; 
      o.top="0%"; 
      o.margin="0 0 0 0"; 
      $("#viewer").animate(o,speed); 
      isFullscreen = true; 
     }else{  // minimize it 
      o.width="600px"; 
      o.height="400px"; 
      o.margin="0 auto"; 
      $("#viewer").animate(o,speed); 
      isFullscreen = false; 
     } 
    }

來源

2011-08-22 10:23:30 Luc125

哦，沒問題。我做了研究，發現Jquery實際上是一個圖書館。它現在起作用，我只是稍微調整一下。謝謝 – deztructicus

雖然我有一個問題，當它最小化時，div不會返回到窗口的中心，（它走向左上角）我使用「margin：0 auto」，但它不工作（它的工作原理當我不做轉換 – deztructicus

我認爲這是因爲'$ .animate'不適用於非數字屬性值，如'「0 auto」'，請嘗試替換'o.margin =「0 auto」; $（「#viewer」）。animate（o，speed）;'with'$（「＃viewer」）。animate（o，speed）; $（「＃viewer」）.css（「margin」，「0 auto」） ;'。 – Luc125

您可以通過使用jQuery做這個，.animate() API請參閱參考.animate()

我創建使用.animate()點擊Demo看到例如小的演示。

來源

2011-08-22 10:23:19

你想要做的是相當複雜的，首先你需要獲得文檔中的元素的絕對位置和尺寸，文件本身也維度，則是沒有原生的跨平臺的JavaScript函數，但有已知的技術來找出這些值，做一個搜索。因此，假如你將自己實現這些功能：getAbsoluteLeft()，getAbsoluteTop()，getWidth()，getHeight()，getDocWidth()和getDocHeight()這裏是動畫代碼（未測試）：

function fullscreen(){ // called when button is clicked 

    var e = document.getElementById('viewer'); 
    var d = e.style; 


    if(!isFullscreen){ // if not already fullscreen change values to fill screen 

     var duration = 1000 //milliseconds 
     var framesPerSecond = 24; 
     var beginLeft = getAbsoluteLeft(e); 
     var beginTop = getAbsoluteTop(e); 
     var beginRight = beginLeft + getWidth(e); 
     var beginBottom = beginTop + getHeight(e); 
     var endLeft = 0; 
     var endTop = 0; 
     var endRight = getDocWidth(); 
     var endBottom = getDocHeight(); 

     var totalFrames = duration/(1000/framesPerSecond); 
     var frameNo = 0; 

     var leftStep = (beginLeft - endLeft)/totalFrames; 
     var topStep = (beginTop - endTop)/totalFrames; 
     var rightStep = (endRight - beginRight)/totalFrames; 
     var bottomStep = (endBottom - beginBottom)/totalFrames; 

     var func = function() { 
      var left = beginLeft - leftStep * frameNo; 
      var top = beginTop - topStep * frameNo; 
      d.left = left+'px'; 
      d.top = top+'px'; 
      d.width = (beginRight + rightStep * frameNo - left)+'px'; 
      d.height = (beginBottom + bottomStep * frameNo - top)+'px'; 
      ++frameNo; 
      if(frameNo == totalFrames) { 
       clearInterval(timer); 
       d.width = "100%"; 
       d.height="100%";    
       d.left="0%"; 
       d.top="0%"; 
       isFullscreen = true; 
      } 
     } 

     d.position= "absolute"; 
     d.margin="0 0 0 0"; 

     timer = setInterval(func, 1000/framesPerSecond); 


    } else {  // minimizie it 
     d.width="600px"; 
     d.height="400px"; 
     d.margin="0 auto"; 
     d.position="relative"; 
     isFullscreen = false; 
    } 
}

來源

2011-08-22 11:26:16 nobody

如何轉換CSS值的更改？

回答

相關問題