缓冲运动之框架开始一级简单框架实例

***********************缓冲运动【框架开始】-1.html*********************************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{background-color:#666;}

div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;}

</style>

<script type="text/javascript">

window.onload=function(){

var oDiv=document.getElementsByTagName("div");

var i=0;

oDiv[0].onclick=function()

{

startMove(this,"width",300);

};

oDiv[1].onclick=function()

{

startMove(this,"height",300);

};

oDiv[2].onclick=function()

{

startMove(this,"fontSize",300);

};

oDiv[3].onclick=function ()

{

startMove(this, ‘borderWidth‘, 50);

}

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj, attr, iTarget)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

var iCur=parseInt(getStyle(obj, attr));

var iSpeed=(iTarget-iCur)/8;

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

if(iCur==iTarget)

{

clearInterval(obj.timer);

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}, 30)

}

</script>

</head>

<body>

<div></div>

<div></div>

<div>AAAA+++</div>

<div></div>

<div></div>

<div></div>

</body>

</html>

***************************缓冲运动【框架开始】-2.html*****************************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{background-color:#666;}

div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;filter:alpha(opacity:30);opacity:0.3;}

</style>

<script type="text/javascript">

window.onload=function(){

var oDiv=document.getElementsByTagName("div");

var i=0;

var alpha=30;

oDiv[0].onclick=function()

{

startMove(this,"width",300);

};

oDiv[1].onclick=function()

{

startMove(this,"height",300);

};

oDiv[2].onclick=function()

{

startMove(this,"fontSize",300);

};

oDiv[3].onclick=function ()

{

startMove(this, ‘borderWidth‘, 50);

}

oDiv[4].onmouseover=function ()

{

startMove(oDiv[4], ‘opacity‘, 100);

}

oDiv[4].onmouseout=function ()

{

startMove(oDiv[4], ‘opacity‘, 30);

}

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj, attr, iTarget)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

var iCur=0;

if(attr==‘opacity‘)

{

iCur=parseInt(parseFloat(getStyle(obj, attr))*100);

}

else

{

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

}

var iSpeed=(iTarget-iCur)/8;

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

if(iCur==iTarget)

{

clearInterval(obj.timer);

}

else

{

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}

}, 30)

}

</script>

</head>

<body>

<div></div>

<div></div>

<div>AAAA+++</div>

<div></div>

<div></div>

<div></div>

</body>

</html>

*******************框架开始之链式运动1****************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}

</style>

<script type="text/javascript">

window.onload=function ()

{

var oDiv=document.getElementById(‘div1‘);

oDiv.onmouseover=function ()

{

startMove(oDiv, ‘width‘, 300, function (){

startMove(oDiv, ‘height‘, 300, function (){

startMove(oDiv, ‘opacity‘, 100);

});

});

};

oDiv.onmouseout=function ()

{

startMove(oDiv, ‘opacity‘, 30, function (){

startMove(oDiv, ‘height‘, 100, function (){

startMove(oDiv, ‘width‘, 100);

});

});

};  //不错，很好，可是还有更好的办法么，这样每个值都需要回调不是太麻烦了么

//同时如果我想同时执行多个值的变化呢，不行了吧

// startMove(oDiv, ‘width‘, 100);startMove(oDiv, ‘height‘, 100);这样写也是不行的 第二个会把第一个的定时器改关闭掉

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj, attr, iTarget,fn)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

var iCur=0;

if(attr==‘opacity‘)

{

iCur=parseInt(parseFloat(getStyle(obj, attr))*100);

}

else

{

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

}

var iSpeed=(iTarget-iCur)/8;

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

if(iCur==iTarget)

{

clearInterval(obj.timer);

if(fn)  //运动停止的时候，如果有传递第四个参数的时候 就运行

{

fn();

}

}

else

{

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}

}, 30)

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

*******************框架开始之链式运动2****************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{background:darkgray;}

span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}

div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}

</style>

<script type="text/javascript">

window.onload=function ()

{

var oDiv=document.getElementById(‘div1‘);

oDiv.onclick=function ()

{

startMove(oDiv,{width:102,height:300,opacity:100})//第一个到底目标的时候 就会清楚定时器，其他的值也会停止

};

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

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=parseInt(getStyle(obj, attr));

}

var iSpeed=(json[attr]-iCur)/8;

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

if(iCur==json[attr])

{

clearInterval(obj.timer);

if(fn)  //运动停止的时候，如果有传递第四个参数的时候 就运行

{

fn();

}

}

else

{

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}

}

}, 30)

}

</script>

</head>

<body>

<div id="div1"></div>

<span></span>

</body>

</html>

*******************框架开始之链式运动3  json****************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}

</style>

<script type="text/javascript">

window.onload=function ()

{

var oDiv=document.getElementById(‘div1‘);

oDiv.onclick=function ()

{

startMove(oDiv,{width:"300",height:"300",top:"300",opacity:"100"})

};

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

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=parseInt(getStyle(obj, attr));

}

var iSpeed=(json[attr]-iCur)/8;

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

if(iCur==json[attr])

{

clearInterval(obj.timer);

if(fn)  //运动停止的时候，如果有传递第四个参数的时候 就运行

{

fn();

}

}

else

{

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}

}

}, 30)

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

******************框架开始之链式运动 json  停止条件**************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{background:darkgray;}

span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}

div{width:100px;height:50px;margin:0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}

</style>

<script type="text/javascript">

window.onload=function ()

{

var oDiv=document.getElementById(‘div1‘);

oDiv.onclick=function ()

{

startMove(oDiv,{width:102,height:300,opacity:100})//第一个到底目标的时候 就会清楚定时器，其他的值也会停止

};

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj,json,fn)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

varbStop=true;//所用的东西都到达

for(var attr in json)

{

var iCur=0;

if(attr==‘opacity‘)

{

iCur=parseInt(parseFloat(getStyle(obj, attr))*100);

}

else

{

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

}

var iSpeed=(json[attr]-iCur)/8;

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

if(iCur!=json[attr]) {

bStop = false;

}

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

if(bStop)

{

clearInterval(obj.timer);

if(fn)  //运动停止的时候，如果有传递第四个参数的时候 就运行

{

fn();

}

}

}

}, 30)

}

</script>

</head>

<body>

<div id="div1"></div>

<span></span>

</body>

</html>

**********************************伸缩菜单  简单框架实例**************************************************

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

ul,ol{list-style: none;margin:0;padding:0;}

ul li{position:relative;width:90px;height:25px;line-height: 25px;text-align: center;float:left;border:1px solid #666666;margin:1px;background:yellowgreen;}

ol{background:#CCC; overflow:hidden; position:absolute; top:25px; width:100%; height:0; filter:alpha(opacity:0); opacity:0;}

ol li{border:none;margin:0;background:yellowgreen;border-bottom:1px solid darkslategrey;}

</style>

<script type="text/javascript">

window.onload=function ()

{

var aLi=document.getElementsByTagName("li");

var i=0;

for(i=0;i<aLi.length;i++) {

aLi[i].onmouseover = function () {

var oDiv = this.getElementsByTagName(‘ol‘)[0];

oDiv.style.height = ‘auto‘;

var iHeight = oDiv.offsetHeight;

oDiv.style.height = 0;

startMove(oDiv, {opacity: 100, height: iHeight});

};

aLi[i].onmouseout = function () {

var oDiv = this.getElementsByTagName(‘ol‘)[0];

oDiv.style.height = ‘auto‘;

var iHeight = oDiv.offsetHeight;

oDiv.style.height = 0;

startMove(oDiv, {opacity:0, height:0});

};

}

};

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

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=parseInt(getStyle(obj, attr));

}

var iSpeed=(json[attr]-iCur)/8;

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

if(iCur==json[attr])

{

clearInterval(obj.timer);

if(fn)  //运动停止的时候，如果有传递第四个参数的时候 就运行

{

fn();

}

}

else

{

if(attr=="opacity")

{

obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+‘px‘;

}

}

}

}, 30)

}

</script>

</head>

<body>

<ul>

<li>

首页

<ol>

<li>AAAAAA</li>

<li>BBBBBB</li>

<li>CCCCCC</li>

<li>DDDDDDD</li>

<li>EEEEEEE</li>

<li>FFFFFFF</li>

</ol>

</li>

<li>

css

<ol>

<li>AAAAAA</li>

<li>BBBBBB</li>

<li>CCCCCC</li>

<li>DDDDDDD</li>

<li>EEEEEEE</li>

<li>FFFFFFF</li>

</ol>

</li>

<li>

html

<ol>

<li>AAAAAA</li>

<li>BBBBBB</li>

<li>CCCCCC</li>

<li>DDDDDDD</li>

<li>EEEEEEE</li>

<li>FFFFFFF</li>

</ol>

</li>

<li>

javascript

<ol>

<li>AAAAAA</li>

<li>BBBBBB</li>

<li>CCCCCC</li>

<li>DDDDDDD</li>

<li>EEEEEEE</li>

<li>FFFFFFF</li>

</ol>

</li>

<li>

jQuery

<ol>

<li>AAAAAA</li>

<li>BBBBBB</li>

<li>CCCCCC</li>

<li>DDDDDDD</li>

<li>EEEEEEE</li>

<li>FFFFFFF</li>

</ol>

</li>

</ul>

</body>

</html>

时间： 2024-09-29 00:24:27

缓冲运动之框架开始一级简单框架实例的相关文章

缓冲运动之框架開始一级简单框架实例

***********************缓冲运动[框架開始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

js之运动框架缓冲运动

由于JS里对于数值小数点会自动去除,所以对于运动位置,需要使用Math.ceil()向上取整或者 Math.floor()向下取整进行解决 以下是我的缓冲运动练习简单代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

基于CXF框架的webservice简单的SC两端出入拦截器实现。

开发工具:  ECLIPSE(EE) + CXF(2.5.9) (I)可以现在eclipse中使用JDK来创建webservice基础服务.(没有CXF框架的webservice) (1)新建一个java project. (命名为FirstWebService) 新建一个interface接口.改接口就是相当于webservice中的SEI. (在接口类定义前使用JDK自带webservice注释[email protected] SEI方法则是使用@WebMethod生命方法.) (2)在定

框架之 hibernate简单入门

hibernate框架的搭建 Hibernate框架的概述 1. Hibernate框架的概述 * Hibernate称为 * Hibernate是一个开放源代码的对象关系映射(ORM)框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. * Hibernate可以应用在任何使用JDBC的场合,既可以在Java的客户端程序使用,也可以在Servlet/JSP的Web应用中使用. * Hibernate是轻量级JavaEE应用的持久层解决方案

关于开源框架GPUImage 的简单说明

GPUImage是一个非常棒的图像处理的开源库,里面提供了非常非常多的滤镜效果来加工图片. 不过就是因为太多效果了,而且对于程序员来说,那么多效果并不清楚知道要用那一个.于是我就使用提供的默认值,加上对滤镜的命名的理解,粗略简单地对GPUImage.h里引用的各个滤镜进行简要说明.这样方便以后找到想要的滤镜效果.其中可能有理解错误,或者表达不准确的地方还请大家斧正.其中有些效果需要使用摄像头才可能有比较理想的效果. 附上注释的GPUImage.h代码: #import "GLProgram.h&

【SSH进阶之路】一步步重构MVC实现Struts框架——从一个简单MVC开始（三）

目录: [SSH进阶之路]Struts基本原理 + 实现简单登录(二) [SSH进阶之路]一步步重构MVC实现Struts框架--从一个简单MVC开始(三) [SSH进阶之路]一步步重构MVC实现Struts框架--封装业务逻辑和跳转路径(四) [SSH进阶之路]一步步重构MVC实现Struts框架--彻底去掉逻辑判断(五) [SSH进阶之路]一步步重构MVC实现Struts框架--完善转向页面,大功告成(六) 上篇[SSH进阶之路]Struts基本原理 + 实现简单登录(二),我们介绍MVC和

【SSH进阶之路】一步步重构容器实现Spring框架——从一个简单的容器开始(八)

目录 [SSH进阶之路]一步步重构容器实现Spring框架--从一个简单的容器开始(八) [SSH进阶之路]一步步重构容器实现Spring框架--解决容器对组件的"侵入式"管理的两种方案--主动查找和控制反转(九)(未更新) [SSH进阶之路]一步步重构容器实现Spring框架--配置文件+反射实现IoC容器(十)(未更新) [SSH进阶之路]一步步重构容器实现Spring框架--彻底封装,实现简单灵活的Spring框架(十一)(未更新) 最近一直在和容器打交道,甚至前面的博文,我们也

IOS 支付宝－五福简单框架实现－线性滚动（UICollectionView）

猴年支付宝可算是给大家一个很好的惊喜,刺激.大家都在为敬业福而四处奔波.可是到最后也没有几个得到敬业福德,就像我.不知道大家有没有观察,五福界面的滚动是一个很好的设计.在这里,给大家带来简单的滚动实现,首先看一下实现效果. 通过观察不难发现,有很多地方并不是那么容易想出来的,对于篇随笔,感兴趣可以查查相关资料,我就不尽行过多说明,(主要是开考文字,不好说明??). 献出代码,请收下. // // ViewController.m // CX 支付宝-五福简单框架实现-线性滚动(UICollect

dwr框架异步调用简单小例

DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架.可以轻松实现用js直接调用java方法. 通过一个小例子来演示一个dwr的基本使用: ①. 首先肯定要创建一个web project的,然后拷贝dwr.jar到WEB-INF\lib目录下 ②. 修改web.xml文件,添加dwr servlet配置 <servlet> <servlet-name>dwr-invoker</servlet-name>