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 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
随机推荐
- sql2008“备份集中的数据库备份与现有数据库不同”解决方法
因为是在另一台电脑对同名数据库做的备份,用常规方法还原,提示不是相同数据库,不让还原,在网上找到下面的方法解决了: 一.右击系统数据库master,新建查询 执行以下SQL代码: RESTORE DA ...
- cocos2d-x CCArray
转自:http://blog.csdn.net/onerain88/article/details/8164210 1. CCArray只是提供了一个面向对象的封装类 其继承于CCObject类(CC ...
- UVa10050 Hartals
// 题意:输入n和p个整数H[i],其中H[i]表示每H[i]天会有一次活动(但周五周六除外).输出前n天中有多少天有活动.模拟从周日开始. #include<cstdio> #in ...
- TChromeTabs 优化改进
已知未解决问题 全屏时当窗体失去焦点,则会显示出未绘制完成的原标题栏(Fixed): 处于非 Areo 效果下时,窗体标题栏需要定制. 新增按钮上的 Hint 提示后再移至其它标签,将无法重新提示. ...
- 参数对象Struts2中Action的属性接收参数
题记:写这篇博客要主是加深自己对参数对象的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. Action中三种传递并接受参数: 1. 在Action添加成员属性接受参数 例如请求的 ...
- Cocos2D Study - Preparation & Installation
---------------------------------------------------------------------------------------------------- ...
- Codeforces Round #327 (Div. 2) B. Rebranding 水题
B. Rebranding Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/591/problem ...
- 【转】DLX 精确覆盖 重复覆盖
问题描述: 给定一个n*m的矩阵,有些位置为1,有些位置为0.如果G[i][j]==1则说明i行可以覆盖j列. Problem: 1)选定最少的行,使得每列有且仅有一个1. 2)选定最少的行,使得每列 ...
- mydumper原理5
前言 之前介绍了Oracle官方的多线程逻辑导入导出工具mysqlpump,但已经操作过的同学会发现其多线程的单位还是表,换句话说, 单表依然是 单线程导出 .网易早已使用mydumper/myloa ...
- css 设置全屏背景图片
<div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...