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 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
随机推荐
- python求3的倍数与和
suqares=[] i=1 sum=0 while i<=100: i+=1 if i*3: sum=sum+i # print(i) suqares.append(i*3) # print( ...
- 正则表达式（Regular Expression）
匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^\x00-\xff] 评注:可以用来计算字符串的 ...
- CSS模块化
1. Base2. Layout3. Module4. State5. Theme 1) Base rules Base rules are the defaults. eg: ;; } input[ ...
- HDU 4121 Xiangqi 模拟题
Xiangqi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4121 ...
- 线性求中位数 poj2388
在做uva11300时,遇到了n < 1000 000的中位数,就看了一下线性求中位数. 该算法的最差时间复杂度为O(N^2),期望时间复杂度为O(N),证明推理详见算法导论P110. 和快排的 ...
- webqq 获得好友列表hash算法 获得最新hash的方法
webqq获得好友列表的hash算法,大约每一个月中旬会变动一次.知道怎么获得他就能够了. js文件路径 http://web.qstatic.com/webqqpic/pubapps/0/50/eq ...
- ios--uitextfield动态限制输入的字数(解决方式)
1.定义一个事件: -(IBAction)limitLength:(UITextField *)sender { bool isChinese;//推断当前输入法是否是中文 if ([[[UIText ...
- Ping pong
Ping pong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Visual studio 2013 添加 GitHub
- python(6)- shelve模块
前面学习了pickle,这两个可以将数据持久化存储到硬盘上,在实际应用中,我们可能会多次将数据dump到同一文件里,试一下: import pickle data = {'k1':123, 'k2': ...