jQuery仿百度新闻标签云关键词模板代码

程序源码2年前 (2023)发布 小编
0 0 0

jQuery仿百度新闻标签云关键词模板代码是一款带动画特效的仿百度新闻热搜新闻关键词标签云,本代码模板效果很棒,蓝色大气简洁,鼠标滑过关键词有动画效果。

效果

jQuery仿百度新闻标签云关键词模板代码

核心代码

<div id = "wrap">
	<ul>
		<li class = "liB">
			<div class = "divA"></div>
			<a href="" class = "aa">三星堆呆萌马头</a>
			<div class = "divA2"></div>
		</li>
		
		<li class = "liB">
			<div class = "divA"></div>
			<a href="">世界最长寿女性去世</a>
			<div class = "divA1"></div>
		</li>
		
		<li class = "liB">
			<div class = "divA"></div>
			<a href="">8岁女孩放歌<br>G20</a>
			<div class = "divA1"></div>
		</li>
		
		<li class = "liB">
			<div class = "divA"></div>
			<a href="">延迟退休<br>或2021年实施</a>
			<div class = "divA2"></div>
		</li>
	</ul>
</div>
<script src="jquery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.divA1').eq($(this).index()).animate({top:'0'},5)
})
			$('li').mouseenter(function(){
		$(this).css('background-color','rgb(24,68,142)')
		$('.divA').eq($(this).index()).animate({top:'0'},300)
		$('.divA').eq($(this).index()).animate({top:'100%'},150)
		$('.divA1').eq($(this).index()).animate({top:'100%'},150)
		$(this).find('.divA2').animate({top:'100%'},300)
	})
	$('li').mouseleave(function(){
		$('.divA1').eq($(this).index()).animate({top:'0'},150)
		$('.divA').eq($(this).index()).animate({top:'-100%'},10)
		$(this).find('.divA2').animate({top:'0'},150)
		$(this).css('background','rgb(40,100,187)')
	})

</script>

资源下载

© 版权声明

相关文章

暂无评论

暂无评论...