Scroll Manual

by darkk6

HTML

<link rel="stylesheet" href="http://stu96.nknu.edu.tw/~d9671022/A/start/jquery-ui-1.8.14.custom.css">
<div style="float:left;width:80%">
    <center>
        <table id="questionArea" style="width:50%">
            <tr>
                <td>
                    <div class="questionContent shadowRadius" id="test">
                        <div id="content">
                            有兩個太太在聊天，一個是甲，另一個是乙<br>
                            <br>
                            甲：「你的三個女兒今年幾歲阿？」<br>
                            乙：「他們的年齡相乘為36」<br>
                            甲：「資訊不足」<br>
                            乙：「他們年齡的和是我們大學同住時的房間號碼」<br>
                            甲：「還是不夠」<br>
                            乙：「我最大的一個女兒眼睛是藍色的」<br>
                            甲：「嗯，我知道了」<br>
                            <br>
                            請問：<br>
                            1.他們大學時的房間號碼是幾號？<br>
                            2.乙三個女兒的年齡分別是多少？<br>
                        </div>
                    </div>
                </td>
                <td><div id="slider"></div></td>
            </tr>
            <tr>
                <td><div id="timeLimit"></div></td>
                <td></td>
            </tr>
        </table>
        
        <hr>
        <table border=0 width=50% height=100>
            <tr>
                <td class="answerTable"><div id="ans1" class="shadowRadius answer">1. 女兒和我一樣大才 Fashion</div></td>
                <td class="answerTable"><div id="ans2" class="shadowRadius answer">2. 一定 iPad 溫開水</div></td>
            </tr>
            <tr>
                <td class="answerTable"><div id="ans3" class="shadowRadius answer">3. 整個場面我 Hold 住</div></td>
                <td class="answerTable"><div id="ans4" class="shadowRadius answer">4. 一個 Move 拿出女兒的出生證明</div></td>
            </tr>
        </table>
        
    </center>
</div>
<div style="float:right;width:20%">
    <!-- 分數表 -->
    <div class="score scoreNext" id="lv15">1000000</div>
    <div class="score scoreNext"...

CSS

body{
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

div#content{position:relative;top:20px;left:0px;padding:10px;}

div.questionContent{
    text-align:left;
    background-color:#9FE0FE;
    width:100%;
    height:200px;
    overflow:hidden;
}

div.shadowRadius{
    -webkit-box-shadow: 3px 3px 4px #0F0F0F;
    -webkit-border-radius: 5px;
    
    -khtml-box-shadow: 3px 3px 4px #0F0F0F;
    -khtml-border-radius: 5px;
    
    -moz-box-shadow: 3px 3px 4px #0F0F0F;
    -moz-border-radius: 5px;
    
    box-shadow: 3px 3px 4px #0F0F0F;
    border-radius: 5px;
}

div.answer{
    width:100%;
    height:50px;
    background-color:#80FF80;
}

div.answerHover{
    width:100%;
    height:50px;
    background-color:#FFFF80;
}

div#timeLimit{
    width:100%;
    height:20px;
}

td.answerTable{
    Padding: 5px;
    width:50%;
}

div.score{
    border:1px solid #000000;
    text-align:center;
    
    width:100px;
    height:20px;
}

div.scoreNow{background-color:#80FF80}
div.scorePass{background-color:#FFFF80}
div.scoreNext{background-color:#9FE0FE}

table#questionArea tr td{
    padding:5px;
}

div#slider{
    height:150px;
}

JavaScript

var timeLimit = 40,
    alertTime = 10;
var times = timeLimit;
var currentLevel = 1;

$(document).ready(function() {
    //不能選取文字 for IE
    $("body").get(0).onselectstart = function() {
        return false;
    };

    flashLevel("#FFFF80");

    //取得 div content 高度 , -150 : 能看完就好，減去 div.questionContent 的高度(fixed)
    var height = ($("div#content").css("height").replace("px", "")) - 150;
    $("div#slider").slider({
        orientation: "vertical",
        min: 0,
        max: height,
        value: height,
        animate: true,
        slide: function(event, ui) {
            var t = (height - ui.value) * -1;
            console.log(t);
            $("div#content").css("top", t);
        }
    });


    $("div#timeLimit").progressbar({
        value: 100
    });

    setInterval(countDown, 1000);


    $("div.answer").mouseenter(function() {
        $(this).toggleClass("answerHover answer");
    });
    $("div.answer").mouseleave(function() {
        $(this).toggleClass("answerHover answer");
    });

    for (var i = 1; i < 4; i++)
    $("div#ans" + i).click(function() {
        animateResult(false, 2);
    });
    //正確答案
    $("div#ans4").click(function() {
        animateResult(true, 2);
    });

});

function countDown() {
    times--;
    if (times < 0) {
        times = timeLimit;
        $("div#test").animate({
            backgroundColor: "#9FE0FE",
            color: "#000000",
        }, 1000);
        //更換題目
/*
                $.post("themeReader.php",{num:0},function(data){
                    $("div#test").html(data['content']);
                    $("div#ans1").html(data['a1']);
                    $("div#ans2").html(data['a2']);
                    $("div#ans3").html(data['a3']);
                    $("div#ans4").html(data['a4']);
                },"json");
                */
    }
    else if (times <= alertTime) {
        $("div#test").animate({
            backgroundColor: "#DD0000",
            color: "#FFFFFF",
        }, 1000);
    }
   ...