最近文章
星期二 九月 13, 2011
馬老師部落格搬新家
星期日 十一月 15, 2009
PNG去背與IE相容性問題
星期六 十一月 14, 2009
免費的3D迴轉Flash相簿(flShow)
星期五 十一月 13, 2009
網站圖示的製作方式

最近迴響

Re: 網站圖示的製作方式 by 小樂 (八月 23, 2010)

jQuery-wSlide

馬老師先跟大家說明一下,因為在課堂中教到LightBox的技巧

所以就順便提了jQuery這樣的名詞,沒想到引起一些同學的迴響

所以特別開是製作一些有關jQuery的教學文章,至於什麼是jQuery呢?

我想這個說來話長,不如看看維基百科這邊吧~

如果還是不懂的話再請提問囉~以下就來看看我今天要介紹的一個jQuery元件wSlide

首先大家可以到官方網站或是我做好的範例頁面,看一下製作好的效果,至於怎麼製作呢?

首先請下載兩個js檔:jquery-latest.pack.jsjquery.wslide.js

再將這兩個檔案和你的網頁存放在同一資料夾中

接下來在你的網頁中<head>...</head>區塊插入以下的語法:

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
        $("#ma_liste").wslide({
                width: 400,
                height: 333,
                horiz: true
        });
});
</script>

如下圖所示:

接下來在內容區塊<body>...</body>插入以下的語法:

<ul id="ma_liste">
        <li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
        <li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
        <li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
        <li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
        <li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
        <li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
        <li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
        <li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>

如下圖所示:

最後就可以預覽你的網頁效果了,畫面中的各項元素可以透過CSS來制訂樣式

如果想要有更多的特效變化,可以參考官方網站的說明唷~

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

評分: 1分 2分 3分 4分 5分 得分: 0.0/ 投票數: 0


迴響:

發表迴響:
  • HTML 語法: 開啟