jquery的浪漫

主要用到知识点：

• 鼠标事件onmousedown() onmousemove() onmouseup()
• jquery的运用，对dom元素的增删改查
• css3 3d 功能的灵活运用

实现的功能

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

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');

            })

        })

    }

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