ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブ JS を使用して星空のエフェクトを作成する方法
ネイティブ JS を使用して星空のエフェクトを作成する方法
- php中世界最好的语言オリジナル
- 2018-06-04 17:26:532547ブラウズ
今回はネイティブjsを使って星空エフェクトを作成する方法を紹介します。 ネイティブjsを使って星空エフェクトを作成する際の注意点は何ですか？
コードは次のとおりです: //自分で画像を追加してパスを変更します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{height: 100%;}
body{background: url(img/bg.jpg) no-repeat center top/cover;margin: 0;margin: 0;height: 100%;}
//图片路径修改处
img{width: 20px;position: absolute;}
</style>
</head>
<body>
<script type="text/javascript">
//创建img
function FireWorm(){
this.node=document.createElement("img");
this.node.src="img/1.jpg"; //图片路径修改处
}
//确定img的位置
FireWorm.prototype.getpos=function(){
var Cw=document.documentElement.clientWidth;
var Ch=document.documentElement.clientHeight;
this.Left=Math.floor(Cw*Math.random()-50);
this.Top=Math.floor(Ch*Math.random()-50);
}
//显示img位置
FireWorm.prototype.showpos=function(){
this.getpos();
this.node.style.left=this.Left+"px";
this.node.style.top=this.Top+"px";
document.body.appendChild(this.node);
}
//让img飞
FireWorm.prototype.fly=function(){
this.getpos();
var _this=this;
startMove(this.node,{left:this.Left,top:this.Top},function(){
_this.fly();
})
}
for(var i=0;i<300;i++){
var oFireWorm =new FireWorm();
oFireWorm.showpos();
oFireWorm.fly();
}</script>
</body>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連情報に注目してください。 PHP 中国語 Web サイトの記事をご覧ください。
推奨書籍:
以上がネイティブ JS を使用して星空のエフェクトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。