2012年11月30日 星期五
2012年11月29日 星期四
2012年11月28日 星期三
資訊圖表蒐集站- info graphic world

info graphic(資訊圖表)是近年來很夯的一種資訊表現方式,一張好的info graphic既可吸引人的注意,也可以清楚表達想要表達的資訊。
info graphic world就是蒐集info graphic的網站,一起到上面找靈感吧。
2012年11月27日 星期二
2012年11月26日 星期一
css 畫三角形
用純css畫三角形。
首先準備html,用一個div就可以製作了。
css如下
可以調整一下邊框的顏色跟寬度,不要只有一面不透明,會有不一樣的效果喔。
最後效果如下。

Read more
首先準備html,用一個div就可以製作了。
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
css如下
- .arrow-up { width:0px; height:0px; border:10px solid; border-color:transparent transparent black transparent; border-style:dashed dashed solid dashed; }
- .arrow-down { width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }
- .arrow-right { width:0px; height:0px; border:10px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid; }
- .arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed; }
可以調整一下邊框的顏色跟寬度,不要只有一面不透明,會有不一樣的效果喔。
最後效果如下。

2012年11月25日 星期日
[PHP] 圖片置中 使用getimagesize
一般社群網站的個人圖像,大多在列表顯示的時候都會是正方形的,這樣會比較整齊,可是不會每個人都上傳圖片的時候都傳正方形的圖片,所以在顯示的時候就要做一些設定。
首先準備一個div包著img,讓外層的div的position為relative,並設overflow:hidden,內層的img則把position設為absolute,這樣可以先避免圖片超出區塊破版。
處理最好是在html讀取的時候就處理,所以用php來取得圖片的長寬,使用GD函式庫的getimagesize。
取得後判斷長寬哪個比較大,讓小的那個符合div的寬度,並算出大的那個的大小。
最後在計算(較大邊-div長度)/2,求出偏移量,再用行內的style把值給丟進去就可以了。
Read more
首先準備一個div包著img,讓外層的div的position為relative,並設overflow:hidden,內層的img則把position設為absolute,這樣可以先避免圖片超出區塊破版。
處理最好是在html讀取的時候就處理,所以用php來取得圖片的長寬,使用GD函式庫的getimagesize。
- $arr = getimagesize("圖像");
- /*
- * 回傳陣列$arr
- * $arr[0] 為圖像的寬度
- * $arr[1] 為圖像的高度
- * $arr[2] 為圖像的格式,包括jpg、gif和png等
- * $arr[3] 為圖像的寬度和高度,內容為 width="xxx" height="yyy"
- */
取得後判斷長寬哪個比較大,讓小的那個符合div的寬度,並算出大的那個的大小。
最後在計算(較大邊-div長度)/2,求出偏移量,再用行內的style把值給丟進去就可以了。
2012年11月24日 星期六
GleeFB終止服務公告
親愛的GleeFB會員們:
感謝各位會員夥伴們一直以來的支持。GleeFB的目標是與會員們共創廣告分享的價值並分享廣告利潤,但由於近期Facebook推出了類似的贊助廣告,讓GleeFB的業務推廣日益困難。基於對會員們的重視及承諾,我們仍努力維持每日活動量,但由於業務推展持續不如預期,所獲得的廣告預算難以支持整個模式的運作,使我們不得不作出暫停GleeFB運作的決定。
GleeFB App的分享活動至少仍將持續至2012/11/30,i-bon兌換服務則持續提供至2012/12/31,請各位會員夥伴把握時間進行既有點數的兌換,再次感謝大家的熱情支持!
GleeFB團隊敬上
一個服務的終止其實並沒有什麼,重要的是可以遇到一群喜歡的團隊,我覺得這幾年我遇到的都是一些很值得信賴的團隊,只要有信念,就一定可以改變這個世界的,我是這麼相信的。
當然我們也有下一步的計畫啦.. 敬請期待。
Read more
感謝各位會員夥伴們一直以來的支持。GleeFB的目標是與會員們共創廣告分享的價值並分享廣告利潤,但由於近期Facebook推出了類似的贊助廣告,讓GleeFB的業務推廣日益困難。基於對會員們的重視及承諾,我們仍努力維持每日活動量,但由於業務推展持續不如預期,所獲得的廣告預算難以支持整個模式的運作,使我們不得不作出暫停GleeFB運作的決定。
GleeFB App的分享活動至少仍將持續至2012/11/30,i-bon兌換服務則持續提供至2012/12/31,請各位會員夥伴把握時間進行既有點數的兌換,再次感謝大家的熱情支持!
GleeFB團隊敬上
一個服務的終止其實並沒有什麼,重要的是可以遇到一群喜歡的團隊,我覺得這幾年我遇到的都是一些很值得信賴的團隊,只要有信念,就一定可以改變這個世界的,我是這麼相信的。
當然我們也有下一步的計畫啦.. 敬請期待。
window.location.href和window.location.replace的差別
javascript的導頁可以用window.location.href和window.location.replace(),差別在於
是導到新的頁面,離開後按上一頁、下一頁都可以回到這頁。
而
則不會紀錄上一頁跟下一頁,可以用來作過渡網頁。
另外,
可以用來重新讀取網頁。
Read more
- window.location.href("url")
而
- window.location.replace("url")
另外,
- window.location.reload()
2012年11月22日 星期四
Cover Flow Web
把網站做成cover flow有沒有搞頭,理論上是做得到,可是不見得會是web上好的瀏覽方式,下面是AE作的示意圖,我也用js寫了一個demo,只是效果還差很多,真的有要進行實作再好好調整。
Read more
2012年11月18日 星期日
AS 3.0 限制拖曳範圍
之前一個專案要做flash的拖曳效果,因為也還滿常有機會用到的,做個筆記。
主要要偵測滑鼠按下及起來,用startDrag(false, new Rectangle(x, y, width, height))去限制他的拖曳範圍就可以了。
Read more
主要要偵測滑鼠按下及起來,用startDrag(false, new Rectangle(x, y, width, height))去限制他的拖曳範圍就可以了。
- drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragme);
- function dragme(e:MouseEvent){
- drag_mc.startDrag(false, new Rectangle(x, y, width, height));
- }
- drag_mc.addEventListener(MouseEvent.MOUSE_UP,stopdragme);
- function stopdragme(e:MouseEvent){
- drag_mc.stopDrag();
- }
2012年11月17日 星期六
非常勸敗 每日限時好康 for iOS
紅色死神 發表於 2012年11月17日 星期六
11月 17, 2012
/ 沒有留言
標籤 css3, GleeShare, html5, iOS, javascript, jquery, mobile app, mobile web
標籤 css3, GleeShare, html5, iOS, javascript, jquery, mobile app, mobile web

之前介紹的Android版VeryBuy App,現在iOS版的也上線了,照上一篇說的,核心是傳說中的HTML 5,不過包成App有對各個地方作優化,效能還是比不上全原生的app,但開發速度卻可以快非常多。

app store上的VeryBuy
jQuery 水平slider

最近做的一個slider,當滑鼠移到其中一個圓圈上面,就會滑到那一頁去。
準備像這樣的html
<div class="slide">
<div class="slide_img">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<ul class="pagenation">
</ul>
</div><!--slide-->
設定一下css,了解position的原理就可以了。
先根據有多少張圖,長出切換的圈圈。
- $(".slide_img img").each(function(){
- $(".pagenation").append("<li></li>");
- });
再根據圖片的數量調整div的寬度。
- $slideImgWidth=$i*(picture width);
- $(".slide_img").css("width",$slideImgWidth);
最後再偵測是在哪一個圈圈,移動圖片的位置就好了。
- $(".pagenation").on("mouseenter", "li", function(e){
- $pageNum=$(this).index();
- $moveWidth=0-$pageNum*(picture width)+"px";
- $(".slide_img").animate({left: $moveWidth });
- });
Demo
2012年11月14日 星期三
[SR超合金] 勇者王GAOGAIGAR+勝利之鍵

故事講述2003年,一個神秘巨型機械生命體「EI-01」出現,把當時是太空人的獅子王凱的太空船擊落,同一時間,一架神秘的機械獅子「伽立歐」(Galeon)出現攻擊EI-01,救起了獅子王凱,而EI-01則墜入地球,從此行蹤不明。伽立歐帶來了名為「G石」的動力源以及關於外星生命「腦核」(Zonder)的情報。人類除了以G石的能源將凱救活、並改造成機器人外,也以伽立歐的外星科技情報製造了一系列對抗腦核的武器與機械,日本政府為了對抗腦核而成立了地球防衛勇者隊3G(Gutsy Geoid Guard)。
在EI-01出現前,伽立歐就已出現過地球人之前,他將一個小男孩交給了沒有孩子的天海夫婦,後者將孩子取名為「天海護」,並以一般小學生的身份生活著。2005年,東京都出現了最初的腦核—EI-02,開始對人類發動攻擊,而地球的未來就依靠地球防衛勇者隊3G的隊員,故事也由於展開。


2012年11月11日 星期日
Flash AS3 清掉MoieClip上Loader讀取進來的東西
這個是要清空MovieClip上之前用loder讀取進來東西,可以用的方法。
參考:
AS3 How to remove previous loaders
Read more
- while(mc.numChildren > 0){
- mc.removeChildAt(0);
- }
參考:
AS3 How to remove previous loaders
2012年11月10日 星期六
Flash AS3.0讀取外部文字檔
用actionsctip 3讀取外部文字的方法。
Read more
- var request:URLRequest=new URLRequest("data.txt");
- var loader:URLLoader = new URLLoader();
- loader.load(request);
- loader.addEventListener(Event.COMPLETE,textLoad); //要加這個才讀的到
- function textLoad(e) {
- loadText.text=loader.data;
- }
jQuery設定div高度等高
如果要用div去製作以往表格的效果,可能會遇到左右沒辦法對稱的問題,這時候可以先抓取原本的高度,然後找去其中最大的值,之後再動態讓Dom去改變高度就可以了。
Read more
- height1=$(selector1).height();
- height2=$(selector2).height();
- maxHeight=Math.max(height1=, height12);
- $(selector1, selector2).height(maxHeight);
2012年11月9日 星期五
Diving innovation in nature user interface

今天去參加一個論壇,講的是UI跟UX。
這次聽到所謂的NUI,NUI是UI的一種,講者從開始有電子產品的文字介面TUI(Text User Interface),用圖形的GUI(Graphical User Interface),到這次提到的NUI(Nature User Interface),是一種UI的演進過程,因為載具的多元化跟進步,原本的GUI是不夠的,於是就有人提到NUI這個概念,而這個概念其實也成型十幾年了。
你可以想像電影關鍵報告,那種在空中一些手勢就可以操作機器,就是所謂的NUI,也就是除了介面外,也要考慮到操作的流程跟動作的UI。講者也說到AE是用來溝通設計師跟工程師的一個很重要的工具,我還滿開心兩個都會的,AE可以來作概念,js可以拿來實作,都是很棒的事情。
然後當然最開心的就是抽中大獎囉

第一次知道那種抽到大獎的人的感覺,我還以為這種幸運總是跟我絕緣的呢。
2012年11月8日 星期四
2012年11月6日 星期二
非常勸敗 每日限時好康 for Android
紅色死神 發表於 2012年11月6日 星期二
11月 06, 2012
/ 沒有留言
標籤 Android, css3, GleeShare, html5, javascript, jquery, mobile app, mobile web, php
標籤 Android, css3, GleeShare, html5, javascript, jquery, mobile app, mobile web, php

最近完成的app作品,是跟幾個朋友用傳說中的hybrid方法開發出來的app,內容是html+css+js呈現,再用原生的程式包起來完成的,在開發的過程中也碰到一些有趣的問題,加上合作的朋友都很厲害,所以這個app是在彈性、開發速度和效能取得很好平衡的一隻app。

android跟iOS是差不多同時完成的,不過因為apple審核比較久的關係,所以目前只有android上看的到,iOS還在審核中。
Google Play上的非常勸敗 每日限時好康
非常勸敗每日限時好康提供來自於台灣各大購物網站的優惠、免運訊息、每日超過100檔的優惠情報,是女生逛網拍、找團購、上網購物的好姊妹。
非常勸敗每日限時好康是由非常勸敗(Verybuy)製作,每日提供來自於購物中心、拍賣、17P好康、7Net、瘋狂賣客、UDN買東西、PCHome等數十家購物網站的優惠免運訊息、每日超過100檔的優惠情報,是女生逛網拍、找團購、上網購物的好姊妹。
2012年11月4日 星期日
訂閱:
文章 (Atom)
文章
-
▼
2012
(301)
-
▼
十一月
(25)
- 老二出生
- 互動裝置設計
- 資訊圖表蒐集站- info graphic world
- Javascript Territory- 蒐集javascript library
- css 畫三角形
- [PHP] 圖片置中 使用getimagesize
- GleeFB終止服務公告
- [GIGA合金] Final斷空我
- window.location.href和window.location.replace的差別
- Cover Flow Web
- AS 3.0 限制拖曳範圍
- [轉輪科技] アークグレンラガン
- 非常勸敗 每日限時好康 for iOS
- jQuery 水平slider
- [SR超合金] 勇者王GAOGAIGAR+勝利之鍵
- 北科大FLASH微積分講義
- Flash AS3 清掉MoieClip上Loader讀取進來的東西
- Flash AS3.0讀取外部文字檔
- jQuery設定div高度等高
- Diving innovation in nature user interface
- [Robot魂] ビルバイン(比爾拜因)
- 非常勸敗 每日限時好康 for Android
- crc32
- 參觀保安宮 & 台北孔廟
- 章魚小籤籤
-
▼
十一月
(25)

標籤雲
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
360
3D
3D Printer
3D Scanner
3D TV
3DS LL
3ds max
七大創意原則
七武海
九州
九型人格
人生
十大創新法則
三立
三立新聞網
三星
三國傳
千值練
大地盃
大阪
大津
大氣系
小田原
小朋友
小動畫
中央大學
中平商圈
中華職棒
互動設計
公視
天氣娃娃
心情日記
手機
手繪
日文
日本
日本戰國
日本職棒
日劇
月津港
火箭營
仙書紀
令和
北海岸
北海道
北關
可動群雄
台中
台南
台湾狼
台灣
台灣社群排行榜
台灣數位文化協會
台灣選舉地圖
史旺基
平面設計
未來國會
正妹
永平工商
生日
立委
光雕
印刷
名片
地科院
地球村
地圖
地震
好人卡
好軟體
好網站
年誌
成果展
早安
有聲書
江火明
自介
行銷
衣服
似顏繪
初音
完成品
尾牙
我的迷你城市
我要當女一
扭蛋盒玩
扭蛋戰士DASH
扭蛋戰士NEXT
汶萊
沖繩
狂新聞
京都
制服
制服大賞
制服女孩
命理
夜之祭
奈良
姊妹
宜蘭
東大特訓班
東京
武神降臨編
直播
社群日
股票
金流
金庸
侯文詠
勇者
厚生市集
咪醬
哆啦A夢
星座
活力熊
研究所
穿衣指數
紅色死神
美劇
風起雲湧
風雲祭
飛肯
香港
哥吉拉
展覽
座談會
旅行
旅遊
時報周刊
書
書單
栗原洋服店
格言
桃園
桌面寵物
氣象
氣象主播
氣象局
氣象預報
海洋堂
特殊符號
特攝
班服
神戶
神奇寶貝
紙公仔
紙模型
退休光碟
高中職博覽會
高校誌
假面騎士
偉大的航道
動物森友會
動畫
動畫術語
專家審查會議
專題
教學
產生器
設計
部落格
部落格小玩意
陳金鋒
創業
喬巴
媒體報導
減碳雙熊
無名
無障礙
程式
童顏app
絕對領域
萌
萌咩誌
評審
賀卡
超合金魂
超合金魂 F.A.
超級英雄圖譜
超級英熊
超級戰隊
跑馬燈
雲寶
黑襪
奧爾資訊
新聞易數
義大遊樂世界
聖鬥士星矢
資策會
路上觀察
遊記
遊戲
零秒出手
電子看板
電子書
電子報
電腦戰機
電影
預付卡
團體服
壽屋
夢想
慈幼社
漫畫
綠界
網頁
網頁作品
網站工具
網站優化
網路狂人週報
舞台背板
蜜月
酷瞧
颱風
餅乾
魂spec
彈珠台
影片
影音氣象
影集
影像處理
數位時代
樂樂小黃
模型
熱舞
獎金獵人
稻江護家
箱根
膝上襪
衛星雲圖
論壇
遮罩
戰鬥女子學園
戰隊
橋本環奈
機器人
機器人相關
講師
還願
黏土人
瀏覽器
翻譯
藍球教學
轉輪科技
鎌倉
雞排妹
顏文字
羅東
寶貝
籃球
蘋果日報
攝影
蘭友會
鐵啞鈴
魔神英雄傳
魔動王
讀書會
體育用品
ACA
ACE
AddThis
Adobe
Adobe XD
aerender
After Effect
AIR
AJAX
Android
AngularJS
AngularUI
Annual Analysis
ANSI
API
Apple
Apple Watch
AR
AR+
Arduino
array
Arrow
AS 3.0
background
BANDAI
Batman
BB戰士
bbs
blog
blogger
Blogger Touch
board game
bootstrap
Brave合金
browser
C3.js
CANDY醬
canvas
Card sorting
chrome
CI
CM's
cocos2D
CodeIgniter
color
COMPOSITE Ver. Ka
cookie
cosa
cosplay
css
css3
css教學
CW
CWB
D-Arts
D3.js
DC Comics
Death Note
deathhell
Decool
design
desktop
DeTools
Diablo
Discuz
display
dragon
embed
Emmet
EVA
excel
facebook
favicon
fc2
filter
Firebug
firefox
flash
Flex
FlickLinkr
flickr
FQL
fun電
Fun籃球
G Generation
G+
GARNiDELiA
GFF
GIGA合金
GIPHY
git
GleeFB
GleeShare
google
google adsense
Google Analytics
google datastudio
google fonts API
Google Geocoding API
Google Map API
google mapplets
google PageSpeed API
google tool bar
google+1
googlemaps
grid
GTI
GUNDAM
Gundam W
GUNDAM“EX-STANDARD”
Gunpla
GunXSword
hairbook
hairdodo
hairmap
Hami App
HG
HiRM
Homebook
HPX
htaccess
html
html5
iAngel
ichannel
ico
icon
IDEO
IE
III
illustrator
ImageMagick
InDesign
info graphic
instagram
iOS
iphone
Iron Man
ITCD
iTenki
IxD
javascript
JK
jquery
jquery plugin
jQuery UI
js
JSDC
JSON
JSON-LD
Keroro魂
Kobe
Koobii 高校誌
kuso
La new
lazyload
LEGO
less
life style
Line
Linux
localStorage
logo
LucyPop
Mac OS
MAD
mailgun
Maker Fair
Marvel Comics
MegaHouse
meta
Metal Robot 魂
MG
MIC
mit.jobs
MLB
mobile app
mobile web
movie
MSI
MSN小圖
MSN小綠人
msn表情符號
MSN機器人
mssql
MTK
My Weather
MySQL
NBA
NCU
NeoShop
node.js
nokia
NXEDGE STYLE
NXT
ONEPIECE
open data
OpenCart
ovomedia
Pantone
PChome
PDO
persona
photoshop
photoshop教學
php
phpFlickr
Picasa
pintrest
Pixnet
PIXOSTYLE
plurk
pokemon
Pokemon Go
Pokémon-Info
PPT
premiere
PTT
pv3d
PWA
Python
Raspberry Pi
react.js
reCAPTCHA
Restaurant City
RIOBOT
RoboInfo
robot
ROBOT魂
rockman
rockman X
RQ-Star
RWD
S.H.E
S.H.Figuarts
S市集
SCANDAL
scratch
Scss
SDCS
SDX
Semantic UI
SEO
showtenki
simpleXML
SketchUp
slideshow
sliding doors
spotlights
SQL
SQL Server
srw
SRW OG
star wars
Sublime Text
Super Heroes
Super MiniPla
Super Robot超合金
Supergirl
svg
switch
SyntaxHighlighter
TapFighters
TenkiMaps
TibaMe
Titanium
TP合金
TweenMax
twitter
U-Mobile
UCD
UI
UiGathering
Uniform Map
Unity
Usability
UX
video
vimeo
vQmod
Vue.js
WBC
WCF
weather
weather icon
weatherrisk
web
Web Design Theory
WebApp
WebConf
widget
Win7
wingzero
Wordpress
XAMPP
xml
XMLHttpRequest
Xuite
Yahoo API
Yahoo open hack
Yahoo!
Yam
YouTube
ZOIDS
