有空的时候敲的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);
};