我是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)};
它的工作是显示覆盖整个浏览器窗口的图像,但是我不知道如何制作“填充”动画。我尝试进行过渡实验,但我认为由于更改了“ position”属性并将元素附加到正文,因此它不起作用。
如有任何帮助或建议,我将不胜感激。
最佳答案
如Portal_Zii所述,您可以使用CSS3属性轻松创建动画,而无需使用javascript,而仅使用以下代码:
transition
animation
有了这些知识,就可以轻松实现具有CSS3过渡属性,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>
关于javascript - javascript用动画在屏幕上显示图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34773029/