jQuery實現標題有打字效果的焦點圖代碼
本文實例講述了jQuery實現標題有打字效果的焦點圖代碼。分享給大家供大家參考,具體如下:
給大家分享一款基于jQuery標題有打字效果的焦點圖,具有標題打字形式逐漸顯示的功能。這款焦點圖適用瀏覽器有:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
運行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/
完整實例代碼代碼點擊此處本站下載。
html代碼如下:
<!-- 代碼 開始 -->
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="#" target="_blank">
<img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a> <a href="#"
target="_blank">
<img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a> <a href="#"
target="_blank">
<img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
<a href="#" target="_blank">
<img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a> <a href="#"
target="_blank">
<img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a> <a href="#"
target="_blank">
<img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
<a href="#" target="_blank">
<img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text">
<strong></strong><span></span>
</p>
<p id="slide-desc" class="text">
</p>
<p id="slide-nav">
</p>
</div>
</div>
</div>
js代碼如下:
if (!window.slider) {
var slider = {};
}
slider.data = [
{
"id": "slide-img-1", // 與slide-runner中的img標簽id對應
"client": "標題1",
"desc": "這里修改描述 這里修改描述 這里修改描述" //這里修改描述
},
{
"id": "slide-img-2",
"client": "標題2",
"desc": "add your description here"
},
{
"id": "slide-img-3",
"client": "標題3",
"desc": "add your description here"
},
{
"id": "slide-img-4",
"client": "標題4",
"desc": "add your description here"
},
{
"id": "slide-img-5",
"client": "標題5",
"desc": "add your description here"
},
{
"id": "slide-img-6",
"client": "標題6",
"desc": "add your description here"
},
{
"id": "slide-img-7",
"client": "標題7",
"desc": "add your description here"
}
];
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
ASP.NET jQuery 實例18 通過使用jQuery validation插件校驗DropDownList
這節(jié)我們還可以通過直接設置DropDownList屬性來設置jQuery validation插件的校驗規(guī)則和提示信息2012-02-02
Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對于習慣使用GridView的人來說,前臺頁面需要動態(tài)添加表格的行數,是一件痛苦的事。GridView處理這種事情相當麻煩,你點擊“新增一行”,需要回傳到服務器。2010-09-09
EasyUI的treegrid組件動態(tài)加載數據問題的解決辦法
最近涉及到treegrid組件的查詢,需要根據查詢條件動態(tài)更新EasyUI的treegrid組件的動態(tài)加載查詢結果2011-12-12
輕松學習jQuery插件EasyUI EasyUI實現拖動基本操作
這篇文章主要幫大家輕松學習jQuery插件EasyUI,并利用EasyUI實現拖動基本操作,文章并提供了一個學校課程表簡單實例,感興趣的小伙伴們可以參考一下2015-11-11
使用jQuery的ajax功能實現的RSS Reader 代碼
Rss閱讀器挺不錯的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關注的信息那將會減少大家很多的打開瀏覽器和輸入網址的時間。2009-09-09
使用基于jquery的gamequery插件做JS乒乓球游戲
現在jquery比較流行,用js做游戲的也越來越多了,雖然現在html5出來了,但實際上要用html5做點啥出來還是得靠javascript,所以學好js是非常重要的2011-07-07

