七夕自己写的两首小诗 -- 并用php 和 js 实现文字淡入显示

本文链接：https://blog.csdn.net/qin_jian_bo/article/details/52168974

昨天七夕，自己想了两首似诗非诗的小诗，一首送给 -- 单身贵族，一首送给 -- 成双比翼！但是昨天没有完成网页效果，真是可惜了！不过，今天完成啦！~~感觉效果还不错，其中淡入的效果参考了网上的代码！感谢：http://www.nowamagic.net/librarys/veda/detail/951

下面是我的所有源码：

供小伙伴们一起学习！

<html>
<head>
    <title>七夕主题</title>
    <style type="text/css">
        .content span{
            display: none;
        }
    </style>
</head>
<body>
    <?php
        header("Content-Type:text/html;charset=utf8");
        $poemList = array(
            'single' => array(
                'title' => '七|夕|--|致|单|身',
                'content' => '七|月|七|日|又|七|夕|，|牛|郎|织|女|鹊|桥|喜|。|单|身|的|你|别|失|意|，|明|年|七|夕|定|有|你|！',
            ),
            'double' => array(
                'title' => '七|夕|--|致|情|侣|',
                'content' => '七|月|七|日|又|七|夕|，|牛|郎|织|女|鹊|桥|喜|。|成|双|的|你|别|得|意|，|明|年|七|夕|盖|有|你|！',
            ),
        );
        // 构造内容html
        foreach($poemList as $key => $poem){
            $poem['title'] = explode('|',$poem['title']);
            $poem['content'] = explode('|',$poem['content']);
            $poemList[$key] = $poem;
        }
        foreach($poemList as $key => $poem){
            $title = '';
            $content = '';
            foreach($poem['title'] as $words){
                $title .= '<span class="words">'.$words.'</span>';
            }
            $title .= '<br/>';
            foreach($poem['content'] as $words){
                $content .= '<span class="words">'.$words.'</span>';
                if($words == '，' || $words == '。' || $words == '！'){
                    $content .= '<br/>';
                }
            }
            $content .= '<br/>';
            $poem['title'] = $title;
            $poem['content'] = $content;
            $poemList[$key] = $poem;
        }
    ?>
    <div class="content">
    <?php
    foreach($poemList as $poem){
        echo $poem['title'];
        echo $poem['content'];
    }
    ?>
    </div>
<script type="text/javascript">
    var count = 0;
    var t;
    var $spanList = document.getElementsByClassName("words");
    function show(){
        fadeIn($spanList[count],100);
        count = count + 1;
        if(count >= $spanList.length) return;
        t = setTimeout("show()",680);
    }
    var iBase = {
        SetOpacity:function(ev,v){
            ev.filters?ev.style.filter = 'alpha(opacity= '+ v +')':ev.style.opacity = v/100;
        }
    }
    /**
     * 淡入效果
     * @param elem  要有该效果的元素
     * @param speed  淡入的速度
     * @param opacity  淡入到多少
     */
    function fadeIn(elem,speed,opacity){
        speed = speed || 20;
        opacity = opacity || 100;
        elem.style.display = 'inline-block';
        elem.style.width = '40px';
        elem.style.height = '40px';

        iBase.SetOpacity(elem,0);
        var val = 0;
        (function(){
            val += 5;
            iBase.SetOpacity(elem,val);
            if(val < opacity){
                setTimeout(arguments.callee,speed);
            }
        })();

    }
    window.onload = function() {
        show();
    }
</script>
</body>
</html>

同时还在自己刚刚创建的小订阅号上发了关于这两首小诗的小文章！~~嘻嘻！~~~希望看到这里的小伙伴们帮忙关注一下这个订阅号公众号 —— 528红Bao

后期将会有红包大量来袭！~~~