jquery鼠標滑過圖標橫向選項卡切換特效



56 220 74



特效描述:jquery 鼠標滑過圖標 橫向選項卡 切換特效,jquery鼠標滑過圖標橫向選項卡切換特效

代碼結構

1. 引入CSS

<link  type="text/css" href="css/style.css" rel="stylesheet"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

3. HTML代碼

<div class="soft_function">
	<div class="soft_con_icon">
		<ul>
			<li><a id="pic_fun_adm" href="#"><img src="images/pic_fun_adm_hover.gif" width="150" height="150"/><p style="color:#008dd9">A類選項</p></a></li>
			<li><a id="pic_fun_crm" href="#"><img  src="images/pic_fun_crm.gif" width="150" height="150"/><p>B類選項</p></a></li>
			<li><a id="pic_fun_project" href="#"><img  src="images/pic_fun_project.gif" width="150" height="150"/><p>C類選項</p></a></li>
			<li><a id="pic_fun_k" href="#"><img  src="images/pic_fun_k.gif" width="150" height="150"/><p>D類選項</p></a></li>
			<li><a id="pic_fun_mobile" href="#"><img  src="images/pic_fun_mobile.gif" width="150" height="150"/><p>E類選項</p></a></li>
		</ul>
	</div> 
	<div class="soft_con1" style="background:url(images/line_select_001.gif);"></div>
	<div class="soft_con">
		<div id="xzgl" class="soft_con2">
			<div class="function1">
				<img src="images/pic_fun_adm_detailed_001.gif"/>
				<p class="p1">自定義門戶</p>
				<p class="p2">個性化設置桌面門戶,可根據需要創建功能模塊組別;全面掌握...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_adm_detailed_002.gif"/>
				<p class="p1">智能流程</p>
				<p class="p2">根據企業模式與業務需求,輕松、智能的對流程節點、處理方式...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_adm_detailed_003.gif"/>
				<p class="p1">即時通訊</p>
				<p class="p2">集成即時通訊工具,閑暇時置于桌面右下角;出現待辦事宜時...</p>
			</div>
			<div class="function2">
				<img src="images/pic_fun_adm_detailed_004.gif"/>
				<p class="p1">人力資源</p>
				<p class="p2">建立企業的人才資源庫,以備不時之需;實現對人才信息的多維...</p>
			</div>
		</div>
		<div id="crm" class="soft_con2" style="display:none">
			<div class="function1">
				<img src="images/pic_fun_crm_detailed_001.gif"/>
				<p class="p1">客戶管理</p>
				<p class="p2">創建企業的客戶資源庫,維護客戶的綜合信息;及時、定期跟進...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_crm_detailed_002.gif"/>
				<p class="p1">銷售管理</p>
				<p class="p2">提供多樣化的銷售管理機制,實現銷售過程的流程控制與維護...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_crm_detailed_003.gif"/>
				<p class="p1">合同管理</p>
				<p class="p2">統一管理合同信息,形成企業的知識庫;提供應用插件,實現合...</p>
			</div>
			<div class="function2">
				<img src="images/pic_fun_crm_detailed_004.gif"/>
				<p class="p1">供應商管理</p>
				<p class="p2">建立企業的供應商資源,完善企業供應鏈;在實際的業務操作...</p>
			</div>
		</div>
		<div id="xmgl" class="soft_con2" style="display:none">
			<div class="function1">
				<img src="images/pic_fun_project_detailed_001.gif"/>
				<p class="p1">計劃任務</p>
				<p class="p2">在線、實時創建維護項目計劃,并可向他人發起項目任務,指...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_project_detailed_002.gif"/>
				<p class="p1">甘特圖</p>
				<p class="p2">在線編輯項目甘特圖,可與專業工具媲美,而且操作更為簡單...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_project_detailed_003.gif"/>
				<p class="p1">項目匯報</p>
				<p class="p2">定期匯報項目的最新進展,將匯報與具體的項目進行綁定;領導...</p>
			</div>
			<div class="function2">
				<img src="images/pic_fun_project_detailed_004.gif"/>
				<p class="p1">工作負荷</p>
				<p class="p2">自動提取項目計劃、任務中的員工工作量,以不同的顏色標識員...</p>
			</div>
		</div>
		<div id="zsgl" class="soft_con2" style="display:none">
			<div class="function1">
				<img src="images/pic_fun_k_detailed_001.gif"/>
				<p class="p1">文件柜</p>
				<p class="p2">創建個人文件柜,將個人的重要文件存儲至平臺,隨時隨地查看...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_k_detailed_002.gif"/>
				<p class="p1">個人網盤</p>
				<p class="p2">平臺提供的個人網盤,由員工個人進行管理,可根據需要創建不...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_k_detailed_003.gif"/>
				<p class="p1">文件共享</p>
				<p class="p2">員工可將個人網盤中的文件與他人共享,實現資源文件在企業內...</p>
			</div>
			<div class="function2">
				<img src="images/pic_fun_k_detailed_004.gif"/>
				<p class="p1">權限控制</p>
				<p class="p2">以用戶、用戶組、部門為單位進行嚴密的權限設置,為秘密文件...</p>
			</div>
		</div>
		<div id="ydbg" class="soft_con2" style="display:none">
			<div class="function1">
				<img src="images/pic_fun_mobile_detailed_001.gif"/>
				<p class="p1">通訊錄</p>
				<p class="p2">企業通訊錄,無需手動錄入,自動加載平臺員工的聯系方式;可...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_mobile_detailed_002.gif" />
				<p class="p1">移動審批</p>
				<p class="p2">即使不在電腦前,也無需等待。通過手機端的移動審批可快速的...</p>
			</div>
			<div class="function1">
				<img src="images/pic_fun_mobile_detailed_003.gif"/>
				<p class="p1">日程安排</p>
				<p class="p2">制定個人的日程安排,支持對周期性日程的批量添加,并可設置...</p>
			</div>
			<div class="function2">
				<img src="images/pic_fun_mobile_detailed_004.gif"/>
				<p class="p1">定位簽到</p>
				<p class="p2">外出無法簽到,也不再是難事;通過手機端即可實現快速的簽...</p>
			</div>
		</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 選項卡自動切換 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表