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 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
随机推荐
- hdu3001 Travelling
Travelling Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- openssl数字证书常见格式与协议介绍
原文地址:http://blog.csdn.net/anxuegang/article/details/6157927 证书主要的文件类型和协议有: PEM.DER.PFX.JKS.KDB.CER.K ...
- 关于C++与Java中虚函数问题的读书笔记
之前一直用C++编程,对虚函数还是一些较为肤浅的理解.可近期由于某些原因搞了下Java,发现有些知识点不熟,于是站在先驱巨人的肩上谈谈C++与Java中虚函数问题. Java中的虚函数 以下是段别人的 ...
- linux下tomcat开机自启动
tomcat自启动配置: 方法一: vi /etc/rc.local 添加如下一行 /opt/apache-tomcat-7.0.29/bin/startup.sh (脚本绝对路径) 注意:要添加在e ...
- C++之运算符重载(2)
上一节主要讲解了C++里运算符重载函数,在看了单目运算符(++)重载的示例后,也许有些朋友会问这样的问题.++自增运算符在C或C++中既可以放在操作数之前,也可以放在操作数之后,但是前置和后置的作用又 ...
- 一个坐标点围绕任意中心点旋转--C#实现
假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)逆时针旋转RotaryAngle角度后的新的坐标设为(x', y'),有公式: x'= (x - rx0)*cos(RotaryAngle) ...
- K-means Algorithm
在监督学习中,有标签信息协助机器学习同类样本之间存在的共性,在预测时只需判定给定样本与哪个类别的训练样本最相似即可.在非监督学习中,不再有标签信息的指导,遇到一维或二维数据的划分问题,人用肉眼就很容易 ...
- PHP做好防盗链的基本思想 防盗链的设置方法
盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的服务内容,骗取最终用户的浏览和点击率.受益者不提供资源或提供 ...
- or1200下raw-os(仿真环境篇)
貌似最近都在公司混日子过了,怎么办?哎哎哎~罪过啊罪过,不过也是的,加工资居然没我份,顶领导个肺的,叫我怎么继续活啊~哎哎哎~ 算了,不谈这些鸟事情了,说多了都是泪啊,这篇blog开始我们进入raw- ...
- JavaScript 之 弹出窗口总结
一.javascript 控制窗口关闭及刷新 //关闭弹窗 <script language="javascript"> window.close(); </sc ...