用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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
学习Node.js模块机制
Oct 17 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
js中时间格式化的几种方法
Jul 22 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获取mysql版本的几种方法小结
2008/03/25 PHP
PHP获取文件行数的方法
2015/06/10 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
layui分页效果实现代码
2017/05/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python模拟登录12306的方法
2014/12/30 Python
python动态网页批量爬取
2016/02/14 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Python读写Excel表格的方法
2021/03/02 Python
PHP面试题大全
2015/10/16 面试题
主题班会演讲稿
2014/05/22 职场文书
奥林匹克的口号
2014/06/13 职场文书
商场收银员岗位职责
2015/04/07 职场文书
在职证明范本
2015/06/15 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫