設定サンプル

PHP & JavaScript Room :: 設置サンプル

実行結果

参照：Reflex.js 1.2

Dog
reflex
idistance4
iopacity50
Dog
reflex
itiltright
idistance4
iopacity50
Dog
reflex
itiltnone
idistance4
iopacity50
Dog
reflex
idistance4
iopacity50
Dog
reflex
itiltleft
idistance4
iopacity50
Dog
reflex
itiltright
Dog
reflex
Dog
reflex
Dog
reflex
iopacity50
Dog
reflex
iopacity75
Dog
reflex
iopacity25
Dog
reflex
idistance16
iborder2
iheight24
Dog
reflex
idistance0
iborder8
iheight40
icolorffffff
Dog
reflex
idistance8
iborder1
iheight32
icolor0070a4

設置サンプルのソース

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>設定サンプル</title>
   <script type="text/javascript" src="/content/lib/reflex/reflex.js"></script>
   <style type="text/css">
      body {
         margin:20px; padding:0;
         background:transparent url("/content/img/skin/bg.gif") repeat top left;
         font-size:81%;
      }
      div.demo { 
         float:left; margin:10px;
      }
      .cf:after {
         content:".";
         display:block;
         visibility:hidden;
         height:0.1px;
         font-size:0.1em;
         line-height:0;
         clear:both;
      }
      .cf {
         display:inline-block;
      }
      /* Hides from IE-mac \*/
      * html .cf {
         height:1%;
      }
      .cf {
         display:block;
      }
      /* End hide from IE-mac */
   </style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<!-- CONTENT -->
   <p>参照：<a href="http://www.netzgesta.de/reflex/">Reflex.js 1.2</a></p>
<!-- CODE -->
   <div class='cf'>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>idistance4<br>iopacity50</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltright idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltright<br>idistance4<br>iopacity50</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltnone idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltnone<br>idistance4<br>iopacity50</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>idistance4<br>iopacity50</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltleft idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltleft<br>idistance4<br>iopacity50</span></div>
   </div>
   <div class='cf'>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltright" alt="Dog" /><br><span>reflex<br>itiltright</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex" alt="Dog" /><br><span>reflex</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex" alt="Dog" /><br><span>reflex</span></div>
   </div>
   <div class='cf'>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity50" alt="Dog" /><br><span>reflex<br>iopacity50</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity75" alt="Dog" /><br><span>reflex<br>iopacity75</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity25" alt="Dog" /><br><span>reflex<br>iopacity25</span></div>
   </div>
   <div class='cf'>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance16 iborder2 iheight24" alt="Dog" /><br><span>reflex<br>idistance16<br>iborder2<br>iheight24</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance0 iborder8 iheight40 icolorffffff" alt="Dog" /><br><span>reflex<br>idistance0<br>iborder8<br>iheight40<br>icolorffffff</span></div>
      <div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance8 iborder1 iheight32 icolor0070a4" alt="Dog" /><br><span>reflex<br>idistance8<br>iborder1<br>iheight32<br>icolor0070a4</span></div>
   </div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>