基于MyFocus制作網頁焦點圖的實現方法

基于MyFocus制作網頁焦點圖的實現方法

趙鋒

(淮北職業技術學院 計算機系， 安徽 淮北235000)

摘要：網頁焦點圖是網頁的重要組成部分，開發者利用焦點圖可以美化頁面、加入廣告,展示內容等。使用MyFocus來實現焦點圖，方法簡便、功能強大、效果絢麗，是一種非常好的焦點圖制作方式。

關鍵詞：MyFocus；網頁焦點圖；網站開發；jquery

收稿日期：2015-05-21

作者簡介：趙鋒( 1978-)，男，安徽淮北人，淮北職業技術學院計算機系工程師，研究方向為計算機網站開發。

中圖分類號：TP393

文獻標識碼：A

文章編號：1671-8275(2015)04-0140-02

1網頁焦點圖

網頁焦點圖是一種網站圖片內容的展示形式，即多張圖片展示在網頁上。它通常放在網站首頁明顯位置，用圖片組合形式進行播放，并加上動態特效，以此來吸引瀏覽者的注意，引起訪問者的點擊。據統計，網頁焦點圖的點擊率明顯高于純文字，轉化率高于使用文字標題的5倍。

2MyFocus特性

myFocus是一個專注于焦點圖制作的JS庫，它小巧獨立，用它可以輕松地制作出網上大部分常見的焦點圖，而且制作出的焦點圖僅有1KB左右，功能十分完備強大，效果絢麗，因為是輕量級，其運行效率也比常見的焦點圖要高。很有利于網上的使用。最重要的一點是，用myFocus制作出的焦點圖使用十分簡單方便，每個焦點圖的接口都是通用的，所以只需要用1~2秒時間就可以修改成不同風格的焦點圖效果。

2.1小巧卻高效強大

myFocus v2.0.min版只有9.89KB，卻能使網頁上可以運行超過30款風格各異的焦點圖，不可謂不強大。

2.2極其簡單的使用

無論有多少風格，都只需加載一個js文件，然后用一句簡單的js代碼調用，就可以看到效果了，對于新手來說是一大福音。

2.3靈活的設置

myFocus提供了足夠多的API讓你進行更多個性化的設置，華麗麗的“一秒鐘變身”不在話下。

2.4獨立、免費、開源

完全獨立，不依賴任何JS庫；完全免費，這意味著你可以在任何地方使用；也完全開源，這意味著你可以為myFocus貢獻自己的風格代碼，提供更多特效。

3常見焦點圖制作方法

3.1js焦點圖

最早的焦點圖技術，使用原生態的js代碼實現的焦點圖，樣式相對單一，設置較為繁瑣，目前很少使用。

3.2flash焦點圖

使用flash設計或用flash as編程設計的焦點圖。該焦點圖優點是字體展現效果佳，比純網頁形式更具有美感。但是設計起來難度很大，不利于再加工，也不利于SEO與搜索引擎的抓取

3.3css焦點圖

需要加入很多css代碼，還需要js代碼的配合，同樣是難度大，不利于新手使用。

3.4Jquery焦點圖

現在比較流行的實現方式，已經逐步取代js原生態的焦點圖，因為jquery焦點圖的代碼書寫簡單，借助jquery的類庫很容易實現常見的js焦點圖效果。而且代碼少，不過需要有一定的網頁設計基礎，對于新手來說，存在一定的難度。

3.5myFocus焦點圖

該方法具有小巧，功能強大，簡單易用，樣式豐富，獨立、免費、開源等優點，足以使它傲視群雄。

4使用過程

myFocus有兩種調用方式，一種是常規調用：

myFocus.set(settings[,callback]); //這段代碼可以在引入myFocus庫后的任意地方調用。

另外一種是作為jQuery插件的方式調用(前提是必須已加載jQuery庫)：

$(expr).myFocus(settings[,callback]); //這段代碼必須在焦點圖的HTML結構之后調用，或是在ready函數中調用。具體的使用過程有以下步驟：

步驟1：在html的標簽內引入相關文件。

步驟2創建myFocus標準的html結構，并填充你的內容

步驟3 在step1代碼之后的任意一個位置調用(建議在head標簽結束前調用)

//或詳細一點的參數調用：

5總結

使用MyFocus插件來設計網站焦點圖，方法更簡單、功能更強大、效果更絢麗，是一種非常好的焦點圖制作方式，值得大家一起學習探討。

參考文獻：

[1]王偉平.精通js腳本之jQuery框架[M].北京：化學工業出版社,2011.

[2]單東林.鋒利的jQuery[M].北京：人民郵電出版社，2009.

[3]Richard York jQuery與CSS開發入門寶典 清華大學出版社，2010.

[4]張立鋒.JavaScript動態網頁技術詳解[M].北京：電子工業出版社，2009.

責任編輯：呂明