Home>

The motion framework can realize arbitrary value motion of multiple objects

The screenshot of the running effect is as follows:

example:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Frame</title>
<style>
#div1 {width:100px;height:100px;background:red;position:absolute;left:0;top:50px;opacity:0.3;filter:alpha (opacity=30);}
</style>
<script>
window.onload=function ()
{
 var obtn=document.getelementbyid ("btn1");
 var odiv=document.getelementbyid ("div1");
 obtn.onclick=function ()
 {
 startmove (odiv, {width:200, height:200, opacity:100}, function () {
  startmove (odiv, {width:100, height:100, opacity:30});
 });
 };
};
function getstyle (obj, attr)
{
 if (obj.currentstyle) {
 return obj.currentstyle [attr];
 } else {
 return getcomputedstyle (obj, false) [attr];
 }
}
function startmove (obj, json, fn)
{
 clearinterval (obj.timer);
 obj.timer=setinterval (function () {
 var bstop=true;
 for (var attr in json) {
  var icur=0;
  if (attr == "opacity") {
  icur=math.round (parsefloat (getstyle (obj, attr)) * 100);
  } else {
  icur=parseint (getstyle (obj, attr));
  }
  var ispeed=(json [attr]-icur)/8;
  ispeed=ispeed>0?math.ceil (ispeed):math.floor (ispeed);
  if (icur!=json [attr]) {
  bstop=false;
  }
  if (attr == "opacity") {
  obj.style.filter="alpha (opacity =" + (icur + ispeed) + ")";
  obj.style.opacity=(icur + ispeed)/100;
  } else {
  obj.style [attr]=icur + ispeed + "px";
  }
 }
 if (bstop) {
  clearinterval (obj.timer);
  if (fn) {
  fn ();
  }
 }
 }, 30);
}
</script>
</head>
<body>
<input type="button" value="movement" />
<div></div>
</body>
</html>
  • Previous Solution to writing java programs under Eclipse does not automatically generate Rjava files and packages
  • Next PHP use strstr () function to get all characters after the specified string