JavaScript动画附源码(一)
以上是纯CSS+JavaScript实现的。点击关闭按钮可以动态关闭这个方框。兼容IE/FF/Chrome。这样的效果如果用jquery实现起来必须是So Easy的,但是我想通过这段代码表达用JavaScript实现动画过程也是很简单的。
2,实现过程:
2.1 基础html代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>14-10-8</title>
</head>
<body>
<div id="error" style="width: 600px;height: 400px;">
<div class="close" id="button">×</div>
</div>
</body>
</html>
2.2 CSS实现总体样式
实现的有:
1) 展示一个有背景颜色的DIV。
2)在div的右上角添加一个"关闭"按钮。这个"关闭"按钮不是用图片实现的,所以添加了很多的样式控制这个按钮。
3)给这个关闭按钮添加了一个光标进入的事件。兼容IE/FF/Chrome。当鼠标进入后按钮显示圆角背景(不兼容IE8以下)。
#error{
background: #313D44;
width: 600px;
height: 400px;
position: relative;
}
.close{
border:1px solid transparent;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 11px;
font-size: 20px;
color: #FFFFFF;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.close:hover{
border: 1px solid #000000;
background: mediumvioletred;
color: #F9F9F9;
}
2.3 JavaScript实现动画效果
这段代码实现的功能其实也很简单。就是实现的点击关闭按钮之后动态的关闭背景DIV。
window.onload=function(){
document.getElementById("button").onclick=function(){
// 隐藏按钮
document.getElementById("button").style.display="none";
// 调用动画函数
go();
}
};
function go(){
var newWidth = parseInt(document.getElementById("error").style.width)-30;
var newHeight = parseInt(document.getElementById("error").style.height)-20;
if(newWidth>=0){
document.getElementById("error").style.width=newWidth+"px";
}
if(newHeight>=0){
document.getElementById("error").style.height=newHeight+"px";
}
if(newWidth!=0&&newHeight!=0){
setTimeout(function(){
go();
},10);
}
}
3.全部代码:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>14-10-8</title>
<style type="text/css">
#error{
background: #313D44;
width: 600px;
height: 400px;
position: relative;
}
.close{
border:1px solid transparent;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 11px;
font-size: 20px;
color: #FFFFFF;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.close:hover{
border: 1px solid #000000;
background: mediumvioletred;
color: #F9F9F9;
}
</style>
<script>
window.onload=function(){
document.getElementById("button").onclick=function(){
// 隐藏按钮
document.getElementById("button").style.display="none";
go();
}
};
function go(){
var newWidth = parseInt(document.getElementById("error").style.width)-30;
var newHeight = parseInt(document.getElementById("error").style.height)-20;
if(newWidth>=0){
document.getElementById("error").style.width=newWidth+"px";
}
if(newHeight>=0){
document.getElementById("error").style.height=newHeight+"px";
}
if(newWidth!=0&&newHeight!=0){
setTimeout(function(){
go();
},10);
}
}
</script>
</head>
<body>
<div id="error" style="width: 600px;height: 400px;">
<div class="close" id="button">×</div>
</div>
</body>
</html>
JavaScript动画附源码(一)的更多相关文章
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 精选9个值得学习的 HTML5 效果【附源码】
这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
随机推荐
- hdu 4494 Teamwork 最小费用最大流
Teamwork Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4494 ...
- CircleDisplay
https://github.com/PhilJay/CircleDisplay
- [MODx] 1. Add Html5 template into the MODx
1. Connet MODx by SSH: Go to the MODx cloud; Find you current user and right click selet Edit Cloud; ...
- oc-12-NSString 类简单介绍及用法
// 11-[掌握]NSString 类简单介绍及用法 #import <Foundation/Foundation.h> int main(int argc, const char * ...
- mysql 5.6 原生Online DDL解析
http://seanlook.com/2016/05/24/mysql-online-ddl-concept/ 做MySQL的都知道,数据库操作里面,DDL操作(比如CREATE,DROP,ALTE ...
- Cordova 3.0 Plugin 安装 及"git" command line tool is not installed
根据http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface Windows命令行 ...
- Word2010 清除样式
使用场景 有时候我们在网页上面粘贴一些精华文章或者从去整理别人已经完成的word的时候,会发现它自带的格式,可能并不是我们所理想的格式,所以此时就不得不去重新编辑其格式,但是word里 ...
- RedHat Enterprise Linux下配置yum源（尝试过的可行方案）
转自:http://bbs.51cto.com/thread-861410-1.html 一.在linux 6.1中本地yum源配置:首先编辑yum源配置文件我们可以再这个目录中新创建一个配置文件,v ...
- linux之chmod
文件/目录权限设置命令:chmod 这是Linux系统管理员最常用到的命令之一,它用于改变文件或目录的访问权限.该命令有两种用法: 用包含字母和操作符表达式的文字设定法 其语法格式为:chmod [w ...
- JSONP(处理跨域问题)
Ajax直接请求普通文件存在跨域无权限访问的问题 凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe& ...