jquery 實現(xiàn)手風(fēng)琴滑塊文字列表切換特效代碼布局, js css 分離,結(jié)構(gòu)簡單清晰, 下載即可使用。
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script>
3、body引入HTML代碼
<div class="homepage">
<div class="homepage-title">在線教育系統(tǒng) 528項網(wǎng)校功能 讓效率翻三倍</div>
<div class="homepage-body">
<div class="homepage-container clearfix">
<div class="homepage-row clearfix " id="cardArea">
<a href="#" class="homepage-item active">
<div class="homepage-course-item">
<div class="homepage-course-title">
<div class="cou-img"><img src="images/icon001.png" alt=""></div>
<div class="cou-til">教</div>
<div class="cou-lin"></div>
</div>
<div class="homepage-course-list">
<p>互動視頻</p>
<p>輕直播</p>
<p>智能題庫</p>
</div>
</div>
<div class="homepage-course-body">
<div class="course-body-head">
<div class="tag-img clearfix">
<i><img src="images/icon001.png" alt=""></i>
<span>教</span>
</div>
<div class="tag-lin"></div>
</div>
<div class="course-body-item">
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item001"></i>
<span>互動視頻</span>
</div>
<div class="course-body-item-list-text">視頻彈題,邊學(xué)邊鞏固,讓學(xué)習(xí)更有深度</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item002"></i>
<span>輕直播</span>
</div>
<div class="course-body-item-list-text">輕松應(yīng)對十萬人在線;多平臺觀看,隨時隨地學(xué);微信宣傳,一鍵分享</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item003"></i>
<span>智能題庫</span>
</div>
<div class="course-body-item-list-text">真題測評、智能組卷、學(xué)情分析,提高工作效率</div>
</div>
</div>
</div>
</a>
<a href="#" class="homepage-item">
<div class="homepage-course-item">
<div class="homepage-course-title">
<div class="cou-img"><img src="images/icon002.png" alt=""></div>
<div class="cou-til">學(xué)</div>
<div class="cou-lin"></div>
</div>
<div class="homepage-course-list">
<p>筆記</p>
<p>問答</p>
<p>學(xué)習(xí)計劃</p>
</div>
</div>
<div class="homepage-course-body">
<div class="course-body-head">
<div class="tag-img clearfix">
<i><img src="images/icon002.png" alt=""></i>
<span>學(xué)</span>
</div>
<div class="tag-lin"></div>
</div>
<div class="course-body-item">
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item004"></i>
<span>筆記</span>
</div>
<div class="course-body-item-list-text">知識共享、內(nèi)容沉淀、知識提煉</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item005"></i>
<span>問答</span>
</div>
<div class="course-body-item-list-text">答疑解惑、實時互動</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item006"></i>
<span>學(xué)習(xí)計劃</span>
</div>
<div class="course-body-item-list-text">系統(tǒng)學(xué)習(xí),建構(gòu)知識體系,學(xué)習(xí)就像打怪升級</div>
</div>
</div>
</div>
</a>
<a href="#" class="homepage-item">
<div class="homepage-course-item">
<div class="homepage-course-title">
<div class="cou-img"><img src="images/icon003.png" alt=""></div>
<div class="cou-til">管</div>
<div class="cou-lin"></div>
</div>
<div class="homepage-course-list">
<p>課程管理</p>
<p>學(xué)員管理</p>
<p>營收管理</p>
</div>
</div>
<div class="homepage-course-body">
<div class="course-body-head">
<div class="tag-img clearfix">
<i><img src="images/icon003.png" alt=""></i>
<span>管</span>
</div>
<div class="tag-lin"></div>
</div>
<div class="course-body-item">
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item007"></i>
<span>課程管理</span>
</div>
<div class="course-body-item-list-text">標(biāo)簽化管理,知識結(jié)構(gòu)更科學(xué),讓學(xué)員輕松找到心儀課程</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item008"></i>
<span>學(xué)員管理</span>
</div>
<div class="course-body-item-list-text">輕松應(yīng)對十萬人在線;多平臺觀看,隨時隨地學(xué);微信宣傳,一鍵分享</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item009"></i>
<span>營收管理</span>
</div>
<div class="course-body-item-list-text">真題測評、智能組卷、學(xué)情分析,提高工作效率</div>
</div>
</div>
</div>
</a>
<a href="#" class="homepage-item">
<div class="homepage-course-item">
<div class="homepage-course-title">
<div class="cou-img"><img src="images/icon004.png" alt=""></div>
<div class="cou-til">聊</div>
<div class="cou-lin"></div>
</div>
<div class="homepage-course-list">
<p>小組活動</p>
<p>語音交流</p>
<p>私信溝通</p>
</div>
</div>
<div class="homepage-course-body">
<div class="course-body-head">
<div class="tag-img clearfix">
<i><img src="images/icon004.png" alt=""></i>
<span>聊</span>
</div>
<div class="tag-lin"></div>
</div>
<div class="course-body-item">
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item010"></i>
<span>小組活動</span>
</div>
<div class="course-body-item-list-text">視頻彈題,邊學(xué)邊鞏固,讓學(xué)習(xí)更有深度</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item011"></i>
<span>語音交流</span>
</div>
<div class="course-body-item-list-text">輕松應(yīng)對十萬人在線;多平臺觀看,隨時隨地學(xué);微信宣傳,一鍵分享</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item012"></i>
<span>私信溝通</span>
</div>
<div class="course-body-item-list-text">真題測評、智能組卷、學(xué)情分析,提高工作效率</div>
</div>
</div>
</div>
</a>
<a href="#" class="homepage-item">
<div class="homepage-course-item">
<div class="homepage-course-title">
<div class="cou-img"><img src="images/icon005.png" alt=""></div>
<div class="cou-til">銷</div>
<div class="cou-lin"></div>
</div>
<div class="homepage-course-list">
<p>學(xué)習(xí)卡</p>
<p>組合營銷</p>
<p>會員成長</p>
</div>
</div>
<div class="homepage-course-body">
<div class="course-body-head">
<div class="tag-img clearfix">
<i><img src="images/icon005.png" alt=""></i>
<span>銷</span>
</div>
<div class="tag-lin"></div>
</div>
<div class="course-body-item">
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item013"></i>
<span>學(xué)習(xí)卡</span>
</div>
<div class="course-body-item-list-text">視頻彈題,邊學(xué)邊鞏固,讓學(xué)習(xí)更有深度</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item014"></i>
<span>組合營銷</span>
</div>
<div class="course-body-item-list-text">輕松應(yīng)對十萬人在線;多平臺觀看,隨時隨地學(xué);微信宣傳,一鍵分享</div>
</div>
<div class="course-body-item-list">
<div class="course-body-item-list-title clearfix">
<i class="icon icon-item015"></i>
<span>會員成長</span>
</div>
<div class="course-body-item-list-text">真題測評、智能組卷、學(xué)情分析,提高工作效率</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
"use strict"; !
function(t, i) {
var e = {
id: "#cardArea",
sid: ".homepage-item"
};
i.fn.cardArea = function(t) {
var t = i.extend({},
e, t);
return this.each(function() {
var e = i(t.id),
n = e.find(t.sid);
n.on("mouseenter",
function() {
i(this).addClass("active").siblings().removeClass("active")
})
})
};
} (window, jQuery);
$(function() {
$("#cardArea").cardArea()
});
</script>