链式运动实例 运动框架应用 微博

源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>微博效果</title>

<style>

*{

margin:0;

padding:0;

}

#txt{

color:#090;

}

#oul{

width:700px;

height:500px;

display:block;

border:1px solid #000;

position:relative;

left:700px;

overflow:hidden;

}

#oul li{

color:#9FC;

list-style:none;

width:700px;

border-bottom:#000 1px dashed;

opacity:0;

overflow:hidden;

}

</style>

<script src="完美运动框架.js" type="text/javascript"></script>

<script>

window.onload=function(){

var Txt=document.getElementById(‘txt‘);

var oBt=document.getElementById(‘obt‘);

var oUl=document.getElementById(‘oul‘);

oBt.onclick=function(){

var oLi=document.createElement(‘li‘);

oLi.innerHTML=Txt.value;

Txt.value=‘‘;

oUl.insertBefore(oLi,oUl.childNodes[0]);

var target=oLi.offsetHeight;

oLi.style.height=0;

startMove(oLi,{height:target},function(){startMove(oLi,{opacity:100});

})

}

}

</script>

</head>

<body>

<textarea rows="10" cols="80" id="txt"></textarea><input type="button" value="发布" id="obt" />

<ul id="oul">

</ul>

</body>

</html>

//老一套运动框架

// JavaScript Document

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,false)[name];

}

}

function startMove(obj,json,fun){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var bstop=true;

for(var attr in json){

var beginning=0;

if(attr==‘opacity‘){

beginning=Math.round(parseFloat(getStyle(obj, attr))*100);

}else{

beginning=parseInt(getStyle(obj,attr));

}

var speed=(json[attr]-beginning)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(beginning!=json[attr])

bstop=false;

if(attr==‘opacity‘)

{

obj.style.filter=‘alpha(opacity:‘+(beginning+speed)+‘)‘;

obj.style.opacity=(beginning+speed)/100;

}

else

{

obj.style[attr]=beginning+speed+‘px‘;

}

}

if(bstop){

clearInterval(obj.timer);

if(fun)fun();

}

},30)

}

时间: 2024-11-08 23:17:31

链式运动实例 运动框架应用 微博的相关文章

链式线性表实现

1.链式线性表头文件 #ifndef _LINK_LIST_H #define _LINK_LIST_H //定义一个节点 typedef struct _tag_LinkListNode { _tag_LinkListNode *next; }LinkListNode; //定义一个链表@1链表包含一个头部节点@ 包含链表的长度 typedef struct _LinkList { LinkListNode Head; int nLen;//长度 }LinkList; LinkList *li

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动.这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } funct

HTML+JavaScript实现链式运动特效

在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果.今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中,主要进行长宽变化和透明度的变化.长宽的变化可以实现DIV的体积运动变化效果,透明度的话主要是在鼠标移入移出事件中添加淡入淡出的效果.我将这个简单的运动框架封装到一个单独的js文件中,方便调用. 先看看代码: <span style="font-family:KaiTi_GB2312;"&

链式运动的一些思路

前面的一些运动都是只完成一种运动,完成后一般就不会在增加其他运动,在实际中可能会有多种情况,如果想要一个对象完成一个运动后,再接着完成另外一个运动,这时可以考虑用链式运动框架实现一些功能,最主要的还是在定时器封装的函数里再增加一个参数作为传值,一般这个参数是函数,下面这个小例子: function setMove(obj,arr,iTarget,fun){ //设置多个参数,第二个参数为要改变的样式,链式运动框架 var timer = null; clearInterval(obj.timer

JS模拟土豆弹窗——链式运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS模拟土豆弹窗——链式运动</title> <style> *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width:

运动回调-链式运动

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red;

iOS端JSON转Model链式编程框架SuperKVC使用方法与原理

背景 在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应.深度注入等问题,笔者从Masonry得到启示,开发了一个通过链式配置注入器实现深度注入.类型转换.key-属性名映射等功能的轻量级注入框架SuperKVC.眼下已经开源到GitHub,点击这里前往.欢迎Star和Fork.欢迎和我一起完好这个框架! 本文将从应用和原理两个角度介绍SuperKVC

JS实现多物体width缓冲运动实例

多物体运动,运动参数不能公用. 这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下 效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 代码如下: <head runat="server"> <title></title> <style type="text/css">

js运动-完美运动框架

在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让width不变成300,而是变成204,看看会有什么变化那?? 从图可以看出,当