49日目 | web制作

本日は…

 
■PhotoLogサイト制作の続き
…コメントともっと読むボタンなどが横並びになっている部分の処理について
1．floatで制作→
　divで左右の要素をくるんで、それぞれにfloatをかける

<div id="wrapper">
 <h2><img src="●●●" alt="画像"></h2>
 <p class="date">2015 04 30</p>
</div>

cssでfloatを…

#wrapper{
  overflow: hidden;
}
h2 {
  float: left;
}
p.date {
  float: right;
}

→一つ２つならいいがいちいちdivをかけるのもなかなか冗長

2.display: inline-table;を使う
divを外側にかけずに

h2 {
  display: inline-table;
}
p.date {
  display: inline-table;
  padding-left: 200px;
}

のような形にすると少しスマート…かも

■午後はflash

ボタン部分に触れると画像が減速スライドする
実際のページ
ポイントは

var base:Number;
var startEdge:Number = 0;
var rate:Number = 6;

this.sph01_btn.onRollOver = function() {
	base = main_mc.ph01_mc._x;
}
this.sph02_btn.onRollOver = function() {
	base = main_mc.ph02_mc._x;
}
this.sph03_btn.onRollOver = function() {
	base = main_mc.ph03_mc._x;
}
this.sph04_btn.onRollOver = function() {
	base = main_mc.ph04_mc._x;
}
this.sph05_btn.onRollOver = function() {
	base = main_mc.ph05_mc._x;
｝
this.main_mc.onEnterFrame = function() {
	main_mc._x -= (main_mc._x + base-startEdge)/rate;
}

最後の記述

main_mcのx座標は左上に設定されているので、マウスが乗ったサムネイル画像によって、
隠れているメイン画像のx座標と、startEdgeで指定された場所までの距離を
rateの値で割りつつ、その分移動し
移動した分を引いたstartEdgeまでの距離をまたrateの値で分割し…と繰り返していくと
距離が短くなる分そこを同じ時間で移動するので、速度は遅くなっていくように見える…。。。