当前位置： 移动技术网 > IT编程>网页制作>Html5 > jquery的浪漫(跑马灯 + 雪花飘落)

jquery的浪漫(跑马灯 + 雪花飘落)

2019年05月06日  | 移动技术网IT编程  | 我要评论

jquery的浪漫

主要用到知识点：

  • 鼠标事件onmousedown() onmousemove() onmouseup()
  • jquery的运用，对dom元素的增删改查

  • css3 3d 功能的灵活运用

    实现的功能

  • 跑马灯效果 文字自动输入 雪花飘落 鼠标点击 滑动生成雪花 背景音乐等

  • 看效果

alt

html：

   <div class="text">
        <marquee behavior="alternate">时光不老，我们不散</marquee>
    </div>
    <div class="box">
        <div class="pic">
            <ul>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="text1"></div>
    <audio 
        src="http://www.170mv.com/kw/other.web.rh01.sycdn.kuwo.cn/resource/n1/59/88/1388628737.mp3" 
        autoplay
        loop
    ></audio>

css：

    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,body{
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
    }
    .wraper{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
    }
    .text,.text1{
        width:500px;
        margin: 0 auto;
        color: #fff;
        font-size: 30px;
    }
    .text1{
        color: rgba(19, 128, 230, 0.849);
    }
    .box{
        width: 500px;
        height: 300px;
        margin: 150px auto;
        perspective: 800px;
        perspective-origin: 50% 50%;
    }
    .box .pic{
        width: 500px;
        height: 300px;
        transform-style: preserve-3d;
        animation: play 10s linear infinite;
        position: relative;
    }
    .pic ul li{
        border-radius: 5px;
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        transition: transform 0.2s ease-in;
    }
    .pic ul li img{
        width:100%;
        height:100%;
    }
    .pic ul li:nth-child(1){
        transform: rotatey(0deg) translatez(150px);
    }
    .pic ul li:nth-child(2){
        transform: rotatey(90deg) translatez(150px);
    }
    .pic ul li:nth-child(3){
        transform: rotatey(180deg) translatez(150px);
    }
    .pic ul li:nth-child(4){
        transform: rotatey(270deg) translatez(150px);
    }
    .pic ul li:nth-child(5){
        transform: rotatex(90deg) translatez(150px);
    }
    .pic ul li:nth-child(6){
        transform: rotatex(-90deg) translatez(150px);
    }

    .box:hover .pic ul li:nth-child(1){
        transform: rotatey(0deg) translatez(250px);
    }
    .box:hover .pic ul li:nth-child(2){
        transform: rotatey(90deg) translatez(250px);
    }
    .box:hover .pic ul li:nth-child(3){
        transform: rotatey(180deg) translatez(250px);
    }
    .box:hover .pic ul li:nth-child(4){
        transform: rotatey(270deg) translatez(250px);
    }
    .box:hover .pic ul li:nth-child(5){
        transform: rotatex(90deg) translatez(250px);
    }
    .box:hover .pic ul li:nth-child(6){
        transform: rotatex(-90deg) translatez(250px);
    }
    @keyframes play{
        0%{
            transform:rotatex(0deg) rotatey(0deg);
        }
        100%{
            transform: rotatex(360deg) rotatey(360deg);
        }
    }

js：

    var text = document.getelementsbyclassname('text1')[0];
    window.onload = function(){
        var str = '悠悠岁月之间我心永远不变，纵使沧海桑天爱你至到永远，我不在乎昨天更无所谓明天，抛开世间一切，唯独对你的思念一生一世海枯石烂！'
        var i = 0;
        var timer = setinterval(function(){
            text.innerhtml +=str.charat(i);
            i++;
            if(i >str.length){
                i = 0;
                text.innerhtml = ''
            }
        },150)
    //雪花效果  
        var xh = '❉'
        var minsize = 5;
        var maxsize = 50;
        var time = 100;
        var color = "#fff";
        var boxw = $(window).width();
        var boxh = document.body.clientheight;
        var div = $('<div></div>').css({
            'position':'absolute',
            'top':'0px'
        }).html(xh);
        var timer1 = setinterval(function(){
            var size = math.random()*maxsize + minsize;
            var left = math.random()*boxw;
            var opacity = math.random()*0.8 + 0.3;
            var endleft = math.random() * boxw;
            var endtop = boxh - 100;
            var speed = math.random()*7000 + 3000;
            div.clone().appendto($('body')).css({
                'left':left,
                'font-size':size,
                'opacity':opacity,
                'color':color
            }).animate({
                'top':endtop,
                'left':endleft,
                'opacity':'0.1'
            }, speed,function(){
                $(this).remove();
            })
        },time)
        function cursor(e){
            e.preventdefault();
            e.stoppropagation();
            var size = math.random() * maxsize + minsize;
            var left = e.pagex - size / 2;
            var top = e.pagey - size / 2;
            var opacity = math.random() * 0.8 + 0.3;
            var endleft = math.random() * boxw;
            var endtop = boxh - 100;
            var speed = math.random() * 7000 + 3000;
            div.clone().appendto($('body')).css({
                'left': left,
                'top': top,
                'font-size': size,
                'opacity': opacity,
                'color': color,
                'z-index':'100'
            }).animate({
                'top': endtop,
                'left': endleft,
                'opacity': '0.1'
            }, speed, function () {
                $(this).remove();
            })
        }
        $('body').on('mousedown',function(e){
            cursor(e);
            $(document).on('mousemove',function(ev){
                cursor(ev);
            })
            $(document).on('mouseup',function(){
                $(document).off('mousemove').off('mousedown');
            })
        })
    }

参考自：腾讯课堂渡一教育

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网