jQuery鼠標經過水平手風琴展開收縮動畫效果



168 671 224



特效描述:jQuery 鼠標經過 水平手風琴 展開收縮 動畫效果,jQuery藍色的手風琴動畫,鼠標經過展開收縮文字內容動畫效果。

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<script type="text/javascript">
$(function() {
    $("#cardArea").cardArea()
});
</script>
<ul id="cardArea" class="card-area clearfix">
	<li class="card-item active">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon1"></i>
					</div>
					<h1>網站與門戶</h1>
					<p class="short-info">連接內外  覆蓋多端</p>
				</div>
			</div>
			<div class="card-content content-first bg-e8e8e8">
				<ul class="content-first-list">
					<li>全網門戶</li>
					<li>企業域名</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">全網門戶</p>
					</a>
					<p class="main-tip">全網企業客戶觸達、獲取商機、達成業務</p>
					<p class="main-desc">使用企業門戶進行客戶信息管理、銷售線索管理,讓您隨時隨地更輕松地獲取新的潛在客戶,更快捷地完成業務。</p>
					<a href="#" target="_blank">
					<button class="main-btn">了解詳情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">企業域名</h3>
							<p class="other-desc">注域名,享安全服務</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon2"></i>
					</div>
					<h1>營銷與推廣</h1>
					<p class="short-info">全景覆蓋  經濟之選</p>
				</div>
			</div>
			<div class="card-content content-first bg-e1e1e1">
				<ul class="content-first-list">
					<li>營銷寶</li>
					<li>大把推</li>
					<li>易米通</li>
					<li>Google Adwords</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">營銷寶</p>
					</a>
					<p class="main-tip">多場景營銷智能工具集</p>
					<p class="main-desc">使用中企營銷寶進行營銷,不論是活動組織、營銷推廣,還是企業宣傳、產品售賣、熱點跟蹤,讓您隨時隨地便捷的開展營銷,提升品牌形象與影響力。</p>
					<a href="/market/" target="_blank">
					<button class="main-btn">了解詳情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">大把推</h3>
							<p class="other-desc">讓更多客戶找到你</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">易米通</h3>
							<p class="other-desc">國內創新的數字營銷平臺</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">Google Adwords</h3>
							<p class="other-desc">助力您的海外拓金之路</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon3"></i>
					</div>
					<h1>電商與業務</h1>
					<p class="short-info">在線業務  輕松實現</p>
				</div>
			</div>
			<div class="card-content content-first bg-e8e8e8">
				<ul class="content-first-list">
					<li>ZshopS</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">ZshopS</p>
					</a>
					<p class="main-tip">為中小企業搭建獨立電商平臺,提供行業電商解決方案。</p>
					<p class="main-desc">商城提供安全穩定、易用高效的在線零售管理系統,后臺簡單易用,購物體驗流暢,促銷方式靈活,數據統計分析嵌入業務各個環節,根據訪問記錄深入分析,隨時隨地呈現統計結果指導決策。幫助傳統企業順利開展線上零售業務,強化數字分析與營銷推廣,降低業務成本,樹立企業品牌,擴大企業收益渠道。</p>
					<a href="#" target="_blank">
					<button class="main-btn">了解詳情</button>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon4"></i>
					</div>
					<h1>協同與管理</h1>
					<p class="short-info">連接互通  簡便開放</p>
				</div>
			</div>
			<div class="card-content content-first bg-e1e1e1">
				<ul class="content-first-list">
					<li>Z云郵</li>
					<li>有翼云銷</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">Z云郵</p>
					</a>
					<p class="main-tip">專注企業辦公效率的提升,云“游”四海的企業郵箱</p>
					<p class="main-desc">幫企業提高工作效率的企業郵箱:支持微信收發信件、超大企業共享網盤,多維度的郵箱管理功能等。并且,在海外部署了多達34個收發節點,國內部署節點28個,讓企業的重要郵件,全球暢“游”。</p>
					<a href="#" target="_blank">
					<button class="main-btn mr20">了解詳情</button>
					</a>
					<a href="#" target="_blank">
					<button class="main-white-btn">立即試用</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">有翼云銷</h3>
							<p class="other-desc">有效提升銷售業績和轉化率</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 收縮展開 展開收縮 收縮 展開 其他 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 文字切換 文字選項卡 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子