基于jQuery實現九宮格布局鼠標懸停滑出文字



30 119 40



特效描述:基于jQuery實現 九宮格布局 鼠標懸停 滑出文字,基于jQuery實現九宮格布局鼠標懸停滑出文字

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/base.js"></script>

3. HTML代碼

<div class="s-mod w1100" style="height:710px">
	<div class="s-mod-loding"><img src="images/loading_d.gif"></div>
	<ul>
		<li class="s-mod-item" w="266" h="127" l="0" t="0" bg="#e8443a" cbg="#d92e24">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>1.商品展示管理模塊</span></div>
				<div class="s-mod-cur"><span>自主添加產品類別,不限級數。后臺對產品實現增、查、刪、改等功能。前端對產品進行列表展示、詳細頁面展示。詳細頁面包含產品小圖、大圖、詳細參數、文字內容介紹、多圖滾動展示、圖片放大展示、關聯資訊介紹展示。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="278" t="0" bg="#aa5096" cbg="#922a7b">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>2.會員注冊、登陸管理模塊</span></div>
				<div class="s-mod-cur"><span>管理會員注冊信息、會員列表,建立會員等級權限組,分配會員至權限組,然后根據權限使用網站的其它各個功能模塊。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="266" l="556" t="0" bg="#1CA1E2" cbg="#1182BA">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>3.會員基本資料管理模塊</span></div>
				<div class="s-mod-cur"><span>對會員注冊的基本資料進行查看、修改。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="695" t="0" bg="#FFD302" cbg="#EAC203">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>4.商品多條件組合搜索管理模塊</span></div>
				<div class="s-mod-cur"><span>在產品列表頁面實現對產品按照價格、尺寸、日期、型號、產地等多條件字段組合搜索功能。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="834" t="0" bg="#0C6DB2" cbg="#09578E">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>5.會員權限設置管理模塊</span></div>
				<div class="s-mod-cur"><span>管理會員注冊信息、會員列表,建立會員等級權限組,分配會員至權限組,然后根據權限使用網站的其它各個功能模塊。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="0" t="139" bg="#9B4C13" cbg="#8F4108">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>6.商品訂單下載管理模塊</span></div>
				<div class="s-mod-cur"><span>將企業產品手冊、說明書、宣傳畫冊等資料上傳至網站,用戶通過網站下載,可分用戶權限實現下載控制,需與會員管理系統配合。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="139" t="139" bg="#8DC027" cbg="#76A31B">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>7.商品數據導入/導出管理模塊</span></div>
				<div class="s-mod-cur"><span>在網站管理平臺對產品型號、類別、價格;產品圖片等數據進行批量上傳,批量下載的管理。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="278" t="139" bg="#FF0198" cbg="#D80683">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>8.產品數據導入導出管理模塊</span></div>
				<div class="s-mod-cur"><span>在網站管理平臺對產品型號、類別、價格;產品圖片等數據進行批量上傳,批量下載的管理。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="695" t="139" bg="#4837cd" cbg="#3c2bb7">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>7.購物車管理模塊</span></div>
				<div class="s-mod-cur"><span>包含在線訂購單提交,可在線提交單個或連續多個訂單,在線支付、物流管理、退換貨管理。必須與會員系統配合。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="973" t="139" bg="#2b7ab7" cbg="#1e669d">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>8.QQ營銷咨詢3合1管理模塊</span></div>
				<div class="s-mod-cur"><span>可以把QQ、MSN、旺旺做成一個3合1的滾動窗口,用戶點擊可與企業洽談生意,通過此系統大大方便訪客與企業的交流。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="266" l="0" t="278" bg="#33ac5b" cbg="#209747">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>9.流量統計管理模塊</span></div>
				<div class="s-mod-cur"><span>集成第三方提供的網站流量統計系統,通過統計可以可看網站的訪問量,以及互聯網品牌指數。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="139" t="278" bg="#bf7030" cbg="#ae6021">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>10.新聞資訊管理模塊</span></div>
				<div class="s-mod-cur"><span>不限層級添加新聞資訊類別,可自主管理公司簡介、公司新聞、產品新聞、行業知識等。在后臺進行增、刪、查、改等一系列操作。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="266" l="417" t="278" bg="#914ae2" cbg="#7d33d0">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>11.在線咨詢管理模塊</span></div>
				<div class="s-mod-cur"><span>實現網站前臺頁面提交咨詢內容及聯系方式,后臺查詢咨詢內容及咨詢人情況,并進行在線咨詢的回復,前臺頁面自動顯示。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="266" l="556" t="278" bg="#e42ec4" cbg="#cf19af">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>12.會員中心管理模塊</span></div>
				<div class="s-mod-cur"><span>實現會員填寫字段注冊,對填寫內容進行有效性校驗。 根據注冊信息的用戶名、密碼、驗證碼進行會員登陸。 對會員注冊的基本資料進行查看、修改。 管理會員注冊信息、會員列表,建立會員等級權限組,分配會員至權限組,然后根據權限使用網站的其它各個功能模塊。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="834" t="278" bg="#4392ec" cbg="#206fc8">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>13.友情鏈接管理模塊</span></div>
				<div class="s-mod-cur"><span>與客戶網站交換文字鏈接、圖片鏈接均可,通過鏈接提升網站的PR值,有利于SEO優化排名。</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="139" t="417" bg="#20c8a6" cbg="#13af90">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>14.會員管理模塊</span></div>
				<div class="s-mod-cur"><span>會員短信、郵箱校驗模,塊 會員短信、郵箱驗模塊,密碼問題保護模塊,紅包推,廣管理模塊 ,會員API接口.</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="834" t="417" bg="#a3ca1d" cbg="#8bb00c">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>15.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="0" t="556" bg="#d8493a" cbg="#ba3122">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>16.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="266" l="278" t="417" bg="#c44a8c" cbg="#b72b77">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>17.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="266" h="127" l="417" t="556" bg="#8e48f7" cbg="#7026df">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>18.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="695" t="556" bg="#7a92c2" cbg="#5876b2">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>18.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="127" l="834" t="556" bg="#7f9861" cbg="#658242">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>18.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
		<li class="s-mod-item" w="127" h="266" l="973" t="417" bg="#876f5a" cbg="#755a41">
			<div class="s-mod-wrap">
				<div class="s-mod-def"><span>18.訂單管理模塊</span></div>
				<div class="s-mod-cur"><span>訂單管理模塊</span></div>
			</div>
		</li>
	</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 圖片放大鏡 圖片疊加 圖片層疊 圖片拖動 圖片拖拽 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片廣告 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 純圖片輪播 圖片輪播 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 滑動星星打分 圖表 圖片 圖片插件 頭像截圖 其他 鼠標懸停 文字滑動 文字滑塊 文字切換 文字選項卡 圖片九宮格
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子