ホームページ > 記事 > ウェブフロントエンド > jsは背景アニメーションの分割を実装します
jsは背景アニメーションの分割を実装します
- 韦小宝オリジナル
- 2017-11-20 10:11:232098ブラウズ
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("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 を参照してください。中国語のウェブサイト~~
関連する推奨事項:
ネイティブjsは移動可能なプロンプトdivボックスのソースコードを実装します
以上がjsは背景アニメーションの分割を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで三角形や平行四辺形を描く方法次の記事：CSSで三角形や平行四辺形を描く方法