Parameters |
Type |
Description |
El |
Element |
Required. It is a page element. |
Begin |
Number |
Required. the start position. |
Change |
Number |
Required. The distance to be moved. |
Duration |
Number |
Optional. Duration of the easing effect. The default value is 500 ms. We recommend that you use 300 ~ 1000 ms. |
Field |
String |
Required. The style attribute to be changed. Select top, left, bottom, right, width, and height. |
Ftp |
Number |
(Optional) Number of frames of animation per second. The default value is 50, ensuring smooth playback. Some references: Japanese animation: 36 frames per second, 24 Chinese cartoon frames, and 60 racing games. |
Bytes |
Function |
Required. Easing formula. The parameter value ranges from 0 ~ The number between 1. Refer to the 45 formulas below. |
OnStart |
Function |
Optional. It is executed at the beginning. |
OnEnd |
Function |
Optional. executed at the end. |
The easing formula of prototype genre requires only one parameter (increased to 45)
<! Doctype html> <ptml dir = "ltr" lang = "zh-CN"> <pead> <meta charset = "UTF-8"/> <meta http-equiv = "X-UA -Compatible "content =" IE = 8 "> <style type =" text/css ">. taxiway {width: 800px; height: 100px; background: # E8E8FF ;}. move {width: 100px; height: 100px; background: # a9ea00; }# panel {float: left; width: 810px} # panel div {float: left; width: 88px; border: 1px solid #333; height: 20px; font-size: 11px;} div. transition {margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom: 10px;} div. transition div {position: absolute; height: 1px; width: 1px; background: #000;} div. transition span {display: block; position: absolute; border-bottom: 1px solid # dadada; font-size: 10px; color: #888; width: 200px; left: 0px ;} div. transition div # indicator {position: absolute; background-color: # a9ea00; height: 200px; top: 0px; left: 0px;} div. transition div # marker {background-color: # f00; height: 6px; width: 6px; border-radius: 3px;-webkit-border-radius: 3px; -moz-border-radius: 3px; left: 0px; margin-bottom:-3px; margin-left:-3px;} div. transition div # label {background: transparent; color: # ABD474; font-size: 20px; height: 20px; width: 200px; text-align: center; top: 80px; left: 0px; z-index:-1 ;} </style> <title> gentle movement BY situ zhengmei </title> </pead> <body> click the grid in the following Table </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]