基于jQuery实现九宫格布局鼠标悬停滑出文字



34 135 46



特效描述:基于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

加群请备注:从官网了解到