您的位置：首页 > 编程语言 > PHP开发

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

2016-08-10 10:37 267 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php js

相关文章推荐

新的分享

章节导航