JAVASCRIPT&CSS之RUN SUN

使用jQuery实现动画效果
最新推荐文章于 2023-04-14 21:54:08 发布
原创 最新推荐文章于 2023-04-14 21:54:08 发布 · 359 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JAVASCRIPT #CSS #RUN #SUN 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  animate();
  $(".play").click(animate).mouseover(function(){
    $(".play").css({"background-color":"#A55"});
  }).mouseout(function(){
    $(".play").css({"background-color":"#060"});
  });
});
function animate(){
    $('div>div>div').each(function(id){
    $(this).css({
      position: 'relative',
      top: '-200px',
      opacity: 0
    });
    var wait = Math.floor((Math.random()*3000)+1);
    $(this).delay(wait).animate({
      top: '0px',
      opacity: 1
    },1000);
  });
}

  </script>
<title>SUN</title>
<style type="text/css">
body {
	margin: 50px;
	background-color: #2C3437;
}
.content {
	display: inline-block;
	width: 350px;
	height: 239px;
	margin-right: -4px;
}
.play {
	cursor: pointer;
	background-color: #060;
}
div>div {
	display: block;
	height: 20px;
}
div>div>div {
	width: 16px;
	height: 16px;
	background-color: #FFF;
	display: inline-block;
	float: right;
	margin: 2px;
}
</style>
<body>
<p style="color:red; font-size:24px;">SUN</p>
<div class='content'>
  <div style='padding-right:20px'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:122px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div style='margin-right:142px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div style='margin-right:142px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div style='margin-right:142px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div style='margin-right:122px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div style='padding-right:0'>
    <div></div>
  </div>
  <div style='padding-right:0'>
    <div style="margin-right:-22px"></div>
  </div>
  <div style='padding-right:0'>
    <div style="margin-right:-22px"></div>
  </div>
  <div style='padding-right:0'>
    <div style="margin-right:-22px"></div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:122px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class='content'>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:202px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:20px'>
    <div></div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:40px'>
    <div></div>
    <div style='margin-right:122px'> </div>
  </div>
  <div style='padding-right:60px'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class='content'>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:202px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:182px' class='play'> </div>
    <div></div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:162px' class='play'> </div>
    <div style='margin-right:22px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:142px' class='play'> </div>
    <div style='margin-right:42px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:122px' class='play'> </div>
    <div style='margin-right:62px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:102px' class='play'> </div>
    <div style='margin-right:82px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:82px' class='play'> </div>
    <div style='margin-right:102px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:62px' class='play'> </div>
    <div style='margin-right:122px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:42px' class='play'> </div>
    <div style='margin-right:142px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:22px' class='play'> </div>
    <div style='margin-right:162px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:2px' class='play'> </div>
    <div style='margin-right:182px'> </div>
  </div>
  <div style='padding-right:0'>
    <div></div>
    <div style='margin-right:202px'> </div>
  </div>
</div>
</body>
</html>
计算机软件-编程源码-HTML、JAVASCRIPT与JAVA.zip
05-23
Java的特点包括“一次编写，到处运行”（Write Once, Run Anywhere，WORA），它的字节码可以在任何支持Java虚拟机（JVM）的平台上运行。Java广泛应用于企业级应用、Android应用开发、大数据处理等领域。Java有丰富的...
黑马程序员：HTML & CSS & javascript & DOM
伊斯之深の生死簿
10-25 1532
----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------ HTML： eclipse的插件：编辑ＨＴＭＬ的插件aptana HTML就是超文本标记语言的简写，是最基础的网页语言 通过标签来定义的语言，代码都是有标签所组成，不区分大小写 单引号，双引号，不带引号都可以，
JavaScript基础之一JavaScript的邂逅
LUFANZHENG的专栏
10-12 770
JavaScript基础之一JavaScript的邂逅
JavaScript高级程序设计系列一之DOM&BOM
FYSGXFZ的博客
11-21 673
简短介绍 本人是学习后端的，刚毕业来到公司，有幸能够跟着郑大的老师做项目。是他为我打开了语言的另一扇大门，同时使我能够先接触JS，然后还能有机会接触JAVA。由于目前接触JS比较多，加之本人也想深入掌握JS的一些原理，就在csdn上面整理一下思路，同时深入剖析一些JS的核心知识吧。 且行且学习，目前(2020.11.19)在使用Vue，昨天刚结束一个周期二十多天的权限管理系统前端，对Vue也算入了门，但是这哪儿行啊，Vue内部报错了基本上依赖网络(度娘)，哼哼哼，准备以Vue为切入点，深入理解JS核心知
原生js基础之JavaScript的发展历史
Meng_1314__的博客
04-14 262
html是页面的框架，css是页面的表现形式，js是页面的行为。
前端动态网页技术JS（JavaScript)
空城的博客
11-11 8951
目录 静态网页和动态网页 动态网页 网页是如何和后端交互的呢？ JS概述 什么是JS 名词解释 特点和优势 入门案例 HTML中引入JS 通过script标签引入JS代码 通过script标签引入外部的JS文件 JS语法 注释 基本数据类型 JS的变量 JS的运算符 静态网页和动态网页 动态网页 我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。 日常展现是已经足够了，但
前端基础-JavaScript（行为层）
锋声的博客
09-13 840
文章目录
web前端基础html,css,js,jquery
weixin_57619565的博客
08-04 2231
目录 1 前端技术： 1.1 学习方法 1.1.1 前端要怎么学？ 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2.5 去掉px转rem提示 1.2.6
JavaScript学习
m0_53323393的博客
03-14 656
JavaScript 1、简介 JavaScript 是脚本语言 ECMAScript 可以理解为JavaScript的一个标准 2、入门 2.1、引入 内部标签 <script> //.... </script> 外部引入 <script src="..."> </script> script标签必须成对出现 2.2、基本语法 与Java语法相同 JavaScript严格区分大小写 定义数据类型不区分浮点数和整数 在浏览器控制台打印变量
HTML+CSS+JavaScript基础知识
u010975449的专栏
07-21 8195
第一部分：HTML 一、简介HTML 1、HTML（Hyper Text Mark-up Language超文本标记语言）的缩写（标记：就是用来描述网页内容的一些特定符号）。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。 2、HTML文档的创建方式： 手工直接编写（例如记事本）
ibatis例子加教程&java&javascript&dhtml&正则表达式工具
10-26
DHTML（Dynamic HTML）是指一组技术的组合，包括HTML、CSS（层叠样式表）和JavaScript，用于创建具有动态效果的网页。DHTML允许开发者在不刷新整个页面的情况下更新部分网页内容，创建动画效果、交互式表单和下拉...
sun
03-16
至于压缩包内的"sun-main"，可能是包含一个主目录或者主要代码文件，这可能是一个简单的HTML文件，也可能是一个复杂的Web项目，包括HTML、CSS、JavaScript文件以及可能的图片和其他资源。若要深入了解这个项目，我们...
aulas_javascript：Java简介
02-15
Java是一种广泛使用的面向对象的编程语言，由Sun Microsystems（现已被Oracle公司收购）于1995年推出。它的设计目标是具有简单性、面向对象、健壮性、安全性、可移植性、高效性以及多线程等特性。Java的设计理念是...
lenz0a89.gsd Lenze E84AYCPM gsd
12-05
lenz0a89.gsd Lenze E84AYCPM gsd
【大厂+2025】500+真题考点合规备考双通！.zip
12-05
【大厂+2025】500+真题考点合规备考双通！.zip
【微服务架构】基于Spring Cloud Alibaba的秒杀系统设计：高并发场景下库存超卖与分布式事务解决方案
12-05
内容概要：本文详细介绍了“秒杀商城”微服务架构的设计与实战全过程，涵盖系统从需求分析、服务拆分、技术选型到核心功能开发、分布式事务处理、容器化部署及监控链路追踪的完整流程。重点解决了高并发场景下的超卖问题，采用Redis预减库存、消息队列削峰、数据库乐观锁等手段保障数据一致性，并通过Nacos实现服务注册发现与配置管理，利用Seata处理跨服务分布式事务，结合RabbitMQ实现异步下单，提升系统吞吐能力。同时，项目支持Docker Compose快速部署和Kubernetes生产级编排，集成Sleuth+Zipkin链路追踪与Prometheus+Grafana监控体系，构建可观测性强的微服务系统。; 适合人群：具备Java基础和Spring Boot开发经验，熟悉微服务基本概念的中高级研发人员，尤其是希望深入理解高并发系统设计、分布式事务、服务治理等核心技术的开发者；适合工作2-5年、有志于转型微服务或提升架构能力的工程师； 使用场景及目标：①学习如何基于Spring Cloud Alibaba构建完整的微服务项目；②掌握秒杀场景下高并发、超卖控制、异步化、削峰填谷等关键技术方案；③实践分布式事务（Seata）、服务熔断降级、链路追踪、统一配置中心等企业级中间件的应用；④完成从本地开发到容器化部署的全流程落地； 阅读建议：建议按照文档提供的七个阶段循序渐进地动手实践，重点关注秒杀流程设计、服务间通信机制、分布式事务实现和系统性能优化部分，结合代码调试与监控工具深入理解各组件协作原理，真正掌握高并发微服务系统的构建能力。
MATLAB基于3D FDTD的微带线馈矩形天线分析[用于模拟超宽带脉冲通过线馈矩形天线的传播，以计算微带结构的回波损耗参数]
最新发布
12-05
MATLAB基于3D FDTD的微带线馈矩形天线分析[用于模拟超宽带脉冲通过线馈矩形天线的传播，以计算微带结构的回波损耗参数]内容概要：本文介绍了基于3D FDTD（时域有限差分）方法在MATLAB平台上对微带线馈电的矩形天线进行分析的技术方案，旨在模拟超宽带脉冲通过该天线结构的传播过程，并重点计算微带结构的回波损耗参数。该方法通过数值仿真手段精确建模电磁波在天线中的传播特性，适用于高频电磁场仿真与天线性能评估，能够有效支持天线设计优化。文中可能涵盖FDTD算法的基本原理、网格划分、边界条件设置、激励源配置及结果后处理等关键环节。; 适合人群：具备电磁场与微波技术基础知识，熟悉MATLAB编程，从事天线设计、射频工程或相关领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①开展超宽带天线的设计与性能仿真；②研究微带天线在脉冲激励下的瞬态响应特性；③计算和优化天线的回波损耗（S11参数），提升匹配性能；④教学与科研中用于电磁仿真方法的实践训练。; 阅读建议：建议读者结合FDTD理论基础与MATLAB编程实践，逐步实现仿真流程，重点关注时间步长、空间网格精度和边界条件对仿真结果的影响，并通过对比仿真与实测数据验证模型准确性。
使用PPG估算心率-SpO2的Matlab开发.zip
12-05
使用PPG估算心率_SpO2的Matlab开发.zip
Java实现的面向对象软件设计模式完整代码示例与详细解析项目_该项目是一个全面系统深入讲解经典GoF设计模式在Java语言中具体实现的代码仓库与学习资源库涵盖了创建型模式如单.zip
12-05
Java实现的面向对象软件设计模式完整代码示例与详细解析项目_该项目是一个全面系统深入讲解经典GoF设计模式在Java语言中具体实现的代码仓库与学习资源库涵盖了创建型模式如单.zip
Sundance Water网站废弃项目的React技术栈解析
提取文本Webpack插件（ExtractTextPlugin）是一个用于Webpack的插件，它的主要功能是将CSS从打包后的JavaScript中分离出来，形成独立的CSS文件。这在生产环境中尤其有用，因为它可以改善页面加载时间，并允许浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值