jQuery hover仿阿里妈妈网站首页水平滑动门切换代码



118 470 157



特效描述:网站首页 水平滑动门 滑动门切换,这是一个仿照阿里妈妈来的一个带有图片和文字的切换,很有特点

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="probox">
	<ul id="pro">
		<li id="li01" class="lishow">
			<div class="inner">
				<span class="tjlm">淘宝联盟</span>
				<div class="grp">
					<h4>淘宝联盟</h4>
					<p>提供2亿淘宝商品库,频道/搜索/组件/活动等多种推广方式选择,灵活的API接口支持,与网站内容完美结合的推广方式。百万成功合作案例,30亿分成规模.</p>
				</div>
			</div>
		</li>
		<li id="li02">
			<div class="inner">
				<span class="cctg">橱窗推广</span>
				<div class="grp">
					<h4>tanx SSP 橱窗推广</h4>
					<p>提供2亿淘宝商品库,频道/搜索/组件/活动等多种推广方式选择,灵活的API接口支持,与网站内容完美结合的推广方式。百万成功合作案例,30亿分成规模.</p>
				</div>
			</div>
		</li>
		<li id="li03">
			<div class="inner">
				<span class="wxlm">无线联盟</span>
				<div class="grp">
					<h4>无线联盟</h4>
					<p>提供2亿淘宝商品库,频道/搜索/组件/活动等多种推广方式选择,灵活的API接口支持,与网站内容完美结合的推广方式。百万成功合作案例,30亿分成规模.</p>
				</div>
			</div>
		</li>
	</ul>
	<div id="new">
		<span class="new">新产品</span>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#li01').hover(function(){
		$(this).animate({'left':'0'},300).addClass('lishow');
		$('#li02').animate({'left':'560px'},300).removeClass('lishow');
		$('#li03').animate({'left':'715px'},300).removeClass('lishow');
	});
	$('#li02').hover(function(){
		$(this).animate({'left':'145px'},300).addClass('lishow');
		$('#li01').animate({'left':'0'},300).removeClass('lishow');
		$('#li03').animate({'left':'715px'},300).removeClass('lishow');
	});
	$('#li03').hover(function(){
		$('#li02').animate({'left':'145px'},300).removeClass('lishow');
		$(this).animate({'left':'290px'},300).addClass('lishow');
	});
});
</script>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 滑动选项卡 滑动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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