javascript学习之运动框架
模仿新浪博客首页的,最新评论:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; padding: 0;}
#ul1{width: 300px; height: 300px; border:1px solid #000; margin:0 auto;}
#ul1 div{list-style: none; border-bottom:1px dashed #000;padding: 2px;overflow: hidden;filter:alpha(opacity:0);opacity: 0;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload = function(){
var oArea = document.getElementById("area");
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
var oLi = document.createElement("div");//创建内部Div
var aLi = oUl.getElementsByTagName('div');
oLi.innerHTML = oArea.value;
oArea.value = "";//点击发布后清空textarea
if(aLi.length){//如果内部已经有评论,那么就插入在第一个,否则就直接放在大的Div中
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
var iHeight = oLi.offsetHeight;//计算回复Div的高
oLi.style.height = 0;//将Div的高设置为0,完成下面的动画
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
}
};
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var iCur = 0;
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseFloat(getStyle(obj,attr));
}
var iSpeed = (json[attr]-iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) :Math.floor(iSpeed);
if(json[attr] == iCur){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr == "opacity"){
obj.style.filter = 'filter:alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur+iSpeed+"px";
}
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<textarea rows="10" cols="40" id="area"></textarea>
<input type="button" value="发布" id="btn1">
<div id="ul1">
</div>
</body>
</html>
菜鸟一个,大神路过就Ok了~~~
javascript学习之运动框架的更多相关文章
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- Javascript之链式运动框架1
第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- javaScript学习(4)框架学习
javaScript学习4 1.框架 在一个普通HTML文档载入浏览器的同时还创建了一个模型,这个模型始于一个window对象和它包含的文档.单框架窗口和文档很很简单,window下就是documen ...
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
- JS运动学习笔记 -- 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript中的动画的实现以及运动框架的编写(1)
大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...
随机推荐
- WSDL2java简单使用
一.使用工具WSDL2java把接口转为本地可调用的.java文件 工具的目录结构: 设置WSDL2Java(URL).bat中的参数 set Axis_Lib=.\lib set Java_Cmd= ...
- PHP用curl伪造IP和来源
以前没有这么搞过. 今天群里一个朋友在问这个问题. 查了下,CURL确实很强悍的可以伪造IP和来源. 1.php 请求 2.php . 1.php代码: $ch = curl_init(); curl ...
- MySQL Cluster 数据分布(分区、分组)
数据分布 1.MySQL Cluster自动分区数据表(也可能使用用户自定义分区),将数据分布到分区中: 2.一个数据表被划分到多个Data Node分区中,数据在分区中被”striped”: 3.主 ...
- MySQL 5.5编译安装
MYSQL数据库安装方法 yum/rpm方式安装mysql 只要执行yum install mysql-server即可. yum/rpm方式安装mysql应用场景:yum/rpm安装适用对数据库要求 ...
- ViewPager切换滑动速度修改
ViewPager的setCurrentItem 滑动速度是写死地 下面的方法可以修改,在此以做记录 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- [Keygen]IntelliJ IDEA 14.1.7
IntelliJ IDEA 14.1.7 Keygen package com.candy.keygen.intelliJIdea; import java.math.BigInteger; impo ...
- FreeImage编译及遇到问题解决
FreeImage编译及遇到问题解决 1.下载freeImage源码包 wget http://downloads.sourceforge.net/freeimage/FreeImage3170.zi ...
- openstack网络(neutron)模式之GRE的基本原理
neutron网络目的是为OpenStack云更灵活的划分网络,在多租户的环境下提供给每个租户独立的网络环境. neutron混合实施了第二层的VLAN和第三层的路由服务,它可为支持的网络提供防火墙, ...
- servlet 之request
request对象中其他功能 一.转发和包含 转发==>用于一个servlet和一个jsp合作处理 servlet用于处理逻辑.jsp用于显示 ...