點選上面這張圖片就可以看到效果~
這是一個文字特效的 plugin，
之前在玩 flash 算是自己滿熟練的一個效果，
但現在不用 flash 了就只好用 jquery 來做，
也當作字串符、字串以及定位的練習，
同樣的，因為我自己是前端設計師，
這套 plugin 對於前端射計師來說是很方便的效果，
不用一分鐘就可以做出泡泡效果~
設定的方式很簡單，
把需要套用的文字外加上 span 標籤，
span 標籤外加上 div 標籤，並對此 div 做 id 命名，
把 plugin 套用在 div 上即可，
( 缺點只有一個，跟 flash 一樣，文字量太大的時候會 lag )
此外有兩個要注意的重點：
第一、就是空白字元請使用 來表現，不然就會略過了~
第二、div會被轉換成絕對位置，請使用 css 定位
oxxo_bubbleWords_v1.js 下載 (右鍵另存新檔)
plugin設定值
html參考原始碼
把需要套用的文字外加上 span 標籤，
span 標籤外加上 div 標籤，並對此 div 做 id 命名，
把 plugin 套用在 div 上即可，
( 缺點只有一個，跟 flash 一樣，文字量太大的時候會 lag )
此外有兩個要注意的重點：
第一、就是空白字元請使用 來表現，不然就會略過了~
第二、div會被轉換成絕對位置，請使用 css 定位
oxxo_bubbleWords_v1.js 下載 (右鍵另存新檔)
plugin設定值
fontSize : "12px", // 字體大小 fontWeight : "normal", // 字體粗細 fontColor : "#fff", // 字體顏色 fontFamily : "Arial", // 字體 opacity : 0.8, // 透明度 letterSpacing : 1, // 文字間距 top : 200, // 垂直位置 left : 38, // 水平位置 moveYPosition : 150, // 向上移動的距離，改成負的就是往下 moveYTime : 300, // 向上移動到消失的時間(實際上最短為*6) moveXPosition : 10, // 水平晃動距離 moveXTime : 600, // 水平晃動週期時間 time : 300, // 飄動間隔時間 showTime : 1000, // 距離下次再開始飄動時間 showFadeInTime : 1000, // 淡入時間 zIndex : 1000 // 等同於css的z-index
html參考原始碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery oxxo-bubbleWords v1 plugin</title>
<script src="jquery-1.7.1.min.js"></script>
<script src="plugin/oxxo_plugin/oxxo_bubbleWords_v1.js"></script>
<script>
$(function(){
$("#test").bubbleWords({
fontSize : "12px", // 字體大小
fontWeight : "normal", // 字體粗細
fontColor : "#fff", // 字體顏色
fontFamily : "Arial", // 字體
opacity : 0.8, // 透明度
letterSpacing : 1, // 文字間距
top : 200, // 垂直位置
left : 38, // 水平位置
moveYPosition : 150, // 向上移動的距離，改成負的就是往下
moveYTime : 300, // 向上移動到消失的時間(實際上最短為*6)
moveXPosition : 10, // 水平晃動距離
moveXTime : 600, // 水平晃動週期時間
time : 300, // 飄動間隔時間
showTime : 1000, // 距離下次再開始飄動時間
showFadeInTime : 1000, // 淡入時間
zIndex : 1000 // 等同於css的z-index
});
});
</script>
</head>
<body>
<div id="test"><span>http://oxxo-studio.blogspot.com Bubble-Words Plugin</span></div>
<div style="width:400px; height:300px;"><img src="img/20120711.jpg" /></div>
</body>
</html>
沒有留言:
張貼留言