用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文本框不能输入空格验证方法
Mar 19 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
js实现筛选功能
Nov 24 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存储过程
2007/02/14 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
表单内同名元素的控制
2006/11/22 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
js实现圆盘记速表
2015/08/03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
Python导入oracle数据的方法
2015/07/10 Python
Python快速排序算法实例分析
2017/11/29 Python
python实现简单的文字识别
2018/11/27 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
写求职信要注意什么问题
2014/04/12 职场文书
学校节能减排方案
2014/06/13 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python