js动画效果（二）

如今，越来愈多的页面动效都依赖于动效插件，插件的封装和使用，大大减少了前端人员实现动效的时间和经历，提高了效率。如今，页面中使用到的大多都是常见的动效，有些动效，由于不常用，只有在特定的页面才会使用到，比如抽奖效果等。因此，在此和大家分享两个动效，第一个是向上的轮播，只是，这一个轮播和图片轮播不同，是类似公告栏的轮播。这样的轮播，当每一行的背景颜色相同时的实现很容易，但如果是隔行变色的布局，会由于视觉差的原因导致效果不能达到预想的效果，故而，为大家提供了两种js书写方式，第一种的可通用的，另一种是仅仅针对于同色的情况。另一个动效则是转盘抽奖动效。
纯css+marginTop仿通知向上滚动动画效果：
css:

*{
    padding:0;
    margin:0;
}
ul li{
    list-style:none;
}
.main{
    width:500px;
    height:100px;
    border:1px solid blue;
    overflow:hidden;
}
.main>ul{
    width:100%;
    height:auto;
}
.main>ul>li{
    width:100%;
    height:30px;
    line-height:30px;
    background:yellow;
}
.main>ul>li:nth-child(2n+1){
    background:skyblue;
    color:#fff;
}

html:

<div class="main" id="main">
    <ul>
        <li><p>1111111111111</p><li>
        <li><p>2222222222222</p><li>
        <li><p>3333333333333</p><li>
        <li><p>4444444444444</p><li>
        <li><p>5555555555555</p><li>
        <li><p>6666666666666</p><li>
        <li><p>7777777777777</p><li>
        <li><p>8888888888888</p><li>
    </ul>
</div>

（隔行变色、同色通用）js:

<script>
    var $this = $("#main");
    var scrollTimer;
    $this.hover(function() {
            clearInterval(scrollTimer);
        }, function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
        }, 2000);
    }).trigger("mouseleave");

    function scrollNews(obj) {
        var $self = obj.find("ul");
        var lineHeight = $self.find("li:first").height();
        $self.animate({
            "marginTop": (Number($self.css('marginTop').split('px')[0]) - lineHeight) + "px"
            }, 600, function() {
                if( Math.abs(Number($self.css('marginTop').split('px')[0])) === lineHeight*2){
                    $self.find("li:first").appendTo($self)
                    $self.find("li:first").appendTo($self)
                    $self.css({
                        marginTop: 0
                    })
                }
        })
    }
</script>

（仅同色）js：

  var $this = $("#main");
  var scrollTimer;
  $this.hover(function() {
  clearInterval(scrollTimer);
  }, function() {
  scrollTimer = setInterval(function() {
  scrollNews($this);
  }, 2000);
  }).trigger("mouseleave");

  function scrollNews(obj) {
    var $self = obj.find("ul");
    var lineHeight = $self.find("li:first").height();
    $self.animate({
        "marginTop": -lineHeight + "px"
        }, 600, function() {
        $self.css({
        marginTop: 0
        }).find("li:first").appendTo($self);
    })
  }

转盘抽奖：
css:

*{
padding:0;
    margin:0;
}
ul li{
    list-style:none;
}
.main{
    width:500px;
    height:500px;
    overflow:hidden;
    margin:100px auto;
    background:skyblue;
}
.main>ul{
    width:340px;
    height:360px;
    margin:80px auto;
}
.main>ul>li{
    width:100px;
    height:100px;
    float:left;
    border-radius:10px;
    background:#fff;
    margin-bottom:20px;
}
.main>ul>li.middle_li{
    margin:0 20px;
}
.main>ul>li>img{
    width:100%;
    height:100%;
}
.main>ul>li.start_btn{
    background:transparent;
}
.main>ul>li.active{
    background:yellow;
}

html:

<div class="main" id="main">
    <ul id="gif_ul">
        <li class="gif_li gif_li_0">
            <img src="1.png" alt=""/>
        </li>
        <li class="gif_li gif_li_1 middle_li">
            <img src="2.png" alt=""/>
        </li>
        <li class="gif_li gif_li_2">
            <img src="3.png" alt=""/>
        </li>
        <li class="gif_li gif_li_7">
            <img src="4.png" alt=""/>
        </li>
        <li class="middle_li start_btn" id="start">
            <img src="start.png" alt=""/>
        </li>
        <li class="gif_li gif_li_3">
            <img src="6.png" alt=""/>
        </li>
        <li class="gif_li gif_li_6">
            <img src="7.png" alt=""/>
        </li>
        <li class="gif_li gif_li_5 middle_li">
            <img src="8.png" alt=""/>
        </li>
        <li class="gif_li gif_li_4">
            <img src="9.png" alt=""/>
        </li>
    </ul>
</div>

js：

    var lottery={
    index:-1,    //当前转动到哪个位置，起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID，用clearTimeout清除
    speed:100,    //初始转动速度
    times:0,    //转动次数
    cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize:-1,    //中奖位置
    init:function(id){
        if($("#"+id).find(".gif_li").length>0){
            $lottery = $("#"+id);
            $units = $lottery.find(".gif_li");
            this.obj = $lottery;
            this.count = $units.length+1;
            $lottery.find(".gif_li_"+this.index).addClass("active");
        }
    },
    roll:function(){
        var index=this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find(".gif_li_"+index).removeClass("active");
        index += 1;
        if (index>count-1) {
            index = 0;
        };
        $(lottery).find(".gif_li_"+index).addClass("active");
        this.index=index;
        return false;
    },
    stop:function(index){
        this.prize=index;
        return false;
    }
}

function roll(){
    lottery.times += 1;
    lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
        clearTimeout(lottery.timer);
        lottery.prize=-1;
        lottery.times=0;
        click=false;
    }else{
        if (lottery.times<lottery.cycle) {
            lottery.speed -= 10;
        }else if(lottery.times==lottery.cycle) {
            var index = Math.random()*(lottery.count)|0;//中奖物品位置为随机数
            lottery.prize = index;        
        }else{
            if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                lottery.speed += 110;
            }else{
                lottery.speed += 20;
            }
        }
        if (lottery.speed<40) {
            lottery.speed=40;
        };

        lottery.timer = setTimeout(roll,lottery.speed);//循环调用
    }
    return false;
}
var click=false;

//转盘开始
function start(){
    if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
        return false;
    }else{
        lottery.speed=200;
        roll();    //转圈过程不响应click事件，会将click置为false
        click=true; //一次抽奖完成后，设置click为true，可继续抽奖
        return false;
    }
}

window.onload=function(){
    lottery.init('gif_ul');
    $("#start").unbind().bind("click",function(){
        start();
    })
}

js动画效果（二）

猜你喜欢