寫在前面：本人本科應屆生，最近做了個小作品，下面將詳細介紹實現過程。希望能夠幫助自己找個適合自己的工作。
本作品訪問地址：http://www.yestz.com/wawj/index.html
一、站點所涉及技術：Photoshop，XHTML，DIV+CSS，JavaScript，jQuery，jQueryUI。
二、小亮點：
1、基本解決了個主流瀏覽器的兼容性問題，IE6、IE7、IE8、IE9、FireFox、Chrome測試通過。
2、使用JavaScript（jQuery）增強動態效果，使整個頁面的布局更具交互性，界面更加友好。
三、部分功能實現
1、自定義導航欄實現，如圖：
主要代碼：
$(".main_top a").mouseenter(function(){
var div=$(this);
$(div).find("img").animate({opacity:0.5},50);
$(div).find("img").animate({ width: "145px", height: "65px" });
});
$(".main_top a").mouseout(function(){
var div=$(this);
$(div).find("img").animate({opacity:1},50);
$(div).find("img").animate({ width: "130px", height: "56px" });
});
2、登錄窗口實現，如圖：
主要代碼：
//初始化登錄窗口
$(".login_div").dialog({
autoOpen: false,
modal:true,
buttons: {
"取消": function() {
$(this).dialog("close");
},
"登錄": function() {
$(this).dialog("close");
//檢驗登錄是否成功
}
}
});
//登錄
$(".loginBtn").click(function(){
$(".login_div").dialog('open');
return false;
});
3、答題種花功能實現：
此功能主要面向幼兒園小朋友和小學生，利用答對一道題目，可以選擇一種自己喜歡的花，然后種在右邊的草地上。從而增加答題的興趣。
主要使用jQuery實現。具體實現如下：
隱藏字段：
<input type="hidden" id="isHadAnswered" value="false" />
<input type="hidden" id="answer" value="" />
javascript與jQuery：
//初始化一個新題目
$(".question_sub").text(newQuestion());
$(".yes_result").hide();
$(".state span").text("");
$(".result").val("");
$("#isHadAnswered").val("false");
//實現答題種花
$("#submit").click(function(){
//獲取隱藏字段的值
var value=$("#isHadAnswered").val();
//按下交卷
if(value=="false"){
$("#submit").val("下一題");
$(".result").attr("readonly","readonly");
if($(".result").val()==$("#answer").val())
{
$(".state span").text("恭喜你，答對了");
$(".yes_result").show("slow");
}else
{
$(".state span").text("很遺憾，答錯了，再接再厲！");
$(".yes_result").hide();
}
$("#isHadAnswered").val("true");
}else{
//按下下一題
$("#submit").val("交卷");
$(".result").attr("readonly","");
$(".result").val("");
$(".question_sub").text(newQuestion());
$("#isHadAnswered").val("false");
}
});
//按下獎勵的花朵
$(".select_fl img").click(function(){
var img="<img src='"+$(this).attr("src")+"' />" ;
$(".flower").append(img);
$(".yes_result").hide();
});
});
function newQuestion()
{
var x=parseInt(Math.random() *99);
var y=parseInt(Math.random() *99);
var mark=new Array();
mark[0]="+";
mark[1]="-";
mark[2]="×";
mark[3]="÷";
var sign=parseInt(Math.random() *mark.length);
//除號，保證x能整除y
while(sign==3){
//符合整除條件
if(x%y==0){
break;
}else{
sign=parseInt(Math.random() *mark.length);
}
}
var answer;
//加
if(sign==0){
answer=x+y;
}
//減
else if(sign==1){
answer=x-y;
}
//乘
else if(sign==2){
answer=x*y;
}
//除
else{
answer=x/y;
}
$("#answer").val(answer);
return x+mark[sign]+y+"=?";
}
下面通過截圖說明問題：
a、答對題目
b、選中喜歡的花
c、繼續答對題目則可以繼續種花，花種多了就這樣：
4、其他頁面展示：
a、家長：
b、快速注冊
c、聯系我們
5、平時積累的頁面元素
注：以下動態效果請到站點直接測試 http://www.yestz.com/wawj/index.html
a、廣告欄實現
/*首頁廣告效果*/
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止動畫，滑出開始動畫.
$('.ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index)
index++;
if(index==len){index=0;}
} , 3000);
}).trigger("mouseleave");
})
// 通過控制top ，來顯示不同的幻燈片
function showImg(index){
var adHeight = $(".header_right .ad").height();
$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
效果如下：
b、超炫的導航欄1
源代碼有點多，在這里只貼出實現方法，如需要此效果，請到站點下載 jquery.kwicks.1.5.1.js 文件。
//實現導航欄
$('.kwicks').kwicks({
max : 220,
spacing : 5
});
效果圖：
c、超炫的導航欄2
實現代碼：
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link's address) */
e.preventDefault();
})
效果圖：
寫在結束：本人是12屆應屆生，本科，希望能在上海找到一份適合自己的工作，職位：網頁設計師，本人現住在浦東新區，希望各位園友可以推薦一下，十分感謝。
聯系我：
QQ:2300750243
Email:gabby1990@126.com