微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

不用jQuery实现的动画效果代码_javascript技巧

php中文网

发布： 2016-05-16 18:16:41

原创

1248人浏览过

不过随着新版本的升级, 体积也慢慢变大了.
24KB, Minified and Gzipped 155KB, Uncompressed Code
压缩并gzip输出24K, 也不小了.
如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.
看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了.

动态云登录界面

动态云登录界面

CSS3+jQuery实现的动态云登录界面，采用的HTML5技术哦，白云飘飘的登录界面效果，逼真的白云特效是使用CSS3实现的，当然了，jQuery也起到了重要作用，不过在传统的HTML中，是无法做到的，期盼HTML早日全面兼容，现在的IE8真让人窝心啊~想研究HTML5技术的，赶快下载特效吧。

动态云登录界面

240

动态云登录界面

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
<P>body {padding:0; margin:0;}
#main {margin: 50px auto;border: 1px solid #ccc;width:700px}
#main img {padding:0 20px; border:none; display:none}</style>
<div id="main">
<img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif"><img alt=""    style="max-width:90%"  style="max-width:90%" src="http://www.jb51.net/images/logo.gif">
</div>
<script type="text/javascript">
(function() {
 var imgs = document.getElementById('main').getElementsByTagName('img'),
 len = imgs.length,
 i = 0;
 (function() {  
  var deep = 0,
   j = i++,
   timer = setInterval(function() {    
    imgs[j].style.opacity = deep;
    imgs[j].style.filter = "alpha(opacity=" + deep * 100 + ")";
    imgs[j].style.display = 'inline';
    deep += 0.1;
    deep >= 1 && clearInterval(timer);
  }, 60);
  if (i >= len) return;
  setTimeout(arguments.callee, 1000);
 })();
})();
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

JavaScript动画编程_Canvas与WebGL高级应用 JavaScript三维渲染_Three.js场景优化技巧持续集成部署_javascript自动化流程水印添加方案_javascript图片处理数据可视化_Canvas渲染引擎

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：入门基础学习 ExtJS笔记（一）_extjs 下一篇：JavaScript类型转换方法及需要注意的问题小结(挺全面)_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

Google Drive API：使用服务账户进行无用户认证访问指南本教程旨在解决在Wix等无用户交互环境中，通过GoogleDriveAPI获取数据时，使用刷新令牌认证失败的问题。文章将详细介绍如何利用Google服务账户进行无缝、安全的服务器到服务器认证，涵盖服务账户的创建、权限配置以及在JavaScript环境中（如WixVelo后端）获取访问令牌并调用DriveAPI的完整实现方案。

2025-11-30 09:40:25

316

React应用中异步数据加载与渲染的健壮性实践：告别页面刷新崩溃本教程针对React应用在页面刷新时因异步数据未加载完成导致崩溃的问题，深入探讨了条件渲染的必要性。我们将从常见的逻辑AND运算符方案入手，逐步引入更专业的解决方案，包括优化初始状态、管理加载和错误状态、利用可选链操作符以及构建健壮的条件渲染逻辑，旨在帮助开发者构建稳定、用户体验友好的React应用。

2025-11-30 09:32:13

177

React中onClick事件处理器的两种常见写法及其性能考量在React中，处理onClick事件时，开发者常会遇到两种写法：直接引用函数和使用匿名函数包装。本文将深入探讨这两种方法的机制、各自的适用场景以及它们在性能上的细微差异。理解这些差异有助于编写更高效、更可维护的React组件。

2025-11-30 09:16:12

862

JavaScript：从点分隔字符串构建嵌套JSON结构本教程将指导您如何使用JavaScript将一个点分隔的键字符串（如global.fontsize.bodyscale）和一个当前值，高效地转换为一个深度嵌套的JSON对象（如{global:{fontsize:{bodyscale:{value:currValue}}}}）。我们将重点介绍Array.prototype.reduceRight()方法的巧妙应用，通过从内到外构建对象结构，实现此功能，提供清晰的代码示例和详细解释。

2025-11-30 08:36:17

887

JavaScript函数式编程_Transducer Transducer是转换reduction过程的高阶函数，通过组合map、filter等操作为单一遍历流程，避免中间数组生成，提升性能。它返回接收reducer并返回增强reducer的函数，如map转换单元值，filter控制流入，再通过compose组合多个转换逻辑，最终在reduce中一次性执行，适用于数组、Observable等支持reduce的数据结构，实现高效、可复用、可组合的数据处理pipeline。

2025-11-30 08:04:02

741

如何正确在Angular父组件中更新子组件的Checkbox状态本文深入探讨了在Angular应用中，当子组件的Checkbox状态需要根据父组件的异步操作（如API调用）结果进行更新时，可能遇到的常见问题及解决方案。我们将学习如何通过父子组件间的正确通信机制，结合Angular的变更检测，确保Checkbox状态在异步操作成功后得到准确且响应式的更新，避免直接@Input绑定失效的情况。

2025-11-30 08:01:17

942

JavaScript表单验证_复杂业务规则处理表单验证需拆分逻辑以提升可维护性，将复杂规则封装为独立函数；2.可通过函数校验日期范围、动态必填项及金额总和限制；3.组合调用验证函数确保数据质量与用户体验。

2025-11-30 00:33:12

146

JavaScript日期处理_时区转换算法 JavaScript中Date对象存储UTC时间戳但显示本地时区，时区转换需理解其UTC本质。通过getTime()获取时间戳并手动加偏移可转时区，但推荐使用Intl.DateTimeFormat结合timeZone选项（如‘Asia/Shanghai’）进行准确格式化，避免构造函数解析错误。处理用户输入时应拼接时区标识或用国际化API，复杂场景建议采用moment-timezone或date-fns-tz等库以确保正确性。

2025-11-29 21:45:07

396

标签模板字面量_javascript模板引擎标签模板字面量通过函数处理模板字符串，可实现如HTML转义等安全操作。

2025-11-29 21:44:02

983

JavaScript算法优化_递归与迭代递归代码简洁但易栈溢出且效率低，迭代性能优但逻辑复杂；应根据问题选择并用记忆化或尾递归优化递归。

2025-11-29 21:44:02

389

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

Node.js 教程

56591次学习
收藏
PHP课程

65418次学习
收藏
【web前端】Node.js快速入门

18516次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部