经验分享程序开发文档资料数据资源其它资源

win8九宫格布局鼠标悬停滑出文字特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 win8九宫格布局鼠标悬停滑出文字特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

win8九宫格布局鼠标悬停滑出文字特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>win8九宫格布局鼠标悬停滑出文字</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <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>
</head>
<body>

<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>
</body>
</html>

JS代码(base.js):

/*参数说明w:宽度h:高度l:左侧距离t:顶部距离bg:默认底色cbg:鼠标划过后底色*参考单元格宽高：127，边距：12（可根据自己意思自由设定。只要好看就行）@ auther:flc@ time:2014-02-20 09:41:05@ qq:3407725@ site:www.flccent.com*/
//模块介绍$(function(){
	$(".s-mod ul").fadeIn(300,function(){
	$(".s-mod .s-mod-loding").remove();
}
)$(".s-mod ul .s-mod-item").each(function(){
	var i=$(this);
	var o={
	w:1*i.attr("w"),h:1*i.attr("h"),l:1*i.attr("l"),t:1*i.attr("t"),bg:i.attr("bg"),cbg:i.attr("cbg"),speed:600}
;
	var wrap=i.find(".s-mod-wrap");
	var def=i.find(".s-mod-def");
	var cur=i.find(".s-mod-cur");
	i.css({
	width:o.w,height:o.h,left:o.l,top:o.t}
);
	wrap.css({
	width:o.w,height:o.h}
);
	def.css({
	width:(o.w-24),height:o.h,backgroundColor:o.bg}
);
	cur.css({
	width:(o.w-24),height:o.h,backgroundColor:o.cbg,top:o.h}
);
	def.find("span").css({
	paddingTop:((o.h-def.find("span").height())/2)}
)cur.find("span").css({
	paddingTop:((o.h-cur.find("span").height())/2)}
)//滑动效果i.hover(function(){
	def.stop().animate({
	top:-o.h}
,o.speed,"easeOutBounce")cur.stop().animate({
	top:0}
,o.speed,"easeOutBounce")}
,function(){
	def.stop().animate({
	top:0}
,o.speed,"easeOutBounce")cur.stop().animate({
	top:o.h}
,o.speed,"easeOutBounce")}
)}
)}
)

CSS代码(base.css):

@charset "utf-8";*{margin:0;padding:0;-webkit-text-size-adjust:none;}
body{background:#fff;font-size:12px;color:#555;font-family:Tahoma,"微软雅黑",Geneva,sans-serif;background:#f5f5f5;}
a{color:#555;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
img{border:none;}
li{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
* html .clearfix{zoom:1;}
/* IE6 */
*:first-child+html .clearfix{zoom:1;}
/* IE7 */
.w1100{width:1100px;margin:0 auto;}
.s-mod{margin:20px auto 0;position:relative;}
.s-mod-loding{text-align:center;}
.s-mod ul{display:none;}
.s-mod-item{display:block;position:absolute;}
.s-mod-wrap{position:relative;overflow:hidden;}
.s-mod-def{position:absolute;left:0;top:0;z-index:1;padding:0 12px;color:#fff;font-size:18px;line-height:25px;text-align:center;}
.s-mod-def span{display:block;}
.s-mod-cur{position:absolute;left:0;top:0;z-index:2;padding:0 12px;color:#fff;line-height:18px;}
.s-mod-cur span{display:block;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
39.36 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
39.36 KB
立即下载
方澜
了解
打赏作者 鼓励作者
Html 文字滑动
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章