jquery animate 製做簡單彈幕

時間 2019-11-17

原文原文鏈接

定位滾動條css

$("html,body").animate({scrollTop:$(".middle1").offset().top},1000)html

彈幕jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>marquee</title>
    <link rel="stylesheet" href="index.css"/>
    <script src="jquery.min.js"></script>
    <script src="keyframse.js"></script>
</head>
<body>
<!--
a)scrollAmount 它表示速度，值越大速度越快。若是沒有它，默認爲6，建議設爲1～3比較好。
b)width和height表示滾動區域的大小，width是寬度，height是高度。特別是在作垂直滾動的時候，必定要設height的值。
c)direction    表示滾動的方向，默認爲從右向左：←←←。可選的值有right、down、up。滾動方向分別爲：right表示→→→，up表示↑，down表示↓。
d)scrollDelay  這也是用來控制速度的，默認爲90，值越大，速度越慢。一般scrollDelay是不須要設置的。
e)behavior     用它來控制屬性，默認爲循環滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，而後中止滾動)
-->
<div class="marquee-wrapper">
</div>
<!--$(selector).animate(styles,speed,easing,callback)-->
<div class="wrapper">
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
</div>
<div class="wrapper">
  <div class="begin-rotate">
          waiting...
  </div>
</div>
</body>
</html>

彈幕csscss3

.marquee-wrapper{width: 360px;height: 288px;margin: 0 auto;position: relative;overflow: hidden;background-image: url("bg-danmu.png");}
.marquee-piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightblue;background-color:white;text-align: center;}
.dm-phone{color: rgb(55,208,219);}
.marquee{position: absolute;left:0}
.wrapper{width: 360px;height: 288px;border: 1px solid red;margin: 0 auto;position: relative;overflow: hidden;}
.marquee-piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightgreen;text-align: center;}
.begin-rotate{width: 100px;height: 100px;line-height: 100px;text-align: center;background-color: #dadada;border-radius: 50%;border-bottom:4px solid red;border-right: 4px solid red;}
.piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightgreen;text-align: center;}

@keyframes setRight { from {right: -249px;} to {right:100%} }
@-moz-keyframes setRight { from {right: -249px;} to {right:100%} }
@-webkit-keyframes setRight /* Safari 和 Chrome */ { from {right: -249px;} to {right:100%} }
@-o-keyframes setRight /* Opera */ { from {right: -249px;} to {right:100%} }

@keyframes beginRotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);        /* IE 9 */
        -webkit-transform: rotate(0deg);    /* Safari and Chrome */
        -o-transform: rotate(0deg);        /* Opera */
        -moz-transform: rotate(0deg);    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);        /* IE 9 */
        -webkit-transform: rotate(180deg);    /* Safari and Chrome */
        -o-transform: rotate(180deg);        /* Opera */
        -moz-transform: rotate(180deg);    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);        /* IE 9 */
        -webkit-transform: rotate(360deg);    /* Safari and Chrome */
        -o-transform: rotate(360deg);        /* Opera */
        -moz-transform: rotate(360deg);    }
}
@-moz-keyframes  beginRotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);        /* IE 9 */
        -webkit-transform: rotate(0deg);    /* Safari and Chrome */
        -o-transform: rotate(0deg);        /* Opera */
        -moz-transform: rotate(0deg);    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);        /* IE 9 */
        -webkit-transform: rotate(180deg);    /* Safari and Chrome */
        -o-transform: rotate(180deg);        /* Opera */
        -moz-transform: rotate(180deg);    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);        /* IE 9 */
        -webkit-transform: rotate(360deg);    /* Safari and Chrome */
        -o-transform: rotate(360deg);        /* Opera */
        -moz-transform: rotate(360deg);    }
}
@-webkit-keyframes beginRotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);        /* IE 9 */
        -webkit-transform: rotate(0deg);    /* Safari and Chrome */
        -o-transform: rotate(0deg);        /* Opera */
        -moz-transform: rotate(0deg);    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);        /* IE 9 */
        -webkit-transform: rotate(180deg);    /* Safari and Chrome */
        -o-transform: rotate(180deg);        /* Opera */
        -moz-transform: rotate(180deg);    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);        /* IE 9 */
        -webkit-transform: rotate(360deg);    /* Safari and Chrome */
        -o-transform: rotate(360deg);        /* Opera */
        -moz-transform: rotate(360deg);    }
}
@-o-keyframes beginRotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);        /* IE 9 */
        -webkit-transform: rotate(0deg);    /* Safari and Chrome */
        -o-transform: rotate(0deg);        /* Opera */
        -moz-transform: rotate(0deg);    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);        /* IE 9 */
        -webkit-transform: rotate(180deg);    /* Safari and Chrome */
        -o-transform: rotate(180deg);        /* Opera */
        -moz-transform: rotate(180deg);    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);        /* IE 9 */
        -webkit-transform: rotate(360deg);    /* Safari and Chrome */
        -o-transform: rotate(360deg);        /* Opera */
        -moz-transform: rotate(360deg);    }
}
.piece1
{
    animation: setRight 5s linear 1s infinite ;
    /* Firefox: */
    -moz-animation: setRight 5s linear 1s infinite ;
    /* Safari 和 Chrome: */
    -webkit-animation: setRight 5s linear 1s infinite ;
    /* Opera: */
    -o-animation: setRight 5s linear 1s infinite ;
}
.begin-rotate{
    animation: beginRotate 2s linear 1s infinite ;
    /* Firefox: */
    -moz-animation: beginRotate 2s linear 1s infinite ;
    /* Safari 和 Chrome: */
    -webkit-animation: beginRotate 2s linear 1s infinite ;
    /* Opera: */
    -o-animation: beginRotate 2s linear 1s infinite ;
}

彈幕jsweb

/**
 * Created by cq on 2015/7/15.*
 */

$(function(){

    for(var i=0;i<7;i++){
        var marquee = $('<MARQUEE>')
        var marqueePiece = $('<div>')
        marqueePiece.addClass('marquee-piece')
        marqueePiece.html(items[Math.floor(Math.random()*items.length)])
        marquee.addClass('marquee')
        marquee.attr('scrollAmount',parseInt(Math.random()*8)+1)
        marquee.attr('scrollDelay',parseInt(Math.random()*80)+1)
        marquee.css('top',i * 40)
        $('.marquee-wrapper').append(marquee.append(marqueePiece))
    }

    $('.piece').each(function(ind,ele){
        $(ele).html(items[Math.floor(Math.random()*items.length)])
        $(ele).css({'position':'absolute','right':'-252px','top':ind * 40 +5})
        move(ele)
    })

})

var move = function(ele){
    $(ele).animate({right:'365px'},Math.random()*13000+2000,'linear',function(){
        $(ele).html(items[Math.floor(Math.random()*items.length)])
        $(ele).css('right','-252px')
        move(ele)
    })
}

var items = [
             "132****3333 我要買腎6",
             "132****2759 我要接媳婦",
             "135****7527 我要去旅遊",
             "155****8957 我要吃大餐",
             "188****1525 我要玩遊戲",
             "187****5734 我要蓋房子",
             "139****4537 我要大別墅",
             "131****4378 我要當大廚",
             "132****4125 我要成爲科學家",
             "135****1678 我要躺一天"
]

頁面分三個部分，app

marquee-wrapper是marquee標籤第一個wrapper 是jquery的animate實現的彈幕第二個wrapper 是css3的等待效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。