Codingjquery抽奖程序

var runTime;//定时器
var runStart=0;//色块位置
var runSpeed=60;//速度
var tt=1;//曲线运动当前时间
var chouLength=10;//奖品数量
var is_stop = 0;
var run_stop;//定时器2
$(function(){
    $("#chou-btn").click(function(){
        {if $_userid}
        suiji=$.ajax({url:"...",async:false,cache:false});
        suiji=suiji.responseText;
        $("#iframebg").show();
        runRotate(runStart);
        window.setTimeout(stopRotate(suiji),1000);
        check();
        {else}
        alert("您还未登录,请登录后再进行抽奖。");
        {/if}
    })
})

//检查
function check() {
    window.clearInterval(run_stop);
    if (is_stop == 1) {
        check_stop();
    } else {
        run_stop = setInterval(function(){check();},500);
    }
}

//开始旋转
function runRotate(i){
    clearInterval(runTime);
    $("#chou-lumps li").eq(i).addClass("current").siblings().removeClass("current");
    if(runStart<chouLength){
        runStart++;
    }else{
        runStart=0;
    }
    runTime=setInterval(function(){
        runRotate(runStart);
    },runSpeed);
}
//停止旋转
function stopRotate(i){
    clearInterval(runTime);
    var cur=$("#chou-lumps li").index($("#chou-lumps li.current")[0]);
    var index=i-cur+33;
    var next=cur;
    if(next==chouLength){next=0;}
    easeOutQuad(index,next);
}
//减速旋转
function easeOutQuad(index,cur) {
    clearInterval(runTime);
    $("#chou-lumps li").eq(cur).addClass("current").siblings().removeClass("current");
    if(runStart<10){
        runStart++;
    }else{
        runStart=0;
    }
    index--;
    if(index!=0){
        tt++;
        runTime=setInterval(function(){
            easeOutQuad(index,runStart);
        },easeOut(tt,60,120,25));
    }else{
        runSpeed=60;
        tt=1;
        $("#iframebg").hide();
        is_stop=1;
    }
}
//曲线算法,减速值
function easeOut(t,b,c,d){
    return c*(t/=d)*t*t + b;
}
//判断是否停止
function check_stop() {
    var jiangpin = parseInt(suiji) + 1 ;
    alert("您抽到了第" + jiangpin + "个奖品!");
    window.location.href="..."+suiji;
}

Codingjavascript动画返回页面顶部

一个返回顶部代码是很有用的,下面代码实现该功能。

<script type="text/javascript">
$(document).ready(function() { 
    $('#active_backtop').click(function(){ 
        $('html').animate({scrollTop:0}, 'slow');          <!--兼容除IE6和Webkit内核浏览器-->
        $(document).scrollTop(0);                          <!--兼容Webkit内核浏览器-->
    })
});
</script>

CodingjQuery选项卡切换

该代码通过jQuery实现了选项卡切换效果,很小巧,效果也很简单,但是一般来用足矣。

<script type="text/javascript">$(document).ready(function(){
        $(".tab_news li").each(function(){
            $(this).mouseover(function(){
                $(".tab").css("display","none");
                id_name = $(this).attr("id");
                id_len = id_name.length;
                id = id_name.substr(id_len-1,1);
                $("#tab"+id).css("display","block");
            });
        });
    });</script>
<div style="width:500px;height:30px;">
    <ul class="tab_news">
        <li id="tab_1">1</li>
        <li id="tab_2">2</li>
        <li id="tab_3">3</li>
    </ul>
</div>
<div class="tab" id="tab1" style="width:500px;height:200px;display:block;">
    111
</div>
<div class="tab" id="tab2" style="width:500px;height:200px;display:none;">
    222
</div>
<div class="tab" id="tab3" style="width:500px;height:200px;display:none;">
    333
</div>