产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
首页
探索云世界
探索云世界
云上快速入门，热门云上应用快速查找
了解更多
问产品
动手实践
考认证
TIANCHI大赛
活动广场
活动广场
丰富的线上&线下活动，深入探索云世界
任务中心
做任务，得社区积分和周边
高校计划
让每位学生受益于普惠算力
训练营
资深技术专家手把手带教
话题
畅聊无限，分享你的技术见解
开发者评测
最真实的开发者用云体验
乘风者计划
让创作激发创新
阿里云MVP
遇见技术追梦人
直播
技术交流，直击现场
下载
下载
海量开发者使用工具、手册，免费下载
镜像站
极速、全面、稳定、安全的开源镜像
技术资料
开发手册、白皮书、案例集等实战精华
插件
为开发者定制的Chrome浏览器插件
开发者社区 开发与运维 文章 正文

非常基础的JS动画演示

2009-06-16 671
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这个例子使用setTimeout实现非常简单的动画效果。 div{    height:200px;    width:600px;    background-color:#CCCCCC;}#test1{    background:#99CC00;    position:fixed;   ...
+关注继续查看

这个例子使用setTimeout实现非常简单的动画效果。

<style type="text/css">
div{
    height:200px;
    width:600px;
    background-color:#CCCCCC;
}
#test1
{
    background:#99CC00;
    position:fixed;
    left:300px;
    filter:alpha(opacity=0);
}
</style>

 

<div id="test1"></div>
<button onclick="doSome()">测试</button>

 

Code
<script language="javascript">
function $(id)
{
    return document.getElementById(id);
}
function doSome()
{
    this.fadeIn($("test1"));
}

function setOpacity(obj,value)
{
    //debugger;
    if(obj.filters)    
    {
        obj.style.filter='alpha(opacity='+value+')';
    }
    else
        obj.style.opacity=value/100;
    
}

function fadeIn(obj)
{
    for(var i=0;i<=100;i+=5)
    {
        (function(){
            var pos=i;
            setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
        }
        )();
    }
}
</script>

 

 

文章标签：
JavaScript
前端开发
内存技术
HTML5
移动开发
关键词：
JavaScript动画
JavaScript基础
秋天风景
目录
相关文章
EXI-小洲
|
11月前
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符（三）
文章目录 JavaScript 入门基础 - 运算符（三） 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
EXI-小洲
101 0
JavaScript 入门基础 - 运算符（三）
EXI-小洲
|
11月前
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型（二）
JavaScript 入门基础 - 变量 / 数据类型（二）
EXI-小洲
82 0
JavaScript 入门基础 - 变量 / 数据类型（二）
EXI-小洲
|
11月前
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍（一）
JavaScript 入门基础 / 概念介绍（一）
EXI-小洲
95 0
JavaScript 入门基础 / 概念介绍（一）
1387809421166477
|
11月前
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js，最初由网景（现在的Mozilla）公司创建，由于商标冲突原因，其标准版本命名为ECMAScript，但是一般人们还是叫JavaScript，只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系，就像雷峰塔（神话中镇压白娘子的塔）和雷锋。此外js（JavaScript）和jsp（java servlet pages）也没有关系。　　 js的工作分为两部分，一部分属于js语言本身的特性，而另一部需要依靠宿主环境（web浏览器）才能完成。 二、javascri
1387809421166477
94 0
JavaScript的基础使用
auqbllxiu
|
11月前
|
JavaScript 前端开发
js 模块化基础和模块规范AMD、CMD、ES6模块
js 模块化基础和模块规范AMD、CMD、ES6模块
auqbllxiu
73 0
纸飞机博客
|
12月前
|
JavaScript 前端开发
原生js制作选项卡详解，适合无基础的人学习
原生js制作选项卡详解，适合无基础的人学习
纸飞机博客
95 0
原生js制作选项卡详解，适合无基础的人学习
肥晨
|
12月前
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
肥晨
218 1
huihuizi
|
12月前
|
存储 JavaScript 前端开发
JavaScript基础（一篇入门）
JavaScript基础（一篇入门）
huihuizi
163 0
JavaScript基础（一篇入门）
q4qlc6vqsegx4
|
12月前
|
XML JavaScript 前端开发
计算机二级web题目（5）--js（Javascript）基础
计算机二级web题目（5）--js（Javascript）基础
q4qlc6vqsegx4
221 0
DieHunter1024
|
12月前
|
JSON 缓存 JavaScript
JS基础篇（前端面试题整合）（一）
JS基础篇（前端面试题整合）（一）
DieHunter1024
87 0
热门文章
最新文章
1
使用JavaScript实现实时报警功能的办公电脑上网监控软件：前端代码
2
解密 JavaScript 中的 this：作用、行为和陷阱
3
js实现原生ajax
4
javascript函数和BoM编程
5
超适合0基础js对象笔记（10）
6
JavaScript基础入门1
7
(javascript)Vue启动时常见错误及其解决办法
8
超适合0基础js对象笔记（10.）
9
js通过input框输入属性和值，改变div的属性
10
JavaScript红宝书第6章：集合引用类型
1
JS去除字符串的空格
10
2
Kettle使用JavaScript代码处理数据
13
3
使用 JavaScript 和 CSS 的随机颜色生成器
14
4
javaScript基础入门
15
5
使用 JavaScript 和 CSS 的简单字符计数器
11
6
使用 JavaScript 的响应式计数器动画
15
7
JavaScript——03 BOM编程
4
8
javaScript—02 基础入门 （函数的应用）
11
9
使用 JavaScript 和 CSS 的简单图像放大镜
15
10
javascript 多维数组重复slice()方法
7
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
JavaScript 自学手册文档教程 JavaScript入门与实战 Vue.js 入门与实战 Node.js 入门教程文档 前端开发CSS基础 Vue.js完全自学手册图文教程
相关电子书
更多
JavaScript异步编程 Delivering Javascript to World 编程语言如何演化-以JS的private为例
相关实验场景
更多
前端开发基础3：CSS3常见显示属性 前端开发基础6：Node.js和LESS预编译工具 Html5和Webpack2：Webpack5打包JS和样式表 CSS基础教程 搭建Node.js编程环境
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
【ECS生长万物之开源】手动部署Java Web环境（CentOS 7）
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案行业解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告系统状态信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
售前咨询：95187-1
售后服务：400-80-13260
法律声明及隐私权政策Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2023 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4
关注我们：
新浪微博
联系我们
© 2009-2023 Aliyun.com 版权所有<br/>增值电信业务经营许可证： <a href="http://beian.miit.gov.cn/" target="_blank">浙B2-20080101</a> <br/>域名注册服务机构许可： <a href="https://domain.miit.gov.cn/域名注册服务机构/互联网域名/阿里云计算有限公司 " target="_blank">浙D3-20210002</a> <a href="https://domain.miit.gov.cn/域名注册服务机构/互联网域名/阿里巴巴云计算北京有限公司 " target="_blank">京D3-20220015</a>