January 15, 2013
CSS3中似乎只有一個寫法是不對應所有瀏覽器的...
已下為參考寫法...
.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}
HTML BODY中寫入
<div class="test"> 如果你要呈現過長的文章，請用滑鼠確認一下喔 </div>
sample:
http://blog.apao.idv.tw/sample/CSS3/text-overflow.html
參考：
http://blog.flugel.biz/2009/07/css3-text-overflow.html
http://www.w3schools.com/cssref/pr_text_white-space.asp
August 25, 2012
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") file://写成一行
}
//-->
</script>
window.open 談出新視窗的命令文；
'page.html' 弹出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），可空白' '；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離瀏覽器上方的距離值；
left=0 窗口距離瀏覽器左側的距離值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示清單與滾動軸。
resizable=no 是否可改變視窗大小，yes为允許；
location=no 是否显示地址栏，yes为允许；
status=no 是否顯示狀態欄內的訊息（指是視窗開啟時），yes為允許；
html+javascript的寫法：
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //要寫成一行
}
//-->
</script>
</head>
<body onload="openwin()">
任意的頁面內容...
</body>
</html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //要寫成一行
}
//-->
</script>
</head>
<body onload="openwin()">
任意的頁面內容...
</body>
</html>
開啟新增視窗方法有四種：
方法一：
<body onload="openwin()"> 瀏覽器開啟時(讀取時)彈出視窗；
方法二：
<body onunload="openwin()"> 瀏覽器離開頁面時(不讀取)彈出視窗；
方法三：用一个连接调用：
<a href="#" onClick="window.open('URL', 'Joseph', config='height=350,width=440')"/>開啟一個新視窗</a>
注意：必須使用“#”
方法四：用於發布按鈕時：
<input type="button" onclick="openwin()" value="開啟視窗">
<body onload="openwin()"> 瀏覽器開啟時(讀取時)彈出視窗；
方法二：
<body onunload="openwin()"> 瀏覽器離開頁面時(不讀取)彈出視窗；
方法三：用一个连接调用：
<a href="#" onClick="window.open('URL', 'Joseph', config='height=350,width=440')"/>開啟一個新視窗</a>
注意：必須使用“#”
方法四：用於發布按鈕時：
<input type="button" onclick="openwin()" value="開啟視窗">
August 19, 2012
於head間置放：
<script type="text/javascript" src="{js}/jquery.js"></script>
<script type="text/javascript" src="{js}/ui.core.js"></script>
<script type="text/javascript" src="{js}/jquery.scroll-follow.js"></script>
<script type="text/javascript">
$( document ).ready( function (){
$('#sideBar').scrollFollow({});
});
//option
$( document ).ready( function () {
$( '#sideBar' ).scrollFollow( {
speed: 2000,
offset: 0,
killSwitch: 'exampleLink',
onText: 'Disable Follow',
offText: 'Enable Follow'
} );
} );
</script>
<script type="text/javascript" src="{js}/ui.core.js"></script>
<script type="text/javascript" src="{js}/jquery.scroll-follow.js"></script>
<script type="text/javascript">
$( document ).ready( function (){
$('#sideBar').scrollFollow({});
});
//option
$( document ).ready( function () {
$( '#sideBar' ).scrollFollow( {
speed: 2000,
offset: 0,
killSwitch: 'exampleLink',
onText: 'Disable Follow',
offText: 'Enable Follow'
} );
} );
</script>
※speed: 2000,(速度)
※offset: 0,(top位置)
Requirements (必備零件)
jQuery (tested with 1.2.6)
jQuery UI Core (tested with 1.5.2)
Optional (追加零件)
jQuery Easing Plugin
jQuery Cookie Plugin
DEMO:
http://blog.apao.idv.tw/sample/ScrollFollow/index.html
出處：
http://kitchen.net-perspective.com/open-source/scroll-follow/
August 16, 2012
使用CSS需要寫一大串將footer的部份固定在最下方，但jQuery提供了很方便的方式
使用方式如下：
1.下載並放置於伺服器的適當path
下載相關檔案2.html head 中要加：
<script type="text/javascript" src="js/footerFixed.js"></script>
3.在html div的 footer部份中再寫入：
<div id=footer></div>
demo:
http://blog.apao.idv.tw/sample/footerFixed/
February 1, 2012
#id名 {
width:296px;
height:130px; //半分の高さ
position:relative;
overflow:hidden;
}
width:296px;
height:130px; //半分の高さ
position:relative;
overflow:hidden;
}
JavaScript為以下的寫法
February 1, 2012
<style>
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a')
.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
//マウスオーバー時に縦位置94pxに0.5秒かけて移動
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
$(this).css({backgroundPosition: "-20px 35px"})
//移動完了後、元の位置に戻す
}})
})
});
</script>
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a')
.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
//マウスオーバー時に縦位置94pxに0.5秒かけて移動
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
$(this).css({backgroundPosition: "-20px 35px"})
//移動完了後、元の位置に戻す
}})
})
});
</script>
html中放置
<ul id="demo">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
備註：詳細可參考demo中CSS ID+Script的作法，可分好幾種動畫。
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
出處：
http://snook.ca/technical/jquery-bg/
參考:
http://www.skuare.net/test/jBgpos.html
demo:
http://apao.zapto.org/~apao/jQuery/Background_Position/
