jQuery动画悬浮图标菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery动画悬浮图标菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画悬浮图标菜单代码</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/TweenMax.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>

</head>
<body>
<div id="intro">
	<div class="electro obj">
		<div class="wrap">
			<div class="ele obj"><a href="http://www.baidu.com/"><img src="images/intro_electro.png" /></a></div>
			<div class="el1 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_1.png" width="45" /></a></div>
			<div class="el2 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_2.png" width="62.5" /></a></div>
			<div class="el3 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_3.png" width="45" /></a></div>
			<div class="el4 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_4.png" width="40" /></a></div>
			<div class="el5 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_5.png" width="35" /></a></div>
			<div class="el6 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_6.png" width="35" /></a></div>
			<div class="el7 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_7.png" width="35" /></a></div>
			<div class="el8 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_8.png" width="30" /></a></div>
			<div class="el9 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_9.png" width="45" /></a></div>
			<div class="el10 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_10.png" width="30" /></a></div>
			<div class="el11 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_11.png" width="45" /></a></div>
			<div class="el12 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_12.png" width="45" /></a></div>
			<div class="el13 obj"><a href="http://www.baidu.com/"><img src="images/intro_element_13.png" width="45" /></a></div>
		</div>
	</div>
	
</div>
</body>
</html>

JS代码(main.js):

$(document).ready(function(){
	introMove();
	function introMove(){
	TweenLite.from($("#intro .el1"),1,{
	css:{
	top:210,left:150}
,delay:0.5}
);
	TweenLite.from($("#intro .el2"),1,{
	css:{
	top:210,left:150}
,delay:0.6}
);
	TweenLite.from($("#intro .el3"),1,{
	css:{
	top:210,left:150}
,delay:0.7}
);
	TweenLite.from($("#intro .el4"),1,{
	css:{
	top:210,left:150}
,delay:0.8}
);
	TweenLite.from($("#intro .el5"),1,{
	css:{
	top:210,left:150}
,delay:0.9}
);
	TweenLite.from($("#intro .el6"),1,{
	css:{
	top:210,left:150}
,delay:1}
);
	TweenLite.from($("#intro .el7"),1,{
	css:{
	top:210,left:150}
,delay:1.1}
);
	TweenLite.from($("#intro .el8"),1,{
	css:{
	top:210,left:150}
,delay:1.2}
);
	TweenLite.from($("#intro .el9"),1,{
	css:{
	top:210,left:150}
,delay:1.3}
);
	TweenLite.from($("#intro .el10"),1,{
	css:{
	top:210,left:150}
,delay:1.4}
);
	TweenLite.from($("#intro .el11"),1,{
	css:{
	top:210,left:150}
,delay:1.5}
);
	TweenLite.from($("#intro .el12"),1,{
	css:{
	top:210,left:150}
,delay:1.6}
);
	TweenLite.from($("#intro .el13"),1,{
	css:{
	top:210,left:150}
,delay:1.7}
);
	TweenLite.from($("#intro .electro"),0.5,{
	css:{
	top:200}
,onComplete:introMoveEnd}
);
	$("#intro .electro").show();
}
function introMoveEnd(){
	eleRandomMove("start");
}
var interval_ele;
	function eleRandomMove(type){
	if(type == "start"){
	clearInterval(interval_ele);
	interval_ele = setInterval(function (){
	TweenLite.to($("#intro .el1"),1,{
	css:{
	top:Math.floor(Math.random() * 30 +(70)),left:Math.floor(Math.random() * 30 +(20))}
}
);
	TweenLite.to($("#intro .el2"),1,{
	css:{
	top:Math.floor(Math.random() * 20 +(40)),left:Math.floor(Math.random() * 30 +(120))}
}
);
	TweenLite.to($("#intro .el3"),1,{
	css:{
	top:Math.floor(Math.random() * 30 +(120)),left:Math.floor(Math.random() * 30 +(40))}
}
);
	TweenLite.to($("#intro .el4"),1,{
	css:{
	top:Math.floor(Math.random() * 20 +(10)),left:Math.floor(Math.random() * 30 +(270))}
}
);
	TweenLite.to($("#intro .el5"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(90)),left:Math.floor(Math.random() * 30 +(280))}
}
);
	TweenLite.to($("#intro .el6"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(50)),left:Math.floor(Math.random() * 30 +(310))}
}
);
	TweenLite.to($("#intro .el7"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(60)),left:Math.floor(Math.random() * 30 +(420))}
}
);
	TweenLite.to($("#intro .el8"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(200)),left:Math.floor(Math.random() * 30 +(380))}
}
);
	TweenLite.to($("#intro .el9"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(210)),left:Math.floor(Math.random() * 30 +(300))}
}
);
	TweenLite.to($("#intro .el10"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(290)),left:Math.floor(Math.random() * 30 +(270))}
}
);
	TweenLite.to($("#intro .el11"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(230)),left:Math.floor(Math.random() * 30 +(40))}
}
);
	TweenLite.to($("#intro .el12"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(240)),left:Math.floor(Math.random() * 30 +(120))}
}
);
	TweenLite.to($("#intro .el13"),1,{
	css:{
	top:Math.floor(Math.random() * 10 +(280)),left:Math.floor(Math.random() * 30 +(20))}
}
);
}
,800);
}
else{
	clearInterval(interval_ele);
}
}
}
)

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:'Nanum Gothic';color:#000000;background-image:url("images/bg.png");}
/* intro */
#intro{width:520px;height:520px;overflow:hidden;position:relative;margin:0px auto;}
#intro .obj{position:absolute;}
#intro .top{z-index:1;width:2000px;height:723px;background-image:url("images/intro_bg_top.png");top:0px;left:0px;}
#intro .bottom{z-index:10;width:2000px;height:650px;background-image:url("images/intro_bg_bottom.png");top:468px;left:0px}
#intro .wave{z-index:3;width:1305px;height:280px;top:445px;left:218px}
#intro .drop{z-index:4;width:310px;height:280px;top:445px;left:1150px;display:none;}
#intro .pocari{z-index:5;width:480px;height:280px;top:100px;left:570px;display:none;}
#intro .txt{z-index:6;width:265px;height:153px;top:200px;left:250px;display:none;}
#intro .electro{z-index:7;top:160px;margin:0px auto;display:none;}
#intro .electro .wrap{position:relative;}
#intro .electro .wrap .ele{top:120px;left:120px;z-index:8}
#intro .electro .wrap .el1{top:70px;left:20px;}
#intro .electro .wrap .el2{top:40px;left:120px;}
#intro .electro .wrap .el3{top:120px;left:90px;}
#intro .electro .wrap .el4{top:10px;left:170px;}
#intro .electro .wrap .el5{top:90px;left:180px;}
#intro .electro .wrap .el6{top:50px;left:210px;}
#intro .electro .wrap .el7{top:60px;left:270px;}

附件:下载该文件资源,减少时间成本(增值服务)