jquery的animate方法小试

最新推荐文章于 2024-09-22 11:17:00 发布

zhanghaidang

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量94

点赞数

文章标签： xhtml javascript ViewUI

今天头要做一个中间一个大图片，然后外层围一圈小图片，鼠标移动到外层的小图片时就变大，移开就还原的效果，呵呵，本来想找一个插件的，可是找了半天，没有找到合适的插件，就自己动手实现了一下，发现原来如此简单，就是hover,stop,animate三个方法的综合应用及图片的定位就行了，以下为原代码：


<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">
	body{
		font-family: "Courier New";
		font-size : 14px;
		background-attachment: fixed;
		background-image:url("images/background.png");
		background-repeat:no-repeat;
		background-position: right bottom;
	}
	img{
		position : absolute;
	}
	.outImg{
		width : 48px; 
		height : 48px;
	}
	.centerImg{
		width : 300px; 
		height : 200px;
	}
	div{
		width : 200px;
		height : auto;
	}
	div ul li {	
		list-style-type : decimal;
	}

	div ul li a:link, div ul li a:visited {
		color: #0066cc;
		text-decoration: none;
	}
	div ul li a:hover {
		color: #6699ff;
		text-decoration: underline;
	}

  </style>
<script type="text/javascript">
$(document).ready(function(){
	//内层图片的中间定位
	//首先获取文档的宽高
	var bodyWidth = $(document).width();
	var bodyHeight = $(document).height();
	//算中心点
	var cWidth = 300;
	var cHeight = 200;
	var cLeft = bodyWidth/2 - cWidth/2 - 100;
	var cTop = bodyHeight/2 - cHeight/2;

	//alert(cLeft + "," + cTop);
	//中间图片的定位
	$("#cImg").css({"margin-top":cTop, "margin-left":cLeft});

	//外层图片的定位
	var inWidth = 96; //鼠标移上来时宽
	var inHeight = 96; //鼠标移上来时高
	var outWidth = 48; //鼠标移出去时宽
	var outHeight = 48; //鼠标移出去时高

	var interval = 100; //外层图片与中间图片的间隔

	//上
	$("#oImg1").css({"margin-top":cTop - interval - outHeight/2, "margin-left":cLeft + cWidth/2 - outWidth/2});
	//下
	$("#oImg2").css({"margin-top":cTop + cHeight + interval - outHeight/2, "margin-left":cLeft + cWidth/2 - outWidth/2});
	//左1
	$("#oImg3").css({"margin-top":cTop, "margin-left":cLeft - interval - outHeight/2});
	//左2
	$("#oImg4").css({"margin-top":cTop + cHeight - outHeight, "margin-left":cLeft - interval - outHeight/2});
	//右1
	$("#oImg5").css({"margin-top":cTop, "margin-left": cLeft + cWidth + interval});
	//右2
	$("#oImg6").css({"margin-top":cTop + cHeight - outHeight, "margin-left": cLeft + cWidth + interval});

	//外层图片动画效果的实现

	$(".outImg").hover(
		function () {
			$(this).stop(true, true).animate({
				width: '+=48', 
				height: '+=48',
				marginTop : "-=24",
				marginLeft : "-=24"
			});
		},
		function () {
			$(this).stop(true, true).animate({
				width: '-=48', 
				height: '-=48',
				marginTop : "+=24",
				marginLeft : "+=24"
			});
		}
	);
});
</script>
 </head>
 <body>
	<img src="images/Penguins.jpg" id="cImg" class="centerImg"/>
	<img src="images/1.png" class="outImg" id="oImg1"/>
	<img src="images/2.png" class="outImg" id="oImg2"/>
	<img src="images/3.png" class="outImg" id="oImg3"/>
	<img src="images/4.png" class="outImg" id="oImg4"/>
	<img src="images/5.png" class="outImg" id="oImg5"/>
	<img src="images/6.png" class="outImg" id="oImg6"/>
	<div style="float:right; margin-top:20px">
		<div><h4>待办事项</h4></div>
		<div>
			[list]
				[*][url=#]待办事项1[/url]

				[*][url=#]待办事项2[/url]

				[*][url=#]待办事项3[/url]

				[*][url=#]待办事项4[/url]

				[*][url=#]待办事项5[/url]

			[/list]
		</div>
		<div><h4>已办事项</h4></div>
		<div>
			[list]
				[*][url=#]已办事项1[/url]

				[*][url=#]已办事项2[/url]

				[*][url=#]已办事项3[/url]

				[*][url=#]已办事项4[/url]

				[*][url=#]已办事项5[/url]

			[/list]
		</div>
	</div>
 </body>
</html>