チェックしたオブジェクトにマークをつける！しかもゆさゆさ動く。

JavaScript

書いてから気づく。それってアニメーションgifでよくね？！OTL

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+ARIA 1.0//EN"
  "http://www.w3.org/WAI/ARIA/schemata/html4-aria-1.dtd">
<html lang="ja">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div id="hoge">&nbsp;</div>
<script type="text/javascript">

var Marker = function (image) {
  this.element = image;
  this.timerId = null;
  this.count = 0;
  this.movement = [[0,0], [2,1], [4,3], [2,1], [0,0], [-2,1], [-4,3], [-2,1]];
  this.max = this.movement.length;
  this.x = this.element.offsetLeft;
  this.y = this.element.offsetTop;
  this.view = image.ownerDocument.defaultView;
};


Marker.prototype.dance = function (trigger) {
  var that = this;
  
  if (this.element !== trigger)
    return false;
  
  if (this.timerId)
    return true;
  
  this.timerId = this.view.setInterval (
    function () {
      var x = that.x + that.movement[that.count][0];
      var y = that.y + that.movement[that.count][1];
      var s = that.element.style;

      s.top = y + 'px';
      s.left = x + 'px';
      that.count = (that.count + 1) % that.max;
    }, 80);
};


Marker.prototype.rest = function (trigger) {
  if (this.element !== trigger)
    return false;
  
  if (this.timerId) {
    this.view.clearInterval (this.timerId);
    this.timerId = null;
  }

  return true;
};


var createMarker = function (image) {
  if (1 > arguments.length)
    return null;

  image.style.position = 'absolute';

  return new Marker (image);
};


var createImage = function (image_src) {
  var img;

  (function (view) {
    var doc = view.document;

    img = doc.createElement ('img');
    img.src = image_src;
  })(this);

  return img;
};

var src = 'data:image/gif;base64,' +
  'R0lGODlhGAAYALMAAPr4+wBlAQaPARF9CSylD0K9Gk3OHlqzNFnSG23WMHa/TKHfXa3lbczs' +
  'ocDpgf///yH5BAEAAA8ALAAAAAAYABgAAATZ8Mkpg72Wah3GWYzjMMsxBBtlKU7jvq6jZFvH' +
  'wPjLnNzQxoyg8Ndw8CaBW4O0aDqdPwaqoig+r02GAFFozCSDJfaqBZgPjcEjcHCMn2UzQNA4' +
  'WJhvkEAOaAhAdyAMH1h7cn4kUgNMewIGCJAIhmZ+BYkDiwuTW5CTfQIFCAkgmAwJngIEnpWR' +
  'CTsDCVyefJ+hkQYJmLaqtJSgkZEFagQIj7x8lQbKywgEYMsGBZPJ0MtqEgTQ0p/V0M4TBMTQ' +
  'Ao7dxt/g2ebd4Snh697o7gQF3QXtKRvh+/v5EQA7';

var img = createImage (src);
document.getElementById('hoge').appendChild (img);
var m = createMarker (img);
m.dance(img);

</script>
</body>
</html>