<div class="eff"> <img src="image.gif" alt="Test 1" title="" height="126" width="126"> <div class="caption"><a href="http://www.queness.com" class="header">Header</a><p>Description</p></div> </div>
body { font-family:arial; } .eff { /* the image size is 126x126, it's adjusted to fit the border as well*/ width:136px; height:136px; /* important, allow the children object to move inside its parent obj */ position:relative; /* important, it hides the moved image */ overflow:hidden; /* with the clear class, make it into 3 x 3 layout */ float:left; /* IE float bug fix */ display:inline; /* styling */ margin:8px; font-size:12px; } .eff img { display:block; width:126px; height:126px; /* styling */ text-decoration:none; border:4px solid #ccc; background:#ddd; /* important, it allows this obj to move by jquery */ position:absolute; /* make sure it appears above the caption */ z-index:500; cursor:pointer; cursor:hand; } .eff .caption { /* should be the same size with the image */ width:126px; height:126px; /* styling */ background:#333; border:4px solid #ccc; color:#eee; /* set the position to 0, 0 and appear under the image */ position:absolute; top:0; left:0; z-index:0; } /* extra styling*/ .eff .caption a.header { margin:10px 5px 5px 5px; display:block; font-size:14px; font-weight:700; color:#4ed7f4; } .eff .caption p { margin:5px; } .clear {clear:both}
$(document).ready(function() { //if mouse over and mouse out $('.eff').hover( function () { value = $(this).find('img').outerHeight() * -1; //for left/right if you have different width and height, //commented out because we are using up/down in this example //value = $(this).find('img').outerWidth() * -1); //animate the image //you can change the sliding direction by changing bottom to left, right or top //if you changed this, you will have to change the position of the hover out as well $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'}); }, function () { //reset the image //the position property (bottom), it must be same with the on in the mouseover $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'}); }); //if user clicked on the thumbnail $('.eff').click(function () { //grab and execute the first link in the thumbnail window.location = $(this).find('a:first').attr('href'); }); });
<form action="" method="post" id="info"> <h2>Contact Information</h2> <div id="name-wrap" class="slider"> <label for="name">Name</label> <input type="text" id="name" name="name"> </div><!--/#name-wrap--> <div id="email-wrap" class="slider"> <label for="email">E–mail</label> <input type="text" id="email" name="email"> </div><!--/#email-wrap--> <div id="street-wrap" class="slider"> <label for="st">Street</label> <input type="text" id="st" name="st"> </div><!--/#street-wrap--> <div id="city-wrap" class="slider"> <label for="city">City & State</label> <input type="text" id="city" name="city"> </div><!--/#city-wrap--> <div id="zip-wrap" class="slider"> <label for="zip">Zip code</label> <input type="text" id="zip" name="zip"> </div><!--/#zip-wrap--> <input type="submit" id="btn" name="btn" value="submit"> </form>
body { font:12px/1.3 Arial, Sans-serif; } form { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; } div { clear:both;position:relative;margin:0 0 10px; } label { cursor:pointer;display:block; } input[type="text"] { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; } input[type="text"]:focus { border-color:#777; } input[name="zip"] { width:150px; } /* submit button */ input[type="submit"] { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; } input[type="submit"]:hover, input[type="submit"]:focus { border-color:#333;background:#ddd; } input[type="submit"]:active{ margin-top:1px; }
$(function(){ $('form#info .slider label').each(function(){ var labelColor = '#999'; var restingPosition = '5px'; // style the label with JS for progressive enhancement $(this).css({ 'color' : labelColor, 'position' : 'absolute', 'top' : '6px', 'left' : restingPosition, 'display' : 'inline', 'z-index' : '99' }); // grab the input value var inputval = $(this).next('input').val(); // grab the label width, then add 5 pixels to it var labelwidth = $(this).width(); var labelmove = labelwidth + 5; //onload, check if a field is filled out, if so, move the label out of the way if(inputval !== ''){ $(this).stop().animate({ 'left':'-'+labelmove }, 1); } // if the input is empty on focus move the label to the left // if it's empty on blur, move it back $('input').focus(function(){ var label = $(this).prev('label'); var width = $(label).width(); var adjust = width + 5; var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':'-'+adjust }, 'fast'); } else { label.css({ 'left':'-'+adjust }); } }).blur(function(){ var label = $(this).prev('label'); var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':restingPosition }, 'fast'); } }); }) });
| HOME | 次ページ ≫
Author:wobiwan Web Design初心者(noob)が "ほぼ自分の為の" HTML・CSS・その他デザインの情報を載せています。プロフィールはこちらwobiwan1@gmail.comwobiwan1@gmail.comwobiwan2@yahoo.co.jp wobiwan1wobi-wanwobiwanDesign MemoSteamiddy:
PING送信プラス by SEO対策
wobiwan1@gmail.com
wobiwan1@gmail.comwobiwan2@yahoo.co.jp .png)
wobiwan1
wobi-wan
wobiwan
Design Memo
Steam
