JQuery练手

piperzero

浏览: 3465907 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

有空的时候敲的Jquery小例子，通过点击图片上的不同部分，可以改变怪兽拼图。

先上效果图：在网页上点击怪兽的面部可以换团，然后组成不同的图像。

这是点击之后的图像。

这是头部图片，每点击一次显示头部的不同部分：

实现这个例子主要用了Jquery的animate方法，自定义变化，方法有两个参数，第一个参数为要变化到的样式，第二个参数为发生变化整个过程所用的时间。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Monster Mash</title>
		<link type="text/css" href="styles/my_style.css" rel="stylesheet">
	</head>
	<body>
		<header id="top">
			<!--定义标题及标题图片-->
			<img id="text_top" src="images/Monster_Mashup.png" />
			<p>Make your own monster face by clicking on the picture.</p>
		</header>

		<div id="container">
			<!--背景图片：闪电，用Jquery的fadeIn和fadeOut属性，设置淡入淡出效果，模拟真的闪电
			三张闪电图片，每张不一样-->
			<img class="lightning" id="lightning1" src='images/lightning-01.jpg' />
			<img class="lightning" id="lightning2" src='images/lightning-02.jpg' />
			<img class="lightning" id="lightning3" src='images/lightning-03.jpg' />
			<!--怪兽脸部的框架-->
			<div id="frame">
				<div id="pic_box">
					<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
					<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
					<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
					<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
				</div>
			</div>
		</div>
		<!--调用Js的库-->
		<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
		<!--调用JS代码-->
		<script type="text/javascript" src="scripts/my_scripts.js"></script>
	</body>
</html>

CSS代码

body{
	background-color:#000000;
}

p{
	/* 设置段落颜色，字体种类，字体大小*/	
	color:#33FF66;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}

#text_top {
	/*定义标题图片样式：相对定位 */
	position:relative;
	z-index: 4;
}

#top {
	/*定义标题样式，绝对定位*/
	position:absolute;
	left:191px;
	top:15px;
	z-index: 4;
}

#container{
	position:absolute;
	left:0px;
	top:0px;
	z-index: 0;
}

.lightning{
	/*闪电样式，开始闪电是隐藏的display属性为none*/
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	z-index: 0;
}

#frame {
	/*定义怪兽脸外部的相框*/
	position:absolute;
	left:100px;
	top:100px;
	width:545px;
	height:629px;
	background-image:url(../images/frame.png);
	z-index: 3;
	overflow: hidden;
}

#pic_box{
	/*脸部整体的样式*/
	position:relative; 
	left:91px; 
	top:84px; 
	width:367px; 
	height:460px; 
	z-index: 2;
	/*超出这个框的部分隐藏*/
	overflow: hidden;
}

.face{
	position:relative;
	left:0px;
	top:0px;	
	z-index: 1;
}

#head{
	height:172px;
}

#eyes{
	height:79px; 
}

#nose{
	height:86px; 
}

#mouth{
	height:117px; 
}

JS代码

$(document).ready(function(){

var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;//设置怪兽头部点击次数
		//调用闪电出现和隐藏的函数
		lightning_one();
		lightning_two();
		lightning_three();
	
	  $("#head").click(function(){		
	  //如果脑门点击的次数小于9
		if (headclix < 9){
		//每点击一次，向左移动367px
		//此处主要用到了animate方法，animate可以理解为自定义变化，第一个属性为从当前样式要变化成的样式，第二个为变化过程时间
	$("#head").animate({left:"-=367px"},500);
		//点击次数加一
		headclix+=1;
		}
		else{
			$("#head").animate({left:"0px"},500);
			headclix = 0;
		}
	
	});
	
	
	$("#eyes").click(function(){
	
		if (eyeclix < 9){
		$("#eyes").animate({left:"-=367px"},500);
			eyeclix+=1;
		}
		else{
			$("#eyes").animate({left:"0px"},500);
			eyeclix = 0;
		}
	});
	
	
	$("#nose").click(function(){
		if (noseclix < 9){
	$("#nose").animate({left:"-=367px"},500);
		noseclix+=1;
		}
		else{
			$("#nose").animate({left:"0px"},500);
			noseclix = 0;
		}
	});//end click
	
	 $("#mouth").click(function(){
	
	if (mouthclix < 9){
	$("#mouth").animate({left:"-=367px"},500);
		mouthclix+=1;
		}
		else{
			$("#mouth").animate({left:"0px"},500);
			mouthclix = 0;
		}
	
	});
	


});//end doc.onready function

//设置闪电的出现和隐藏，以及多长时间出现一次
function lightning_one(){
	//设置fadeIn和fadeOut的完成时间为250毫秒
	$("#container #lightning1").fadeIn(250).fadeOut(250);
	//每4秒钟重复一次
	setTimeout("lightning_one()",4000);
};

function lightning_two(){
	//设置fadeIn和fadeOut的完成时间为fast(此处既可以用毫秒，用可以用fast，normal，slow关键字，normal大概相当于400毫秒)
	$("#container #lightning2").fadeIn("fast").fadeOut("fast");
	setTimeout("lightning_two()",5000);
};

function lightning_three(){
	$("#container #lightning3").fadeIn("fast").fadeOut("fast");
	setTimeout("lightning_three()",7000);
};

分享到：