# [WEB]JustWEB20090629

- URL: https://justfly.idv.tw/743/
- 日期: 2009-06-29
- 分類: 我知故我在
- 標籤: 3D, css, design, javascript, jquery, photoshop, web, 創意, 教學, 素材

http://farm4.static.flickr.com/3620/3670360624_784b0f1e9c.jpg http://farm3.static.flickr.com/2448/3669555779_c028fd9f6b.jpg http://farm4.static.flickr.com/3549/3670360794_7136c84559.jpg http://farm4.static.flickr.com/3344/3669555981_84cc13b6f9.jpg http://farm4.static.flickr.com/3537/3670360938_d8de7a1761.jpg http://farm4.static.flickr.com/3628/3670360988_b08a7c2e06.jpg http://farm4.static.flickr.com/3651/3669556131_424b15dd73.jpg http://farm4.static.flickr.com/3310/3670361078_a493a55c82.jpg http://farm4.static.flickr.com/3618/3670361182_f8fc464782.jpg http://farm4.static.flickr.com/3617/3670361250_a1ba3ba5b3.jpg http://farm3.static.flickr.com/2559/3670361288_6c72b6b53e.jpg http://farm4.static.flickr.com/3392/3670361320_7275a2f52f.jpghttp://farm4.static.flickr.com/3324/3669556547_e6c513c420.jpghttp://farm3.static.flickr.com/2439/3670361434_bda495bc8b.jpghttp://farm4.static.flickr.com/3392/3670361522_25d736f008.jpghttp://farm4.static.flickr.com/3545/3669556705_81261ffd60.jpghttp://farm3.static.flickr.com/2473/3670361612_9c76a46991.jpg http://farm3.static.flickr.com/2465/3670361660_f1ce91bcef.jpg http://farm4.static.flickr.com/3543/3669556809_b126547c9e.jpg http://farm3.static.flickr.com/2554/3670361768_3900861d02.jpg http://farm4.static.flickr.com/3370/3669556927_7a01337c0e.jpg http://farm4.static.flickr.com/3635/3670361878_46acb10088.jpghttp://farm4.static.flickr.com/3324/3669557029_a7084abedc.jpg

[用photoshop做出的3D文字教學](http://vandelaydesign.com/blog/design/3d-photoshop-text-effects/)

http://farm4.static.flickr.com/3569/3670287074_188cb40d96.jpg

測試網站在各個解析度螢幕的顯示 – [viewlike.us](http://viewlike.us/)

支援320×396到1920×1200

還有iphone跟Wii的模擬…

http://farm4.static.flickr.com/3404/3670537589_747ab102e1.jpg

富士山的卡通宣傳短片

[富山観光アニメプロジェクト](http://www.bbt.co.jp/cooltoyama/index.html)

用jQuery做出把T-shirt摺好跟展開的效果

[How to Make a Threadless Style T-Shirt Gallery](http://buildinternet.com/2009/06/how-to-make-a-threadless-style-t-shirt-gallery/)

轉貼他的程式碼：

CSS：

```
*{
 margin:0;
 padding:0;
 }
 img{
 border: none;
 }
 body {
 text-align: center;
 background: #222;
 }
 h2{
 color: #333;
 font:italic 36px Georgia, serif;
 padding: 20px;
 border-bottom: dashed 1px #999;
 clear: both;
 }
 #content{
 width: 100%;
 margin: 0px auto;
 background: #fff;
 text-align: center;
 margin-bottom: 50px;
 }
 .row{ /*Container for each row of shirts*/
 width: 495px;
 margin: 0px auto;
 clear:both;
 padding: 20px 0;
 }
 .teebox{
 overflow: hidden; /*Prevents excess of image from showing*/
 position: relative;
 margin: 0 10px;
 width: 144px; /*Width and height define thumbnail size*/
 height: 183px;
 float: left;
 clear: right;
 z-index: 0;
 }
 .selected{
 overflow: visible; /*Display part of image that not currently visible*/
 z-index: 10;
 }

 .teebox img {
 left:-84px; /*Use this to center your image when not hovered*/
 position: absolute;
 }
 .teebox a{ /*Area that changes to selected class when hovered over*/
 display:block;
 position: relative;
 float: left;
 left: 84px; /*Use to line up the overlay image*/
 z-index: 1;
 }
 .caption{
 color: #2FB5FF;
 font:14px Arial;
 position: relative;
 float: left;
 left: 0px;
 top: 146px;
 padding: 10px;
 background: #222;
 z-index: 1;
 }
```

HTML：

```
$10
```

jQuery：

```
$(document).ready(function() {
 $(".teebox a").mouseover(function(){
    $(this).parent().addClass("selected");
    $(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
    $(this).parent().find('.caption').hide(); //Hides Caption
 }).mouseout(function(){
    $(this).parent().removeClass("selected");
    $(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
    $(this).parent().find('.caption').show(); //Shows Caption
 });
});
```