网页制作小作品——我爱我家

写在前面：本人本科应届生，最近做了个小作品，下面将详细介绍实现过程。希望能够帮助自己找个适合自己的工作。

本作品访问地址：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