jQuery横向时间轴焦点图滚动特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

210 839 280



特效描述:jQuery 横向时间轴 焦点图滚动特效。jQuery横向时间轴焦点图滚动特效

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="main_w">
	<div class="index_zzw" id="index_zzw">
		<div class="index_zzw_main" id="index_zzw_main">
			<div class="zzw_item zzw_item_3" po="3" c="2">
				<ul class="clearfix">
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia1.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">红烧排骨</a></h2>
							<strong>这个红烧排骨超简单,不下厨的人都会做</strong>
							<span><a href="http://www.51qianduan.com/">健骨</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia2.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">红烧冰糖鸡翅中</a></h2>
							<strong>做这道菜很快,只需15分钟即可,真的哦</strong>
							<span><a href="http://www.51qianduan.com/">美容</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia3.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">红烧小土豆</a></h2>
							<strong>土豆富含钾、锌、铁,还含丰富赖氨酸</strong>
							<span><a href="http://www.51qianduan.com/">和胃健脾</a></span>
						</div>
					</li>
				</ul>
			</div>
			<div class="zzw_item zzw_item_2" po="2" c="1">
				<ul class="clearfix">
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia4.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">椒香葱花饼</a></h2>
							<strong>有螺旋层次感,而且有花椒和芝麻的香味</strong>
							<span><a href="http://www.51qianduan.com/">补充能量</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia5.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">流油咸鸭蛋</a></h2>
							<strong>一打开,一股黄油流出来,真是超级香啊</strong>
							<span><a href="http://www.51qianduan.com/">补钙</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia6.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">皮蛋瘦肉粥</a></h2>
							<strong>鲜香扑鼻,真心不错,里面肉肉也很软嫩</strong>
							<span><a href="http://www.51qianduan.com/">强身健体</a></span>
						</div>
					</li>
				</ul>
			</div>
			<div class="zzw_item zzw_item_4" po="4" c="3">
				<ul class="clearfix">
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia7.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">西芹蜂蜜汁</a></h2>
							<strong>蜂蜜中含180多种天然成分,营养丰富哦</strong>
							<span><a href="http://www.51qianduan.com/">瘦身</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia8.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">酸奶泡芙</a></h2>
							<strong>里面是纯酸奶哦,不用担心发胖了,哈哈</strong>
							<span><a href="http://www.51qianduan.com/">美容</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia9.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">蓝莓山药</a></h2>
							<strong>最天然的甜品,好吃,但是脂肪却超低</strong>
							<span><a href="http://www.51qianduan.com/">瘦身</a></span>
						</div>
					</li>
				</ul>
			</div>
			<div class="zzw_item zzw_item_1" po="1" c="5">
				<ul class="clearfix">
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia10.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">蚝油西兰花</a></h2>
							<strong>简单的焯水即保留了营养又清脆的口感</strong>
							<span><a href="http://www.51qianduan.com/">抗衰老</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia11.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">玉米蔬果沙拉</a></h2>
							<strong>转用橄榄油和黑胡椒碎来调味,热量超低</strong> 
							<span><a href="http://www.51qianduan.com/">瘦身</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia12.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">白菜米糊</a></h2>
							<strong>把白菜叶煮熟,用搅拌机搅碎,超简单哦</strong> 
							<span><a href="http://www.51qianduan.com/">瘦身</a></span>
						</div>
					</li>
				</ul>
			</div>
			<div class="zzw_item zzw_item_5" po="5" c="4">
				<ul class="clearfix">
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia13.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/" >香煎培根彩椒卷</a></h2>
							<strong>培根浓郁香气和彩椒鲜甜口感相结合,赞</strong> 
							<span><a href="http://www.51qianduan.com/">补虚</a></span>
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia14.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">酱爆鸡丁</a></h2>
							<strong>这个可比炒宫保鸡丁简单多了哦,试试</strong> 
							<span><a href="http://www.51qianduan.com/">防癌健脑</a></span> 
						</div>
					</li>
					<li>
						<a href="http://www.51qianduan.com/"><img src="images/lanrenzhijia15.jpg" /></a>
						<div class="c">
							<h2><a href="http://www.51qianduan.com/">西葫芦谷垒</a></h2>
							<strong>你吃过金黄色的香蕉西葫芦吗?好奇吧?</strong> 
							<span><a href="http://www.51qianduan.com/">美容养颜</a></span> 
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="maskleft" id="maskleft"></div>
		<div class="maskright" id="maskright"></div>
		<div class="prev_btn prev_btn_1" id="zzw_prev_btn"></div>
		<div class="next_btn next_btn_1" id="zzw_next_btn"></div>
		<div class="index_3meal_tab" id="index_timelinebox">
			<div class="index_3meal_tab_w">
				<span class="timex timex_0" id="i_time4"><span>早餐时间</span></span>
				<span class="timex timex_1 timex_current" id="i_time10"><span>午餐时间</span></span>
				<span class="timex timex_2" id="i_time14"><span>下午茶时间</span></span>
				<span class="timex timex_3" id="i_time16"><span>晚餐时间</span></span>
				<span class="timex timex_4" id="i_time21"><span>夜宵时间</span></span>
			</div>
			<div class="timeline_left"></div>
			<div class="timeline_right"></div>
			<span class="time time4" id="i_time4">4:00</span>
			<span class="time time10" id="i_time10">10:00</span>
			<span class="time time14" id="i_time14">14:00</span>
			<span class="time time16" id="i_time16">16:00</span>
			<span class="time time21" id="i_time21">21:00</span>
			<span class="time time4_" id="i_time4_">4:00</span>
		</div>
	</div>
</div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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