用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1


Posted in Javascript onFebruary 23, 2007

请注意example2.html 在firefox下效果没有在ie下圆润,其原因来源于兼容性.

以及触发动作过快会导致每一个li递增两次到三次的情况,这个原因跟类(Action.js)本身无关.原因来源于example2.html中的演示代码.
目前正在极力修改中.
咨询改版升级信息请关注 我的blog
http://auntion.blogbus.com
或者加我QQ询问:82874972
action.js

/* 
* 效果类 
By Auntion 
QQ:82874972 
Blog:Auntion@blogbus.com 
Email:Auntion@Gmail.com 
版权没有,随便使用. 
使用时请勿删除此部分注释.谢谢! 
* 
*/ 

ShowHide = Class.create();ShowHide.prototype = {status: expRs={},initialize: function(ob,endW,endH,effect,step){this.element=(typeof(ob)=='object') ? ob : $id(ob);if(expRs[ob.id]==null){ expRs[ob.id] = true; }if(expRs[ob.id]){this.width=this.element.offsetWidth;this.height=this.element.offsetHeight;this.endW=(endW != null)?endW.isZero():null;this.endH=(endH != null) ? endH.isZero():null;this.effect=(effect!=null)?effect:0;this.step=(step!=null)?step:0.075;this.now=[0,0];this.tryBug=this.step;this.method,this.goTo;expRs[this.element.id]=false;this.start();}},start: function(){switch(this.effect){case 0:{var method = this.judgment();this.base(method);}break;case 1:{var method = this.judgment();this.alpha(method);}break;default:{alert("错误: 不是一个可用的效果! 应为0和1,默认执行0");var method = this.judgment();this.base(method);}}},base: function(method){this.element.style.overflow = "hidden";this.goTo = this.create(method);},alpha: function(method,step,Opacity){alert("未完成的效果,自动用默认效果替代.");this.goTo = this.base(method);},allIs: function(){this.now[0] += this.expressions(0,this.endW,this.now[0],this.step);this.now[1] += this.expressions(0,this.endH,this.now[1],this.step);if((this.width > this.endW) ? (this.now[0] > (this.endW+this.tryBug)) : (this.now[0] < (this.endW-this.tryBug))){this.element.style.width = this.now[0]+"px";}if((this.height > this.endH)? (this.now[1] > (this.endH+this.tryBug)) : (this.now[1] < (this.endH-this.tryBug))){this.element.style.height= this.now[1]+"px";}else{clearInterval(this.goTo);this.element.style.width = (this.now[0]+this.tryBug)+"px";this.element.style.height= (this.now[1]+this.tryBug)+"px";expRs[this.element.id] = true;}},widthIs: function(){this.now += this.expressions(0,this.endW,this.now,this.step);if((this.width > this.endW) ? (this.now > (this.endW+this.tryBug)) : (this.now < (this.endW-this.tryBug))){this.element.style.width = this.now+"px";}else{clearInterval(this.goTo);this.element.style.width = (this.now+this.tryBug)+"px";expRs[this.element.id] = true;}},heightIs: function(){this.now += this.expressions(0,this.endH,this.now,this.step);if((this.height > this.endH) ? (this.now > (this.endH+this.tryBug)) : (this.now < (this.endH-this.tryBug))){this.element.style.height = this.now+"px";}else{clearInterval(this.goTo);this.element.style.height = (this.now+this.tryBug)+"px";expRs[this.element.id] = true;}},judgment: function(){if(this.endW != null && this.endH !=null){this.method = "all";this.now = [this.width,this.height];}else if(this.endW != null && this.endH == null){this.method = "width";this.now = this.width;}else if(this.endW == null && this.endH != null){this.method = "height";this.now = this.height;    }return this.method;},create: function(codeString){var ShowHideGoTo;switch(codeString){case "all" : ShowHideGoTo = setInterval(function(){this.allIs();}.bind(this),1);break;    case "width" : ShowHideGoTo = setInterval(function(){this.widthIs();}.bind(this),1);break;case "height": ShowHideGoTo = setInterval(function(){this.heightIs();}.bind(this),1);break;}return ShowHideGoTo;},expressions: function(num,end,now,step){var exec;switch(num){    case 0 : exec = (end - now)*step;break;            default : exec = (end - now)*step;break;}return exec;}};

language.js
/* 
* 
语言扩展包 By Auntion 
QQ:82874972 
Blog:Auntion@blogbus.com 
Email:Auntion@Gmail.com 
版权没有,随便使用. 
使用时请勿删除此部分注释.谢谢! 
* 
*/ 

var Class={create: function() {return function() {this.initialize.apply(this, arguments);}}};$id = function(i){return document.getElementById(i);};$name = function(i){return document.getElementsByName(i);};$class = function(className,baseId) {var fatherId = null;if(!baseId){fatherId = document;}else{var id = baseId;fatherId = $id(id);}var basic = fatherId.getElementsByTagName('*') || document.all;var child = null;var classNames = null;var aggregate = []; for (var i = 0; i < basic.length; i++) {child = basic[i];classNames = child.className.split(' ');for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {aggregate.push(child);break;}}}return aggregate;};String.prototype.toInt = function(){return parseInt(this.replace(/[a-zA-Z]+/,''));};Number.prototype.isZero = function(){return (this < 0) ? 0 : this;};Function.prototype.bind = function(e) {var md = this;return function(){return md.apply(e,arguments);}};Object.prototype.attachEvent=function(method,func){if(!this[method]) this[method]=func;else this[method]=this[method].attach(func);};Function.prototype.attach=function(func){var f=this;return function(){f();func();}};

example.html
<!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=gb2312" /> 
<title>example1</title> 
<script src="Language.js" language="javascript"></script> 
<script src="Action.js" language="javascript"></script> 
<style type="text/css"> *,body{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
} 
#main { 
    margin:50px; 
    padding:0px 0px 20px 0px; 
    border:solid 1px #cccccc 
} 
#button { 
    color:#0099FF; 
} 
#button li{ 
    margin-right:10px; 
    padding:5px 0 0 0; 
    width:104px; 
    height:22px; 
    border: solid 1px #cccccc; 
    background-color: #eeeeee; 
    float:left; 
    text-align:center; 
} 
#demo{ 
    margin-top:20px; 
    background-color:#CCCCCC; 
    color:#f5f5f5; 
    float:inherit; 
    /*border:solid 1px #aaaaaa;*/ 
} 
</style> 
</head> 
<body> 
    <table border="0" align="center" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td> 
    <div id="button"> 
        <ul> 
            <li id="a">恢复初始值</li> 
            <li id="b">隐藏</li> 
            <li id="c">宽 + 30</li> 
            <li id="d">高 + 30</li> 
            <li id="e">宽 - 30</li> 
            <li id="f">高 - 30</li> 
            <li id="i">宽600,高100</li> 
        </ul> 
    </div> 
            </td> 
          </tr> 
</table> 
    <table border="0" align="center" cellpadding="0" cellspacing="0"> 
      <tr><td align="center" valign="middle"> 
        <div id="demo" style="height:200px;width:200px;"></div> 
  </td></tr></table> 
<script language="javascript" type="text/javascript"> 
var element = $id("demo"); 
var width = element.offsetWidth; 
var height= element.offsetHeight; 
alert(width) 
var step = 0.115 
function now(){ 
    this.nowWidth = element.style.width.toInt(); 
    this.nowHeight= element.style.height.toInt(); 
} 
    $id("a").onmousedown = function(){ 
        new ShowHide(element,width,height,0,step); 
    } 
    $id("b").onmousedown = function(){ 
        new ShowHide(element,0,0,0,step); 
    } 
    $id("c").onmousedown = function(){ 
        var test = new now(); 
        new ShowHide(element,test.nowWidth+30,null,0,step); 
    } 
    $id("d").onmousedown = function(){ 
        var test = new now(); 
        new ShowHide(element,null,test.nowHeight+30,0,step); 
    } 
    $id("e").onmousedown = function(){ 
        var test = new now(); 
        new ShowHide(element,test.nowWidth-30,null,0,step); 
    } 
    $id("f").onmousedown = function(){ 
        var test = new now(); 
        new ShowHide(element,null,test.nowHeight-30,0,step); 
    } 
    $id("i").onmousedown = function(){ 
        new ShowHide(element,600,100,0,step) 
    } 
</script> 
</body> 
</html>
Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
最短的IE判断代码
Mar 13 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
javascript知识点收藏
Feb 22 #Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 #Javascript
用YUI做了个标签浏览效果
Feb 20 #Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 #Javascript
初探jquery——表单应用范例
Feb 20 #Javascript
动态调用css文件——jquery的应用
Feb 20 #Javascript
js压缩利器
Feb 20 #Javascript
You might like
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jQuery中:input选择器用法实例
2015/01/03 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
浅析Ajax语法
2016/12/05 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python3中eval函数用法使用简介
2019/08/02 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python字典key不能是可以是啥类型
2020/08/04 Python
办公室内勤岗位职责范本
2013/12/09 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
第一节英语课开场白
2015/06/01 职场文书
导游词之天津古文化街
2019/11/09 职场文书
导游词之镜泊湖
2019/12/09 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL