Question

我是javascript的初学者，我偶然发现了这个问题。这是网站i标记的一部分：

        <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)};

它可以显示覆盖整个浏览器窗口的图像，但我不知道如何制作＆＃34;填充＆＃34;动画。我试着尝试过渡，但我认为，因为我改变了位置＆＃39;属性并将元素追加到它不起作用的主体。如有任何帮助或建议，我将不胜感激。

Answer 1

正如Portal_Zii已经提到的，你可以使用 CSS3属性轻松创建没有javascript的动画，只有：

凭借这些知识，可以轻松实现具有CSS3 过渡属性，onmouseenter和onmouseleave事件的混合解决方案。尝试运行代码并重新调整大小窗口。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为你需要做的就是在你的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 no？

中完成此操作

#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;
              }

Answer 3

您可以在课程中描述所有目标的元素属性＆＃39; over＆＃39; css并通过转换元素位置属性来描述动画。然后，当你这个课程结束时＃39;到id = target的元素。

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

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

3 个答案: