Home > Web Front-end > JS Tutorial > body text

Use Javascript to do what flash does.. A completed class. Auntion Action var 0.1_javascript skills

WBOY
Release: 2016-05-16 19:18:56
Original
996 people have browsed it

Please note that the effect of example2.html under Firefox is not as smooth as under IE. The reason is due to compatibility.

and too fast triggering action will cause each li to be incremented two to three times. This reason is the same as the class (Action.js) itself has nothing to do with it. The reason comes from the demo code in example2.html.
It is currently being modified.
For information on revision and upgrade, please follow my blog
http://auntion.blogbus .com
or add me on QQ to inquire: 82874972
action.js

Copy code The code is as follows:

/*
*

效果类

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
复制代码 代码如下:

/*
*
Language expansion pack

By Auntion

QQ:82874972

Blog:Auntion@blogbus.com

Email:Auntion@Gmail.com

No copyright, use it as you like.

Please do not delete this part of the comment when using it. Thank you!

*
*/



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
Copy code The code is as follows:





example1






    
          
            
          

    

        

                
  • 恢复初始值

  •             
  • 隐藏

  •             
  • 宽 + 30

  •             
  • 高 + 30

  •             
  • 宽 - 30

  •             
  • 高 - 30

  •             
  • 宽600,高100

  •         


    

            


    
      

        

  



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)

    }




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template