與動畫在屏幕上的JavaScript顯示圖像

我是一個JavaScript的初學者，我偶然發現了這個問題。這是標記的一部分從網站我的工作：與動畫在屏幕上的JavaScript顯示圖像

 <div class="row"> 
      <div class="col-lg-12"> 
       <div id="target"> 
        <div id="bgDiv"> 
         <img src ="someurl"> 
        </div> 
       </div> 
      </div> 
     </div>

這是一個簡單的引導佈局的一部分。我想要做的是動畫#target div，以便圖像填充鼠標懸停時的整個瀏覽器屏幕，最好使用純JavaScript。如果我有這個功能做到這一點：

function(){ 
    var target = document.getElementById('target'); 
    function FullScreen { 
      target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999' 
      document.body.appendChild(target);}; 
    target.addEventListener('mouseover', FullScreen)};

它確實顯示圖像覆蓋整個瀏覽器窗口的工作，但我cluless如何使「補」的動畫。我嘗試過渡試驗，但我認爲，因爲我改變'位置'屬性並將元素追加到正文，它不起作用。我將不勝感激任何幫助或建議。

來源

2016-01-13 Ndeesmooth

感謝您的答覆。是的，我知道我可以使用過渡樣式和純CSS，但主要問題是#target div位於「col-lg-12」和「row」div的內部，這就是爲什麼定位它：絕對不會做的伎倆。因此，我的解決方案是在'mouseover'上添加#target div，直接添加到document.body元素。但是當我這樣做時，轉換似乎不起作用。 – Ndeesmooth

試試我的解決方案。通過在事件發生時增加圖像的大小，包裝的div也會開始增長。正如你所看到的，我給圖像的尺寸相對於屏幕而不是父div。它應該=） –

感謝您的迴應，將您的解決方案與適當的定位相結合，我設法達到了預期的效果，謝謝！ – Ndeesmooth

正如Portal_Zii已經提到的，你可以很容易創建使用CSS3屬性只喜歡沒有JavaScript的動畫：

有了這些知識的寧靜簡單用CSS3 tra實施混合解決方案nsition屬性，onmouseenter和onmouseleave事件。嘗試運行代碼和重新調整大小窗口。

var myDiv = document.getElementById("myDiv"); 
 
var myImg = document.getElementById("myImg"); 
 

 
myDiv.onmouseleave = shrinkImage; 
 
myDiv.onmouseenter = growImage; 
 

 
function shrinkImage() { 
 
    myImg.style.width = 50 + "px"; 
 
    myImg.style.height = 50 + "px"; 
 
} 
 

 
function growImage() { 
 
    myImg.style.width = window.innerWidth + "px"; 
 
    myImg.style.height = window.innerHeight + "px"; 
 
}

img { 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: all 0.7s; 
 
}

<div id="myDiv"> 
 
    <img id="myImg" src="data:image/gif;base64,R0lGODlhMAAwAOMAANTS1Ozq7Nze3PT29Nza3PTy9OTm5Pz+/NTW1Ozu7OTi5Pz6/P///wAAAAAAAAAAACH5BAEAAAwALAAAAAAwADAAAAT+kMlJq72YnUDMymAoMgUCAMWorqQJBGy8LMc1EKcSr4sgwJYbAEHYqQInxMBywA1rxlDCJfhUBCaENZppngAG6MTwXXJB02yKkhgCEmfQJknYkr6GOGgg+AbEA1kCegdiFAcFSQhrGlSGOyUvA48MCklVEwgmBGZRfUMCjBNCJ3kSlkOdRmRfCH+HAVlKEmSaojsLsUkAoWIHqLwfbUNwZwcJTkkJW4FZf5FghHxZQwqdbVkDQgjFhGmKCTULlrYHAwbhehQFWK0eDHwAnHHmlBq5Liec5gWTZws4EAhIMIBGhWlu5qmb8gVUgGViFhhwsUhdCzcNiShYJgFRH0z+FiUSoNjwxI8CNAxanIDIgAJq1EDdWtnRXIJ2u0rZo8mygAEsznaGKEQ0BqIABt7VLDTipgAFjI497KfyAlMJNxUoDIHkBCNgGQk8DfBQW9WuKEag7fYpJkY3mggwQjvzQlduE9DmfNtKQY0DE72OCPyGpc2kPrCM1JTP1Bxiat10s7pA24AECZAaCGAFsIvJGe6CHlG04926Fgh341egtevX/fr507BWbZZuumDCLVlRQ63CImpLyFey1W4Bf0/bhkxL026+cIsB/oK6gi7gDBZkRoo0wWZ04B+mo019OV56rHpz/Uzo5QlVGRgKpEG0vv379dklgY+BlDwBYgUw6INYACZm4IAAXmIHCLkV5+CDGQ1RHROE6UYSdLtQNJ4K2r3E2IcghhiiAQUIJUEEADs=" 
 
    /> 
 
</div>

來源

2016-01-13 18:24:57

我認爲所有你需要做的就是添加轉變風格在你的CSS：

#target { 
     -webkit-transition: all .5s ease-in-out; 
     -moz-transition: all .5s ease-in-out; 
     -o-transition: all .5s ease-in-out; 
     transition: all .5s ease-in-out; 
     }

另外，你可以只使用CSS沒有在做到這一點？

#target { DEFAULT:STYLES; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #target:hover { position:absolute; top:0; bottom:0; left:0; right:0; margin:0; padding:0; z-index:999; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

來源

2016-01-13 17:28:50 Patrick

你可以描述的所有目標的元素屬性的CSS中的類「過度」，並通過轉變對你的元素的位置屬性描述的動畫。然後當你將這個類'over'到id = target的元素。

function FullScreen { 
     target.style.classList.add('over')};

來源

2016-01-13 17:33:27 Dmitry

與動畫在屏幕上的JavaScript顯示圖像

回答

相關問題