用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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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解码unicode编码的中文字符代码分享
2014/08/13 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python实现图片彩色转化为素描
2019/01/15 Python
详解python中index()、find()方法
2019/08/29 Python
python如何代码集体右移
2020/07/20 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
客户表扬信范文
2014/01/10 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
教师业务学习材料
2014/12/16 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
资料员岗位职责
2015/02/10 职场文书