用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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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中将网址转换为超链接的函数
2011/09/02 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
js常用代码段收集
2011/10/28 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
js自定义回调函数
2015/12/13 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Django values()和value_list()的使用
2020/03/31 Python
如何在django中实现分页功能
2020/04/22 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
庆祝国庆节标语
2014/10/09 职场文书
教师党员个人自我评价
2015/03/04 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python