js Click 播放音樂 / 音效（未完成）

發表在 html、Javascript、Others 中 by Alice

使用jQuery、以及自製套件播放
http://ionden.com/a/plugins/ion.sound/en.html
感覺東西很多….真的沒辦法才使用這套
僅使用jQuery官方套件使用
http://jsfiddle.net/AliceWei/p8j26a6w/
與下方比較，載入速度快些，我還在試著看懂他…
純js寫法
http://jsfiddle.net/AliceWei/L209493o/
比較好懂，只是速度比上面慢些

31八月2014

可喜可賀~原來建立wp可以這麼簡單

發表在 Others 中 by Alice

參考Bater的網誌

「哈哈哈！哈哈哈！～wp建好了…」。忘記說，非常感謝Bater^^

26八月2014

jQuery Accordion套件 Vallenato.js

發表在 Others 中 by Alice

連結在此：http://www.switchroyale.com/vallenato/

有一點比較奇怪的，就是當我連結使用JQUERY函式庫的時候，
1.9.1版本＆jquery-latest.js（2014/8/26）版本作用不同，
1.9.1toggle打開時會頓一下，不是存取Vallenato.js資料夾內問題噢。

4六月2014

slider 套件蒐集

發表在 Javascript、Others 中 by Alice

1.可以touch Autoplay的Slide（但是當手機網站高度高於實際螢幕高度時，在slide區域內無法撥上撥下）

http://excolo.github.io/Excolo-Slider/

從這邊找到的：http://jquery-plugins.net/tag/touch-enabled-slider

** 以下感謝Jerry大大的提供 **

flexslider
http://flexslider.woothemes.com/
特色：定時往右滾動, 點擊左右滾動

nivo-slider
http://dev7studios.com/plugins/nivo-slider
特色：高度會自動增減, 定時向右滾動

Slicebox
http://tympanus.net/Development/Slicebox/
特色：提供四種不同的換頁方法
下載位置：http://tympanus.net/Development/Slicebox/Slicebox.zip

ImageTransitions
http://tympanus.net/Development/ImageTransitions/
特色：各種不同的換頁效果，使用翻動的方動
下載位置：http://tympanus.net/Development/ImageTransitions/ImageTransitions.zip

Galleria
http://galleria.io/
特色：有ControlBar可以操作
下載位置：http://galleria.io/static/galleria-1.2.7.zip

AnythingSlider
http://css-tricks.github.io/AnythingSlider/#&panel1-3&panel2-4
特色：左右按鈕樣式有許多選擇，換頁有橡皮筋效果
下載位置：http://github.com/ProLoser/AnythingSlider/downloads

An HTML5 Slideshow
http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html
特色：用顏色變化和淡入淡出來換頁
下載位置：http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.zip
參考網址：http://www.hksilicon.com/kb/articles/110277/12-jQuery

17十月2013

swf to svg converter / 幫flash安裝google Swiffy

發表在 Others 中 by Alice

只要安裝這個google Swiffy

https://www.google.com/doubleclick/studio/swiffy/extension.html
在上方選單的command就會發現 “Export as HTML5(Swiffy)" ，
fla完成就能直接點擊進行轉檔，轉檔完該檔附檔名變成XXX.swf.html。

小紅球. swf

fla	swf	svg
5.24k	807個位元	2.36k

動畫過於簡單，swf反而比svg小，複雜些的結果就顛倒了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="https://www.gstatic.com/swiffy/v5.3/runtime.js"></script>

<script>
swiffyobject = {"tags":[{"frames":[],"scenes":[{"name":"場景 1","offset":0}],"type":23},{"bounds":[{"ymin":-660,"ymax":660,"xmin":-660,"xmax":660}],"id":1,"fillstyles":[{"color":[-43202],"type":1}],"paths":[{"fill":0,"data":["::60Fb73B:67D3sb3S4s3S67db:73b3s66db4s4s67d4sb73b:66d4Sb4s3S4s66Db:73B4S67Db3S3S66D3Sc"]}],"flat":true,"type":1},{"tags":[{"id":1,"matrix":0,"type":3,"depth":1},{"type":2}],"id":2,"frameCount":1,"type":7},{"id":2,"matrix":"::::00t00t","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::972C00t89u","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::944G00t78w","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::915K00t67y","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::887O00t756b","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::860S00t944b","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::832W00t133c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::7803B00t322c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::1775C00t511c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::5747C00t700c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::9789B02t417c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::832W03t133c","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::873Q05t850b","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::915K07t67y","type":3,"depth":1},{"type":2},{"replace":true,"matrix":":::958E08t83v","type":3,"depth":1},{"type":2},{"replace":true,"matrix":"::::10t00t","type":3,"depth":1},{"type":2}],"fileSize":807,"v":"5.3.0","backgroundColor":-1,"frameSize":{"ymin":0,"ymax":4000,"xmin":0,"xmax":4000},"frameCount":16,"frameRate":24,"version":15};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 200px; height: 200px">
</div>
<script>

var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);

stage.start();
</script>
</body>
</html>

大部分都是js、css，很少的html，ie9支援，有趣的是他們的某些教學，只能ie看，
而這邊的善良神教學分享我還沒研究。

16十月2013

svg animate / skrollr.js 讓svg以遮罩動態出場

發表在 Others 中 by Alice

緣由是看到這教學：http://pepsized.com/merry-scrolling-with-skrollr-js/

後來又搜尋到更簡化的教學：http://prinzhorn.github.io/skrollr/examples/path.html

於是如法炮製完成版：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Drawing a path</title>
</head>

<body style="text-align:center;">
<div id="skrollr-body">
<h1>SVG IS AWESOME (so is skrollr)</h1>
<p>Scroll down for details</p>
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="800px" height="1000px" viewBox="0 0 800 1000" style="enable-background:new 0 0 800 1000;" xml:space="preserve">

<path style="fill:none;stroke:#F39800;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;" d="
M399,39c0,0-173,29-101,140c76.381,117.754,340,102,277,182s-342,146-350,66c-9.258-92.576,322-108,311,33s-141,204-43,191
s183.163-51.777,203,10c35,109-111,246-305,176s-252-128-276-76s157,145,157,145"/>
</svg>
<script type="text/javascript" src="skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
</body>

</html>

另外畫好的svg圖：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="800px" height="1000px" viewBox="0 0 800 1000" style="enable-background:new 0 0 800 1000;" xml:space="preserve">

<path style="fill:none;stroke:#F39800;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;//從這邊開始增加那段內容//" d="
M399,39c0,0-173,29-101,140c76.381,117.754,340,102,277,182s-342,146-350,66c-9.258-92.576,322-108,311,33s-141,204-43,191
s183.163-51.777,203,10c35,109-111,246-305,176s-252-128-276-76s157,145,157,145"/>
</svg>

本則範例修改重點：當我同樣話了一條曲折的線svg圖，之後加上：

stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"

雖然現在不是非常清楚，但是朦朧的猜測必須給個「開始排列」至「結束排列」的設定值吧？！

後來才找到github上的原始skroller作者，更新之後多了很多東西耶：https://github.com/Prinzhorn/skrollr.git

16十月2013

手感風格網站搜羅

發表在 Others 中 by Alice

大連賽高科技
http://www.antoniandalison.co.uk/

英國服裝設計師-Antoni & Alison Wu的官方網站

http://www.antoniandalison.co.uk/

16十月2013

以圖代字的連結 text-indent

發表在 Others 中 by Alice

以圖代字的連結，需要如以下這麼寫：

html

<ul>
<li id="nav-login" title="登入"><a href="login.html">登入</a></li>
</ul>

css


nav{
margin-top: -90px;
margin-left: 280px;
background: url(../images/bg_nav.png) no-repeat;
text-indent: -9999px;
height: 137px;
width: 840px;
}
#nav-login a{
float: left;
cursor: pointer;
background: url(../images/link_nav_login.png);
width: 128px;
height: 82px;
margin-top: 23px;
margin-left: 70px;
}
#nav-login a:hover{
background: url(../images/link_nav_login_hover.png);
}

15十月2013