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

来源：互联网发布：怎么看手机mac地址编辑：程序博客网时间：2024/05/03 10:44

昨天七夕，自己想了两首似诗非诗的小诗，一首送给 -- 单身贵族，一首送给 -- 成双比翼！但是昨天没有完成网页效果，真是可惜了！不过，今天完成啦！~~感觉效果还不错，其中淡入的效果参考了网上的代码！感谢：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

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

0 0