jQuery鼠标经过选项卡内容切换特效代码下载



9 34 12



特效描述:鼠标经过 选项卡 内容切换,jQuery鼠标经过选项卡内容切换特效代码下载

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="o-m">
	<div class="ul-o">
		<ul>
			<li class="li-o"><span></span><p>客户充分信任您</p><div class="clear"></div><b></b></li>
			<li class="li-t"><span></span><p>更多客户快速找到您</p><div class="clear"></div><b></b></li>
			<li class="li-s"><span></span><p>销售网络快速扩张</p><div class="clear"></div><b></b></li>
			<li class="li-f"><span></span><p>实时互动沟通转化率高</p><div class="clear"></div><b></b></li>
			<li class="li-w"><span></span><p>超强电商管理引爆成交量</p><div class="clear"></div><b></b></li>
			<li class="li-l"><span></span><p>强化维系客户,利润持续增长</p><div class="clear"></div><b></b></li>
			<div class="li-mask"></div>
		</ul>
	</div>
	<div class="ul-t">
		<li style="display:block">
			<div class="li-top">
				<h5>客户充分信任您</h5>
				<p>强大视觉冲击力提升网站形象实力,极具销售力的产品展示突出卖点,吸引眼球打动客户;</p>
				<div class="li-a"><a>专业的官网</a><a>产品展示</a><a>文章展示</a><a>地图位置</a><a>走马灯</a><a>全屏浮动</a><a>视频</a><a>多种图文特效</a></div>
				<div class="li-img"><img src="img/n-qyjz-40.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>更多客户快速找到您</h5>
				<p>PC端+手机端全网搜索引擎SEO优化,提升网站排名引流量,更多客户找到您,<br />强大推广方式+超强营销工具,扩大客流量、订单量</p>
				<div class="li-a"><a>PC+手机端</a><a>SEO优化</a><a>一键分享传播</a><a>抢红包</a><a>朋友助力</a><a>众筹</a><a>好友赞助</a><a>一元夺宝</a></div>
				<div class="li-img"><img src="img/n-qyjz-47.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>销售网络快速扩张</h5>
				<p>全新"分销加盟+三级返佣"模式体系,无限发展下游,让您的分销商满天下;</p>
				<div class="li-a"><a>精美分销店铺</a><a>自选分销产品</a><a>一键分销</a><a>无限下级</a><a>分销商管理</a><a>佣金管理</a><a>推广文案管理</a></div>
				<div class="li-img"><img src="img/n-qyjz-48.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>实时互动沟通转化率高</h5>
				<p>方便的客服沟通工具,实时互动咨询,快速提升询盘率和成交转化率,变流量为销量;</p>
				<div class="li-a"><a>多种热门客服工具</a><a>微客服</a><a>在线留言板</a></div>
				<div class="li-img"><img src="img/n-qyjz-49.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>超强电商管理引爆成交量</h5>
				<p>强大的商品管理,团购、秒杀等电商功能促进高销量,方便快捷的购物车及支付方式促成交,流量、业绩统计分析尽在掌握中;</p>
				<div class="li-a"><a>产品管理</a><a>订单管理</a><a>物流配送管理</a><a>数据统计分析</a><a>团购</a><a>秒杀</a><a>砍价</a><br /><a>购物车</a><a>多种在线支付</a><a>扫码支付</a></div>
				<div class="li-img"><img src="img/n-qyjz-50.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>强化维系客户,利润持续增长</h5>
				<p>客户管理、维系、关怀全方位,结合高效互动营销工具,深度挖掘新老客户潜力价值,刺激客户持续消费 </p>
				<div class="li-a">
					<span>客户管理:</span><a>会员管理</a><a>会员卡</a><a>会员预约</a><a>积分管理</a><a>优惠券</a><br />
					<span>客户关怀:</span><a>签到</a><a>生日积分</a><a>充值</a><a>开卡</a><a>消费赠送</a><a>贺卡</a><br />
					<span>抽奖互动:</span><a>大转盘</a><a>刮刮卡</a><a>砸金蛋</a><a>摇一摇</a><a>微现场</a><br />
					<span>提升服务:</span><a>调研</a><a>投票</a>
				</div>
				<div class="li-img"><img src="img/n-qyjz-51.gif" /></div>
			</div>
		</li>
	</div>
	<div class="clear"></div>
</div>
<script type="text/javascript">
$('.o-m .ul-o li').hover(function () {
	var linum = $(this).index()
	$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()
})
$(function () {
	var slip = $('.li-mask');
	var a = $('.o-m .ul-o li:first');
	//初始化滑块
	slip.css({
		'top': parseInt(a.position().top) + 'px'
	});
	$('.o-m .ul-o li').mouseenter(function () {
		//显示滑块
		if (slip.css('display') == 'none') {
			slip.show();
		};
		//移动滑块
		slip.stop().animate({
			top: parseInt($(this).position().top) + 'px'
		}, 300);
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 导航切换 二维码 地图 图片切换 计算器 文字切换 计时器 背景切换 桌面 手风琴 跳转 选项卡自动切换 步骤 视频切换 键盘 列表切换 签到 分享 渐隐切换 点赞 投票 全屏切换 雪花 切换按钮 打印 缩放切换 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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