2011-08-27

背景隨視窗縮放


背景隨視窗縮放這可用CSS3中的background-size:100% 100%;來實現,但IE不支援CSS3
可是偏偏又看見國外一堆網站有這種效果,在IE也行
於是便隨便找一個網站來看看它的原始碼
便發現原來它是用jQuery再用插件改的
jQuery Backstretch
看了一下這插件大致上是用視窗大小去改背景的高寬,寫出這插件的作者真厲害

2011-08-26

XHTML的必要性

之前認為既然有HTML可用的話,XHTML有必要用嗎?
但在最近做網頁時發現原來標準化是必要的,雖然變嚴格,但還是有好處的
我發現CSS中的hoverIE中只支持a標籤,但用XHTML後便可支援其它標籤
當然我也認為這跟IE本身不夠支持標準化有關
不過在CSS中所有數字都要加單位,不可只打數字
Ex:width:100px;
在XHTML中html標籤必須改成
<html xmlns="http://www.w3.org/1999/xhtml">
而要在文件開頭做XML宣告
<?xml version="1.0" encod="UTF-8"?>
再加入DOCTYPE宣告
詳細可見http://www.w3schools.com/tags/tag_doctype.asp

2011-08-25

jQuery 取代原本的捲軸

由於網頁標準化
使得CSS中的捲軸設定無用(但IE還可用)
而要自由的變化捲軸變得不容易,但國外還是是有許多的高手利用JavaScript的基礎,再利用jQuery寫出許多富變化性的捲軸
由於這類的中文資訊太少,所以便整理一下
jscrollpane
這是我目前找到較簡單易於使用的
就如他所說的一樣把download裡所需的js和css下齊
然後再中填入
<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
 
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
 
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
 
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

代表要載入的js和css,要注意路徑,它預設
js是放在script中
css是放在style中
jquery.jscrollpane.css便是可以改捲軸的樣式

然後再<script type="text/javascript"></script>中放入

$(function()
{
 $('.scroll-pane').jScrollPane();
});
這代表要用的捲軸類型,不同的捲軸要放入不同的function
具體可以看Demo
要注意的是有捲軸的區塊要設class="scroll-pane"
並用css做設定


下面還有一些其他的捲軸可以試試
鐵人二號的設計手札
我是派10-jquery客製捲軸下載