jQuery效果之“满天星”

最新推荐文章于 2024-01-12 10:46:00 发布

小欣的blogs

最新推荐文章于 2024-01-12 10:46:00 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cedricdx/article/details/101361718

版权

该博客介绍了如何利用jQuery创建一个‘满天星’的视觉效果。文章分为四个部分，包括HTML代码片段用于构建基本结构，JS代码片段用于实现星星的动态行为，CSS代码片段负责样式设置，以及引入了jQuery-1.11.1.js库来支持整个效果的运行。

摘要由CSDN通过智能技术生成

jQuery效果之“满天星”

html代码片段


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="2.css">
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript" src="1.js"></script>

</head>
<body>
	<div class="stars"> 
    </div>
</body>
</html>

js代码片段

$(document).ready(function(){
  var stars=800;
  var $stars=$(".stars");
  var r=800;
  for(var i=0;i<stars;i++){
    var $star=$("<div/>").addClass("star");
    $stars.append($star);
  }
  $(".star").each(function(){
    var cur=$(this);
    var s=0.2+(Math.random()*

最低0.47元/天解锁文章

小欣的blogs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果之“满天星”

jQuery效果之“满天星”html代码片段js代码片段css代码片段引入的是jquery-1.11.1.js 文档html代码片段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <l...
复制链接

扫一扫

专栏目录