徒然 - girl

ZOZOTOWNの商品検索結果ページみたいな、アイテムにマウスオーヴァーしたら詳細がでてくるスクリプトを作ってみたいな、と思っていたら、jQueryを使えば案外簡単に出来ました。

要は、hover(), css(), animate() を使えばＯＫということで。

スマートフォンだったら hoverがないので、click(), toggle()にすれば良いですね。

考え方はこちらと同じ。
↓
Zoomer Gallery – A jQuery plugin for displaying images with Flash-like zooming effects


ということで、JETHRO TULL のディスコグラフィをこんな感じで作ってみました。ジャケット写真にマウスを持って行くと、収録曲が表れます。



コードはこちら ↓css

div#test20111110 {
	width:400px;
	list-style-type:none;
	margin:50px auto;
}
div#test20111110 div.title {
	float:left;
	width:100px;
	height:100px;
	text-align:left;
}
div#test20111110 img {
	height:95px;
	width:95px;
	vertical-align:top;
	position:absolute;
	z-index:1;
}
div#test20111110 div.detail {
	position:absolute;
	z-index:2;
	background:#fff;
	border:1px solid #666;
	padding:10px;
	margin:95px 0 0 -30px;
	display:none;
	width:300px
}
div#test20111110 ol {
	margin:1em 0 0 2em;
	padding:0;
}

↓html

<div id="test20111110">
	<div class="title">
		<img src="http://static.pixelpipe.com/68386931-73ae-4c7b-9b7f-a2c01379d0db.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/This_Was" target="_blank">1968 This Was</a>
			<ol>
				<li>My Sunday Feeling</li>
				<li>Some Day the Sun Won't Shine for You</li>
				<li>Beggar's Farm</li>
				<li>Move on Alone</li>
				<li>Serenade to a Cuckoo</li>
				<li>Dharma for One</li>
				<li>It's Breaking Me Up</li>
				<li>Cat's Squirre</li>
				<li>A Song for Jeffrey</li>
				<li>Round</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/7bd646fc-8551-45f1-8c49-b418b29aeb6c.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Stand_Up_%28Jethro_Tull_album%29" target="_blank">1969 Stand Up</a>
			<ol>
				<li>A New Day Yesterday</li>
				<li>Jeffrey Goes to Leicester Square</li>
				<li>Bouree (J. S. Bach arr. Anderson)</li>
				<li>Back to the Family</li>
				<li>Look into the Sun</li>
				<li>Nothing Is Easy</li>
				<li>Fat Man</li>
				<li>We Used to Know</li>
				<li>Reasons for Waiting</li>
				<li>For a Thousand Mothers</li>
				<li>Living in the Past</li>
				<li>Driving Song</li>
				<li>Sweet Dream</li>
				<li>17</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/eb1bd2d8-d9e1-4dfa-a0b5-dc346aa0c39c.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Benefit_(album)" target="_blank">1970 Benefit</a>
			<ol>
				<li>With You There to Help Me</li>
				<li>Nothing to Say</li>
				<li>Alive and Well and Living In</li>
				<li>Son</li>
				<li>For Michael Collins, Jeffrey and Me</li>
				<li>To Cry You a Song</li>
				<li>A Time for Everything?</li>
				<li>Inside</li>
				<li>Play in Time</li>
				<li>Sossity; You're a Woman</li>
				<li>Singing All Day</li>
				<li>Witch's Promise</li>
				<li>Just Trying To Be</li>
				<li>Teacher (original UK mix)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/b327e7a0-71b7-4d88-92ec-14d8a9d21c97.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Aqualung_%28Jethro_Tull_album%29" target="_blank">1971 Aqualung</a>
			<ol>
				<li>Aqualung (Ian Anderson, Jennie Anderson)</li>
				<li>Cross-Eyed Mary</li>
				<li>Cheap Day Return</li>
				<li>Mother Goose</li>
				<li>Wond'ring Aloud</li>
				<li>Up to Me</li>
				<li>My God</li>
				<li>Hymn 43</li>
				<li>Slipstream</li>
				<li>Locomotive Breath</li>
				<li>Wind Up</li>
				<li>Lick Your Fingers Clean</li>
				<li>Wind Up (Quad Version)</li>
				<li>Excerpts From the Ian Anderson Interview (Mojo Magazine)</li>
				<li>A Song For Jeffrey (BBC)</li>
				<li>Fat Man (BBC)</li>
				<li>Bouree (BBC, written by Ian Anderson, Johann Sebastian Bach)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/711c09c1-b0ae-4a6b-81a4-45df22e6f560.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Thick_as_a_Brick" target="_blank">1972 Thick as a Brick</a>
			<ol>
				<li>Thick as a Brick, Part I</li>
				<li>Thick as a Brick, Part II</li>
				<li>Thick as a Brick (1978 live version at Madison Square Garden)</li>
				<li>Interview with Jethro Tull (Ian Anderson, Martin Barre and Jeffrey Hammond-Hammond)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/e8bb6aaa-8ba0-4547-a912-b74b25baa92f.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/A_Passion_Play" target="_blank">1973 A Passion Play</a>
			<ol>
				<li>Lifebeats</li>
				<li>Prelude</li>
				<li>The Silver Cord</li>
				<li>Re-Assuring Tune</li>
				<li>Memory Bank</li>
				<li>Best Friends</li>
				<li>Critique Oblique</li>
				<li>Forest Dance #1</li>
				<li>The Story of the Hare Who Lost His Spectacles (Anderson / Hammond / Evan)</li>
				<li>Forest Dance #2</li>
				<li>The Foot of Our Stairs</li>
				<li>Overseer Overture</li>
				<li>Flight from Lucifer</li>
				<li>10:08 to Paddington</li>
				<li>Magus Perde</li>
				<li>Epilogue</li>
				<li>The Story of the Hare Who Lost His Spectacles</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/6ffcd23e-90db-4c8a-82e6-129a68bc3671.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/War_Child_%28album%29" target="_blank">1974 War Child</a>
			<ol>
				<li>War Child</li>
				<li>Queen And Country</li>
				<li>Ladies</li>
				<li>Back-Door Angels</li>
				<li>Sealion</li>
				<li>Skating Away on the Thin Ice of the New Day</li>
				<li>Bungle in the Jungle</li>
				<li>Only Solitaire</li>
				<li>The Third Hoorah</li>
				<li>Two Fingers</li>
				<li>Warchild Waltz</li>
				<li>Quartet</li>
				<li>Paradise Steakhouse</li>
				<li>SeaLion 2</li>
				<li>Rainbow Blues</li>
				<li>Glory Row</li>
				<li>Saturation</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/61066e63-5b7a-4274-94c5-64ba3a3ade50.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Minstrel_in_the_Gallery" target="_blank">1975 Minstrel in the Gallery</a>
			<ol>
				<li>Minstrel in the Gallery</li>
				<li>Cold Wind to Valhalla</li>
				<li>Black Satin Dancer</li>
				<li>Requiem</li>
				<li>One White Duck / 010 = Nothing At All</li>
				<li>Baker St. Muse</li>
				<li>Grace</li>
				<li>Summerday Sands</li>
				<li>March the Mad Scientist</li>
				<li>Pan Dance</li>
				<li>Minstrel in the Gallery - Live</li>
				<li>Cold Wind to Valhalla - Live</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/a4405053-576c-4738-9d1d-e45b9892bc94.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Too_Old_to_Rock_%27n%27_Roll:_Too_Young_to_Die!" target="_blank">1976 Too Old to Rock 'n' Roll: Too Young to Die!</a>
			<ol>
				<li>Quizz Kid</li>
				<li>Crazed Institution</li>
				<li>Salamander</li>
				<li>Taxi Grab</li>
				<li>From a Dead Beat to an Old Greaser</li>
				<li>Bad-Eyed 'n' Loveless</li>
				<li>Big Dipper</li>
				<li>Too Old to Rock 'n' Roll, Too Young to Die</li>
				<li>Pied Piper</li>
				<li>The Chequered Flag (Dead or Alive)</li>
				<li>A Small Cigar</li>
				<li>Strip Cartoon</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/19c9ef83-0726-412b-aa0b-bff2abcbefbe.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Songs_from_the_Wood" target="_blank">1977 Songs from the Wood</a>
			<ol>
				<li>Songs from the Wood</li>
				<li>Jack-in-the-Green</li>
				<li>Cup of Wonder</li>
				<li>Hunting Girl</li>
				<li>Ring Out, Solstice Bells</li>
				<li>Velvet Green</li>
				<li>The Whistler</li>
				<li>Pibroch (Cap in Hand)</li>
				<li>Fire at Midnight</li>
				<li>Beltane</li>
				<li>Velvet Green (Live)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/d6fa9a5e-5a61-4402-ac42-147fa1438d17.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Heavy_Horses" target="_blank">1978 Heavy Horses</a>
			<ol>
				<li>...And the Mouse Police Never Sleeps</li>
				<li>Acres Wild</li>
				<li>No Lullaby</li>
				<li>Moths</li>
				<li>Journeyman</li>
				<li>Rover</li>
				<li>One Brown Mouse</li>
				<li>Heavy Horses</li>
				<li>Weathercock</li>
				<li>Living in These Hard Times</li>
				<li>Broadford Bazaar</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/056a8f6d-7ca2-4d12-852e-be14398d4049.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Stormwatch_%28album%29" target="_blank">1979 Stormwatch</a>
			<ol>
				<li>North Sea Oil</li>
				<li>Orion</li>
				<li>Home</li>
				<li>Dark Ages</li>
				<li>Warm Sporran</li>
				<li>Something's on the Move</li>
				<li>Old Ghosts</li>
				<li>Dun Ringill</li>
				<li>Flying Dutchman</li>
				<li>Elegy (Instrumental, David Palmer)</li>
				<li>A Stitch in Time</li>
				<li>Crossword</li>
				<li>Kelpie</li>
				<li>King Henry's Madrigal (King Henry VIII)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/0d9c1b40-caca-4093-b8da-667ab41ca2f5.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/A_%28Jethro_Tull_album%29" target="_blank">1980 A</a>
			<ol>
				<li>Crossfire</li>
				<li>Fylingdale flyer</li>
				<li>Working John, working Joe</li>
				<li>Black Sunday</li>
				<li>Protect and Survive</li>
				<li>Batteries Not Included</li>
				<li>Uniform</li>
				<li>4.W.D. (Low Ratio)</li>
				<li>The Pine Marten's Jig</li>
				<li>And Further On</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/3f232bc4-7441-4368-99e2-0840834e8ce3.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Broadsword_and_the_Beast" target="_blank">1982 The Broadsword and the Beast</a>
			<ol>
				<li>Beastie</li>
				<li>Clasp</li>
				<li>Fallen On Hard Times</li>
				<li>Flying Colours</li>
				<li>Slow Marching Band</li>
				<li>Broadsword</li>
				<li>Pussy Willow</li>
				<li>Watching Me Watching You</li>
				<li>Seal Driver</li>
				<li>Cheerio</li>
				<li>Jack Frost and the Hooded Crow</li>
				<li>Jack A Lynn</li>
				<li>Mayhem Maybe</li>
				<li>Too Many Too</li>
				<li>Overhang</li>
				<li>Rhythm in Gold</li>
				<li>I Am Your Gun</li>
				<li>Down At the End of Your Road</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/be6bf38b-755f-4485-854f-465dda2f62c2.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Under_Wraps_%28Jethro_Tull_album%29" target="_blank">1984 Under Wraps</a>
			<ol>
				<li>Lap Of Luxury</li>
				<li>Under Wraps #1</li>
				<li>European Legacy</li>
				<li>Later, That Same Evening</li>
				<li>Saboteur</li>
				<li>Radio Free Moscow</li>
				<li>Astronomy</li>
				<li>Tundra</li>
				<li>Nobody's Car</li>
				<li>Heat</li>
				<li>Under Wraps #2</li>
				<li>Paparazzi</li>
				<li>Apogee</li>
				<li>Automotive Engineering</li>
				<li>General Crossing</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/8b0eb1c4-e8ad-41ca-8ab5-3c357fa0e0d6.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Crest_of_a_Knave" target="_blank">1987 Crest of a Knave</a>
			<ol>
				<li>Steel Monkey</li>
				<li>Farm On The Freeway</li>
				<li>Jump Start</li>
				<li>Said She Was A Dancer</li>
				<li>Dogs In The Midwinter</li>
				<li>Budapest</li>
				<li>Mountain Men</li>
				<li>The Waking Edge</li>
				<li>Raising Steam</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/b87a64d1-859a-4c70-81c0-1fb00abe168c.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Rock_Island_%28album%29" target="_blank">1989 Rock Island</a>
			<ol>
				<li>Kissing Willie</li>
				<li>The Rattlesnake Trail</li>
				<li>Ears of Tin</li>
				<li>Undressed to Kill</li>
				<li>Rock Island</li>
				<li>Heavy Water</li>
				<li>Another Christmas Song</li>
				<li>The Whaler's Dues</li>
				<li>Big Riff and Mando</li>
				<li>Strange Avenues</li>
				<li>A Christmas Song</li>
				<li>Cheap Day Return / Mother Goose</li>
				<li>Locomotive Breath</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/2739a2d8-28b8-4394-92fb-b2e0625616e3.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Catfish_Rising" target="_blank">1991 Catfish Rising</a>
			<ol>
				<li>This Is Not Love</li>
				<li>Occasional Demons</li>
				<li>Roll Yer Own</li>
				<li>Rocks On The Road</li>
				<li>Sparrow On The Schoolyard Wall</li>
				<li>Thinking Round Corners</li>
				<li>Still Loving You Tonight</li>
				<li>Doctor To My Disease</li>
				<li>Like A Tall Thin Girl</li>
				<li>White Innocence</li>
				<li>Sleeping With The Dog</li>
				<li>Gold-Tipped Boots, Black Jacket And Tie</li>
				<li>When Jesus Came To Play</li>
				<li>Night in the Wilderness</li>
				<li>Jump Start (live)</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/00120f4f-22e1-4b75-a389-5b8102c915e3.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/Roots_to_Branches" target="_blank">1995 Roots to Branches</a>
			<ol>
				<li>Roots To Branches</li>
				<li>Rare And Precious Chain</li>
				<li>Out Of The Noise</li>
				<li>This Free Will</li>
				<li>Valley</li>
				<li>Dangerous Veils</li>
				<li>Beside Myself</li>
				<li>Wounded, Old And Treacherous</li>
				<li>At Last, Forever</li>
				<li>Stuck In The August Rain</li>
				<li>Another Harry's Bar</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/cc46f2ee-927a-452e-80e9-224389f10969.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/J-Tull_Dot_Com" target="_blank">1999 J-Tull Dot Com</a>
			<ol>
				<li>Spiral</li>
				<li>Dot Com</li>
				<li>AWOL</li>
				<li>Nothing @ All (Giddings)</li>
				<li>Wicked Windows</li>
				<li>Hunt By Numbers</li>
				<li>Hot Mango Flush (Anderson - Barre)</li>
				<li>El Nino</li>
				<li>Black Mamba</li>
				<li>Mango Surprise</li>
				<li>Bends Like A Willow</li>
				<li>Far Alaska</li>
				<li>The Dog-Ear Years</li>
				<li>A Gift Of Roses</li>
			</ol>
		</div>
	</div>
	<div class="title">
		<img src="http://static.pixelpipe.com/1d522bf8-c180-4954-98c5-87bf55e20a3d.jpg" />
		<div class="detail">
			<a href="http://en.wikipedia.org/wiki/The_Jethro_Tull_Christmas_Album" target="_blank">2003 The Jethro Tull Christmas Album</a>
			<ol>
				<li>Birthday Card at Christmas</li>
				<li>Holly Herald</li>
				<li>A Christmas Song</li>
				<li>Another Christmas Song</li>
				<li>God Rest Ye Merry, Gentlemen</li>
				<li>Jack Frost and the Hooded Crow</li>
				<li>Last Man at the Party</li>
				<li>Weathercock</li>
				<li>Pavane</li>
				<li>First Snow on Brooklyn</li>
				<li>Greensleeved</li>
				<li>Fire at Midnight</li>
				<li>We Five Kings</li>
				<li>Ring Out Solstice Bells</li>
				<li>Bouree</li>
				<li>A Winter Snowscape</li>
			</ol>
		</div>
	</div>
</div>
<br style="clear:both" />

↓js

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$("div.title").hover(
		function(){
			$("img",this)
				.css({"zIndex":"2","boxShadow":"0 0 15px #000"})
				.animate({width:"155px",height:"155px",marginLeft:"-30px",marginTop:"-30px"},400);
			$("div.detail",this)
				.css("display","block")
				.animate({marginLeft:"-30px",marginTop:"120px"},400);
		},
		function(){
			$("img",this)
				.css({"zIndex":"1","boxShadow":"none"})
				.animate({width:"95px",height:"95px",marginLeft:"0",marginTop:"0"},200);
			$("div.detail",this)
				.css("display","none")
				.animate({marginLeft:"-30px",marginTop:"95px"},400);
		}
	)
</script>

IEにも対応していて、jQuery開発者には感謝です。

I’d never listened to Anathema but "Eternity" album. But I love their music. A girl of the neighboring room at the hotel said she loves too.
It was great performance.

アナシマは『Eternity』しか聴いたことありませんでしたが好きなバンドです。ホテルで隣の部屋の女性も好きだと言っていました。
この女性に関して、ちょっとした逸話があるのですが、後日書きます。




(続きを読む…)

撮らせてもらった動画です。

タケリタケ（カリ）とはいえ、実態はChris-Tinaです。この日は、ボーカロイドのカヴァーでしたが、詳しくないので本人のブログを参照のこと！
↓
HONEY.com-B Girl ACT2｜Rioちんの『年中クリスマス！』

Chris-Tinaは４～５回観てますが、去年の後半くらいから急に良くなったように思います。



(続きを読む…)