javascript 在屏幕上用动画显示图像

Question

我是 javascript 的初学者，我偶然发现了这个问题。这是我正在处理的网站标记的一部分:

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

它是简单 Bootstrap 布局的一部分。我想要做的是为 #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)};

它的工作是显示覆盖整个浏览器窗口的图像，但我不知道如何制作“填充”动画。我尝试尝试过渡，但我认为因为我更改了“位置”属性并将元素附加到主体，所以它不起作用。如果有任何帮助或建议，我将不胜感激。

Answer 1

正如 Portal_Zii 已经提到的，您可以在没有 javascript 的情况下使用 CSS3 属性 轻松创建动画，例如:

• > transition
• > animation

有了这些知识，使用 CSS3 transition 属性实现混合解决方案就变得非常简单了，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>