Home Web Front-end JS Tutorial Use Javascript to do what flash does.. A completed class. Auntion Action var 0.1_javascript skills

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

May 16, 2016 pm 07:18 PM
action var

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)

    }




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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

DJI Osmo Action 5 Pro: Release date mooted as retailer reveals launch pricing that could undercut GoPro Hero 13 Black DJI Osmo Action 5 Pro: Release date mooted as retailer reveals launch pricing that could undercut GoPro Hero 13 Black Sep 04, 2024 am 06:51 AM

DJI has not confirmed any plans to introduce a new action camera yet. Instead, it seems that GoPro will get ahead of its rival this year, having teased that it will introduce two new action cameras on September 4. For context, these are expected to a

Let's talk about the differences between var, let and const (code example) Let's talk about the differences between var, let and const (code example) Jan 06, 2023 pm 04:25 PM

This article brings you relevant knowledge about JavaScript. It mainly introduces the differences between var, let and const, as well as the relationship between ECMAScript and JavaScript. Interested friends can take a look at it. I hope Helpful to everyone.

18 Ways to Fix Audio Service Not Responding Issue on Windows 11 18 Ways to Fix Audio Service Not Responding Issue on Windows 11 Jun 05, 2023 pm 10:23 PM

Audio output and input require specific drivers and services to work as expected on Windows 11. These sometimes end up running into errors in the background, causing audio issues like no audio output, missing audio devices, distorted audio, etc. How to Fix Audio Service Not Responding on Windows 11 We recommend you to start with the fixes mentioned below and work your way through the list until you manage to resolve your issue. The audio service may become unresponsive for a number of reasons on Windows 11. This list will help you verify and fix most issues that prevent audio services from responding on Windows 11. Please follow the relevant sections below to help you through the process. Method 1: Restart the audio service. You may encounter

The role and examples of var keyword in PHP The role and examples of var keyword in PHP Jun 28, 2023 pm 08:58 PM

The role and examples of var keyword in PHP In PHP, the var keyword is used to declare a variable. In previous PHP versions, using the var keyword was the idiomatic way to declare member variables, but its use is no longer recommended. However, in some cases, the var keyword is still used. The var keyword is mainly used to declare a local variable, and the variable will automatically be marked as local scope. This means that the variable is only visible within the current block of code and cannot be accessed in other functions or blocks of code. Use var

New DJI Osmo action camera spotted before probable summer 2024 launch to rival recent GoPro and Insta360 releases New DJI Osmo action camera spotted before probable summer 2024 launch to rival recent GoPro and Insta360 releases Jul 01, 2024 am 09:49 AM

Almost a year has passed since DJI released the Osmo Action 4 (curr. $299 on Amazon). Since then, the company has focused on its other divisions, including new RS camera gimbals. On top of that, it has introduced various drones as well like the Avata

Solution to the error AttributeError(\'{0!r} object has no attribute {1!r}\'.format(type(self).__name__, k)) Solution to the error AttributeError(\'{0!r} object has no attribute {1!r}\'.format(type(self).__name__, k)) Feb 29, 2024 pm 06:40 PM

The reason for the error message indicates that in the python code, an object (represented by the self variable) is used, but the object does not have an attribute named k. This may be because the object does not have this property defined, or a type error in the code causes the object to not be of the expected type. How to Fix To resolve this error, you may need to do one or more of the following: Check your code for the error and make sure the object referenced by the self variable has a property named k. Check your code for type errors and make sure the object referenced by the self variable is of the expected type. If the attribute is missing, you need to define this attribute in the class and use tryexcept to get this error. If you are sure that k is an attribute that is not defined in the class, please confirm

Detailed explanation of Action asynchronous operation of Vuex state management Detailed explanation of Action asynchronous operation of Vuex state management Aug 10, 2022 pm 03:29 PM

In some cases, we want to perform some asynchronous operations in Vuex, such as network requests, which must be asynchronous. How to deal with this situation? Let me introduce to you the Action asynchronous operation of Vuex state management. I hope it will be helpful to friends in need. !

Insta360 Go 3S: New pocketable 4K action camera released weighing just 39 g with Apple Find My support Insta360 Go 3S: New pocketable 4K action camera released weighing just 39 g with Apple Find My support Jun 14, 2024 pm 06:05 PM

Insta360hasreleasedanewactioncamera,itssecondoftheyearaftertheInsta360X4(curr.$499.99onAmazon).Asexpected,thecompanyhasintroducedtheGo3S,anupgradedthatGo3thatadds4Kvideorecordingcapabilities.Specifically,whileInst

See all articles