欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 18:24:50
jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 实现的功能 跑马灯效果 文字自动输入 雪花飘落 鼠标点击 滑动生成雪花 背景音乐等 看效果 htm ......

jquery的浪漫

主要用到知识点:

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

    实现的功能

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

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

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

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