jquery实现星星闪烁功能

武凌渡情劫

已于 2023-01-20 20:46:41 修改

阅读量921

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

于 2023-01-20 18:39:57 首次发布

本文链接：https://blog.csdn.net/qq_35146837/article/details/128742940

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

实现星星闪烁功能，其实很简单，来看一下完整的代码实现吧！

<style>
	*{margin:0;padding:0;}
	#box{width:700px;height:700px;background-color:rgb(0,153,255);position:relative;}
	#box span{background-image:url(image/1.png);width:16px;height:21px;}
</style>
<body>
	<div id="box">
		
	</div>
</body>
<script>
	$(function(){
		var len=50;
		for(var i=0;i<len;i++){
			var x=Math.floor(Math.random()*$("#box").innerWidth())+"px";//每一颗星星距离图片背景左边的像素值
			var y=Math.floor(Math.random()*$("#box").innerHeight())+"px";//每一颗星星距离图片背景右边的像素值
	}
		hide();//一开始全部隐藏
		$("#box").append("<span style='left:"+x+";top:"+y+";'></span>");//随机添加这50颗星星
		function hide(){
			$("#box span").animate({opacity:0},20,function(){//透明度为0，即隐藏
				show();
		});
	}
		function show(){
			$("#box span").animate({opacity:1},30,function(){//透明度为1，显示
				hide();
		});
	}
})
</script>