Rumah >hujung hadapan web >tutorial js >js实现背景动画分裂
js实现背景动画分裂,免费提供源码,有兴趣的朋友可以直接拿去研究研究,来帮助js知识的升华,更多关于js的源码或者教程请到PHP中文网自行搜索~~
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP中文网</title> <style> .container{ margin: 100px auto; width: 500px; height: 500px; line-height: 0; font-size: 0; } .container p{ width: 100px; height: 100px; background-image: url("http://www.php.cn/tpl/Index/Static/img/banner4.jpg"); /*background-repeat: no-repeat;*/ display: inline-block; position: relative; top: 0; left: 0; transition: all 0.5s; } .container p:nth-of-type(3){ } </style> </head> <body> <p> </p> <script> var ps = []; var container = document.getElementsByClassName("container"); for (var i = 0; i < 25; i ++) { var num = Math.floor(Math.random()*200 - 100); ps.push(document.createElement("p")); ps[i].style.top = num + "px"; ps[i].style.left = num + "px"; ps[i].style.backgroundPosition = -i%5*100 + "px " + -Math.floor(i/5)*100 + "px"; console.log(ps[i].style.backgroundPosition); container[0].appendChild(ps[i]); } container[0].onmouseenter = function () { for (var i = 0; i < 25; i ++) { ps[i].style.top = 0 + "px"; ps[i].style.left = 0 + "px"; } }; container[0].onmouseleave = function () { for (var i = 0; i < 25; i ++) { var num = Math.floor(Math.random()*200 - 100); ps[i].style.top = num + "px"; ps[i].style.left = num + "px"; } } </script> </body> </html>
以上是动画分裂的源码,有兴趣的可以拿去研究研究,更多源码和精彩的教程请到PHP中文网浏览哦~~
相关推荐:
Atas ialah kandungan terperinci js实现背景动画分裂. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!