QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery新闻列表tab切换布局代码

原创商用 jQuery新闻列表tab切换布局代码

jQuery简洁大气的新闻资讯列表tab布局,鼠标悬停tab标签滑动切换代码。
分享到微信朋友圈
X
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入HTML代码

<div id="new_box">

	<div class="title_cn">
		<img src="images/tle_bt5.png" width="166" height="41">
	</div>
	
	<div class="new_con">
		<div class="newtel">
			<ul class="new_telst">
				<li class="">公司新闻</li>
				<li class="newon">行业新闻</li>
				<li class="">媒体报道</li>
				<p style="left: 166px;">
					<b></b>
				</p>
			</ul>
			<div class="clear">
			</div>
		</div>
		<div class="new-wrap">
			<!--案例1-->
			<div class="new_lst show" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img1.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下数据2018年端午节放假安排! </a>
					</p>
					<p class="newlf_tx">
						 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,现将2018年端午节放假安排通知如下:
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>13</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据2018年端午节放假安排! </a>
								<span> 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>15</span>2018-5
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 记朗玥科技惠州两日行 </a>
								<span>时间总是在你忙碌中向前跑得飞快。恍然间2018年已至5月,当歇息一番,放空自己</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据五一劳动节放假安排! </a>
								<span> 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据泰国游记 </a>
								<span>一提到泰国,或许我们脑海中立刻冒出来词都是相同的,那大概就是人妖了。其实不然,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据2018年清明节放假通知安排 </a>
								<span>根据国家国务院法定节假日放假规定,结合公司实际情况。根据公司领导安排,现将20</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>1</span>2018-3
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 机智如你|天下数据邀您备战元宵节,这... </a>
								<span>明天是正月十五元宵节 ,在这个吉祥的日子里,
天下数据 提前祝所有客户朋
								</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例2-->
			<div class="new_lst" style="display: block;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img2.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下数据:CDN加速技术的特点和优势 </a>
					</p>
					<p class="newlf_tx">
						现如今大众对互联网服务的要求越来越高,对于网站访问速度的快慢自然会更加在意。虽然带宽不断增加,但用户数量也在不断增加,受网站服务器的负荷和传输距离等因素的影响,响应速度依然需要得到重视。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据:CDN加速技术的特点和优势 </a>
								<span>现如今大众对互联网服务的要求越来越高,对于网站访问速度的快慢自然会更加在意。虽</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>25</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器下载速度受那些因素影响? </a>
								<span> 美国服务器带宽比较大,对于软件下载或者在线视频观看时,下载的速度都会比较快,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>24</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 从腾讯云宕机看如何提高云服务器安全防... </a>
								<span>腾讯云于今日出现宕机现象,称监控到广州区域部分用户资源访问失败,控制台登录异常</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器可以做视频网站吗?有哪些优... </a>
								<span> 美国服务器可以做视频网站吗?由于距离的原因,对于中国市场来说,很多人都不会选</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>19</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 视频网站服务器租用从哪些方面选择? </a>
								<span>随着网络宽带上的升级,网站也随着多方面性的发展,在网络中视频网站的数量也在呈直</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>18</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器适合建哪些企业网站? </a>
								<span>天下数据美国KT服务器冲量抄底特价低至350元/月</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例3-->
			<div class="new_lst" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img3.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 直销认证 | 天下数据被授予“201... </a>
					</p>
					<p class="newlf_tx">
						 2018「第十一届」世界直销品牌节大会以“向新力 新需求/再出发”为主题,在武汉洲际酒店隆重举行。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 直销认证 | 天下数据被授予“201... </a>
								<span> 2018「第十一届」世界直销品牌节大会以“向新力 新需求/再出发”为主题,在</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据聊:直销企业面临新机遇和新挑... </a>
								<span>近年来,随着全球经济增速放缓,居民消费水平的提高,“互联网+”的突飞猛进、微商</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据荣获“2018年度品牌信息化... </a>
								<span>恭喜天下数据在第十一届世界直销品牌节荣获“2018年度品牌信息化服务之星”的称</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>28</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 第十一届世界直销品牌节,天下数据品牌... </a>
								<span>第十一届世界直销品牌节在武汉五星级酒店——洲际酒店宴会厅拉开了直销品牌节的节日</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>27</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据受邀参加“2018世界直销品... </a>
								<span>  2018年6月27日,天下数据应邀出席第十一届(世界)中国直销品牌节。中国</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据:世界杯看直播 不卡顿可以吗... </a>
								<span>全民直播年代,迎接来了四年一遇的火热世界杯。因为互联网的迅速崛起,以及全民直播</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript">           
$(document).ready(function(){
	//设计案例切换
	$('.new_telst li').mouseover(function(){
		var liindex = $('.new_telst li').index(this);
		$(this).addClass('newon').siblings().removeClass('newon');
		$('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
		var liWidth = $('.new_telst li').width();
		$('.newtel .new_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
	});
	
});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
全红彩票 www.458415.com-十一选五大彩鲸吧| www.gy14.com-彩16app下载| www.26sq.com-七乐彩预测分析专区| www.0663.wang-中国福彩30选5| www.7652.pw-中国体彩2串1图标| www.95ee.com-卓创国际彩票干嘛的| www.936381.com-足彩分析姜山冷门| www.518188.com-牛姓彩票-| www.606283.com-国内禁止彩票| www.690309.com-7乐彩开奖号| www.833851.com-体彩开奖新浪直播| www.953156.com-体育彩票6十1| www.0220.site-三d试机号彩宝网| www.10666.com-足彩欧赔指数| www.j81.club-彩易-| www.283553.com-七星彩大奖怎么领奖| www.44507.com-福彩3d平台-| www.74vk.com-世界各国基诺彩票| www.227940.com-彩票查询七星彩| www.015754.com-808南国彩票论坛| 淘彩票www.tcp969.com| www.276489.com-湖北快三牛定一| www.386687.com-韩国彩票附号| www.795755.com-新加坡天天彩资讯綱| www.021686.com-福彩快乐十分钟| www.363362.com-中国体彩藏机图| www.67298.com-三d福彩开奖号| www.97666.cc-今日竞彩单场推荐| www.122546.com-香港意大利彩金| www.323077.com-凤凰竞彩下载| www.474970.com-青海福彩三d开奖号| www.650959.com-超简单水彩画| www.735125.com-福彩3d敖远龙老师| www.a10.top-22彩票下载-| www.134779.com-中彩情报网永久书签| www.500834.com-白底照片属于彩照吗| www.591798.com-七星彩质合是什么| www.838358.com-山东彩友论坛| www.972729.com-彩铅画多肉-| www.u58.pw-石家庄福利彩票转让| www.436.cm-彩49网址-| www.775015.com-福彩开奖日期时间| www.861683.com-关注彩票开奖查询| www.933385.com-北京快三时间截止| www.983576.com-彩16网站-| www.sz25.com-国彩有哪些-| www.378592.com-彩乐园彩票大师| www.502513.com-女孩用彩的意思| www.582958.com-彩银条一克多少钱| www.655693.com-中彩彩票pc蛋蛋| www.757187.cc-彩色混凝土路面报价| www.833331.com-3b福彩藏机诗| www.911673.com-中国福利彩票怎样玩| 网易彩票www.558424.com| www.53563.cc-彩虹6号好玩吗| www.008336.cc-彩票挂机软件| www.8886.date-外围足彩能挣钱吗| www.zc27.com-福彩体彩3a试机号| www.23uq.com-亚洲杯足彩竞猜| www.340.biz-六爻测彩票实例| www.38jl.com-国家博物馆彩陶王| www.586595.com-免费领彩金棋牌| www.684768.com-新浪网彩票电脑版| www.786273.com-彩票查询结果大全| www.877822.cc-台湾五分彩官方网站| www.960134.com-东方太阳彩票| 新盈彩www.xinyc8.com| www.365129.cc-彩天堂-| www.482387.com-彩票l-| www.579048.com-重庆时彩开奖| www.op11.com-有人带着玩彩票骗局| www.222.cx-三分时时彩是什么| www.138339.com-河南快三单注奖金| www.147022.com-飞腾彩票全天计划| www.232617.com-最赚钱的彩票系统| www.916557.com-彩票哪个平台稳| www.980171.com-竞彩足球数据分析| www.rv2.com-福彩三d大小走势图| www.656818.com-亿彩网合法吗| www.741793.com-好运来彩票怎么玩| www.818224.com-彩乐乐正规吗| www.877109.com-福利彩5d-| www.939765.com-彩票中奖窍门| www.987872.com-正规售彩网站| www.d43.xyz-人工智能彩票| www.245207.com-靠谱的彩票选号软件| www.401926.com-网咯彩票怎么玩法| www.546021.com-新浪彩票电脑版页面| www.627236.com-3o6官方彩票网| www.709279.com-台湾时时彩结果查询| www.776120.com-时时彩前三一码规律| www.840019.com-中国福利彩票是谁的| www.903632.com-3d福彩试机号今天| www.979087.com-好彩无嘴-| www.185957.com-快三高手-| www.268036.com-今天湖北快三分布图| www.348455.com-彩票活动图-| www.408919.com-信誉好的七星彩平台| www.503783.com-彩票分析软件开发| www.572990.com-彩票彩客网手机老版| www.22893.cc-做美人鱼彩票犯法吗| www.457900.com-福体彩今日字迷| www.576427.com-彩吧明儿福彩三d| www.632978.com-丽彩科森-| www.733853.com-福彩61生肖| www.795121.com-手机上可以卖快三吗| www.863375.com-彩票选号必中神器| www.913935.com-虚拟足球e球彩方法| www.309441.com-快三属于福彩吗| www.27559.cc-湖北快三网络版| www.042016.com-江南彩姐大乐透预测| www.660957.com-123彩票计划| www.742877.com-彩票苹果投注app| www.815686.com-体彩快中彩| www.883863.cc-有没有办法攻击私彩| www.951746.com-竞彩中奖查询| 福彩网www.5522y.cc| www.hi86.com-快三一共多少组合| www.zk97.com-88爱彩app-| www.39da.com-购买七星彩票| www.805515.com-彩票可以在网上买| www.881549.com-辉煌彩票h-| www.969235.com-上海福利彩票快三| www.cai9.com-彩票快三怎么玩| www.mz84.com-青海西宁快三app| www.m45.live-手机福彩门户网址| www.44kh.com-福彩胆拖投注详解| www.of.cc-宁夏福彩快三72期| www.nn98.cc-宁夏彩票中奖记录| www.87795.cc-时时彩彩票宣判| www.175191.com-一分快三在哪里下载| www.312088.com-亿盈幸运快三| www.504445.com-彩排演出-| www.865982.com-福利彩票怎样注册| www.814531.com-河北彩票店-| www.lo98.com-3d中奖彩票票样| www.31ml.com-礼拜六有什么彩票| www.893.cm-彩铅画漫画人物教程| www.5777.vip-最快开彩现场| www.583920.com-彩立中江苏快3| www.672399.com-瑞彩祥云app安卓| www.d19.com-彩票开奖七星彩投注| www.534913.com-即开型福利彩票机器| www.86rm.com-全民k歌彩评| www.gt87.com-想买彩票不知怎么买| www.48da.com-中国福利彩票内部| www.fe96.com-河北快三下载| www.102306.com-彩票计划网站86| www.1303.vip-体育博彩官网| www.062425.com-瑞彩祥云ios| www.wt69.com-彩票指南电子版买彩| www.cc7.cc-北京快三推荐号| www.504654.com-六全彩开奖结果查绚| www.619948.com-福彩有多少种组合| www.723520.com-极速3d彩票计划| www.854412.com-微信h5彩票-| www.951084.com-500足彩数据| www.fv2.cc-时时彩最快开奖| www.78785.cc-竞彩平台哪个好| www.639090.com-体育彩票去哪里申请| www.716233.com-福彩今日开奖| www.778807.com-中彩网app分钟| www.882686.com-易彩网是私彩吗| www.947167.com-白岩松回应彩票审计|