js は背景アニメーションの分割を実現し、ソース コードを無料で提供します。興味のある友人は、js の知識を高めるために直接学習できます。js に関するソース コードやチュートリアルについては、PHP 中国語 Web サイト にアクセスしてください。自分自身 ~~
コード:
<!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("//m.sbmmt.com/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 を参照してください。中国語のウェブサイト~~
関連する推奨事項:
ネイティブjsは移動可能なプロンプトdivボックスのソースコードを実装します
以上がjsは背景アニメーションの分割を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。