採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
August 23, 2018
最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。
範例參考：點這裡
範例參考：點這裡
July 25, 2018
跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
March 12, 2015
CSS部分
javascript 部分
html 部分
<style type="text/css">
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
javascript 部分
<script type='text/javascript'>
function show(obj, id)
{
var o=document.getElementById(id);
if( o.style.display == 'none' )
{
o.style.display='';
obj.innerHTML='隱藏';
}
else
{
o.style.display='none';
obj.innerHTML='顯示';
}
}
</script>
function show(obj, id)
{
var o=document.getElementById(id);
if( o.style.display == 'none' )
{
o.style.display='';
obj.innerHTML='隱藏';
}
else
{
o.style.display='none';
obj.innerHTML='顯示';
}
}
</script>
html 部分
<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>
March 8, 2015
css部分
javascript部分
html部分
註：show可以任意改為其他文字
<style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
javascript部分
<script type="text/javascript">
<!--
function show(obj,item){
document.getElementById(item).style.display = obj.checked?"block":"none";
}
//-->
</script>
<!--
function show(obj,item){
document.getElementById(item).style.display = obj.checked?"block":"none";
}
//-->
</script>
html部分
<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>
<div id="show" style="display:none">這是顯示的內容</div>
註：show可以任意改為其他文字
October 9, 2011
Mouseinfobox plugin for jQuery下載相關檔案
<link rel="stylesheet" href="jquery.mouseinfobox.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mouseinfobox.js"></script>
<script>
$(function(){
$('.class名').infoBox({
animation: ['opacity', 'bottom'], //動畫 透過與位置
animDuration 200, //動畫速度
offsetX: 20, //x位置
offsetY: -20, //y位置
bottomPos: true, //從bottom顯示
rightPos: false //從right顯示
});
});
</script>
以及在class名上顯示的內容於title上記述。
<div class="class名" title="ツールチップテキスト">テキスト</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mouseinfobox.js"></script>
<script>
$(function(){
$('.class名').infoBox({
animation: ['opacity', 'bottom'], //動畫 透過與位置
animDuration 200, //動畫速度
offsetX: 20, //x位置
offsetY: -20, //y位置
bottomPos: true, //從bottom顯示
rightPos: false //從right顯示
});
});
</script>
以及在class名上顯示的內容於title上記述。
<div class="class名" title="ツールチップテキスト">テキスト</div>
August 5, 2010
以下放至於<body >與</body>之間
<SCRIPT language="JavaScript"><!--
myMsg = "你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ←可自由置換，留空白有助於斷字，較容易理解。
size="30"←可用CSS控制寬度等等，較容易適用於各瀏覽器內。
參考連結︰
http://www.livemusic98.com
<SCRIPT language="JavaScript"><!--
myMsg = "你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ←可自由置換，留空白有助於斷字，較容易理解。
size="30"←可用CSS控制寬度等等，較容易適用於各瀏覽器內。
參考連結︰
http://www.livemusic98.com
