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 중국어를 방문하세요. website~~
관련 추천:
Native js는 이동 가능한 프롬프트 div 상자 소스 코드를 구현합니다.
위 내용은 js는 배경 애니메이션 분할을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!