<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/l-by-l.min.js"></script>
<script language="JavaScript">
//自动定义图片分辨率
function setPicSize(){
console.log("开始计算");
var screenHeight=window.screen.height;
var flag=screenHeight/8;
var picWidth=flag*3;
var picHeight=flag*4;
document.getElementById("photo").style.width=picWidth;
document.getElementById("photo").style.height=picHeight;
}
</script>
<title>XXX七夕快乐!</title>
<style type="text/css">
#showtext {
float: none;
height: 40%;
position: absolute;
z-index: 5;
width: 75%;
left: 20%;
top: 20%;
font-size: 150%;
color: #FF3;
text-indent: 2em;
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
#showphoto {
position: absolute;
z-index: 6;
left: 40%;
top: 20%;
}
#showphoto img {
display: none;
}
</style>
</head>
<body style="margin:0;background:#000" onLoad="setPicSize();">
<audio autoplay preload loop><source src="./music/background.mp3"></audio>
<script>
jQuery(document).ready(function($){
$(".word1").lbyl({
content: "朦胧的月色正浓,星光与静夜默言无声,一个人的夜,一个人的惆怅心思。隐约着怎样面对一份不确定的爱感情的抉择,陷入爱里的不能自拔的人,没有了智商,低的可怜,痴痴的,一个人一旦遇上且喜欢的人,就会痴心,傻傻的,乱了方寸,无所适从,做什么都手足无措。爱上你,总是盼望你出现,一旦有你的身影,却又胆怯不敢打扰,所以越是想接近,却想逃离,越是想逃离,越想接近,转身背过脸去,却越清晰的看见,你的影子,从各个角度,从镜子反射过来你的身影,一个人活在一个人的影子里。如果,时间可以证明一切,是不是如我想象的你,是不是爱着我,给我勇气,告诉我,让我有信心不再闪躲,好敢于面对你,和你在一起,默默的相伴,默默的欢喜。七夕节虽不能陪你度过,但伴着邓丽欣的这首《七夕》,用这种特别的方式在此祝XXX七夕快乐!",
speed: 300,
type: 'fade',
fadeSpeed: 500,
finished: function(){ //文字显示结束后调用的函数
$("#showphoto img").fadeIn(10000); //图片淡入
$(".word1") .fadeOut(5000); //文字淡出
} // Finished Callback
});
});
</script>
<!--显示文字逐个出现效果-->
<div id="showtext">
<p class="word1"></p>
</div>
<!--显示图片淡入效果-->
<div id="showphoto">
<img src="img/photo.jpg" width="480" height="640" id="photo">
</div>
<canvas width="100%" height="100%"></canvas>
<script>
var c = document.getElementsByTagName('canvas')[0];
var b = document.body;
var a = c.getContext('2d');
function d(b,c,d,e){
a.fillStyle=b;a.beginPath();
a.arc(c,d,e,0,2*m.PI,!0);a.fill();
a.fillRect(c,d,1,1)
}
m=Math;
r=m.random;
g=Date;l=+(new g);
e=document;
q=e.createElement("canvas");
w=e.createElement("canvas");
o={};
h=100;
H=200;
v=window;
t=c.width=v.innerWidth;
u=c.height=v.innerHeight-5;
b.setAttribute("style","margin:0;background:#000");
k=a;
q.width=q.height=h;
w.width=1e3;
w.height=H;
for(j=0;++j<H;){
for(i=0;1e3>++i;)
a=q.getContext("2d"),z=.5-i/h,f=j/h-.5+.4*m.sqrt(m.abs(z)),f=z*z+2*f*f,.23>f&&d(.16<f?"#F00":"#F88",i,j,0),a=w.getContext("2d"),d(j>5e-4*i*i-.3*i+h?"#343":j>4e-4*i*i-.9*i+500?"#232":"#000",i,j,0);
o[j]={x:r()*t,y:-h-r()*u,b:51-j/4,a:25+.4*j};o[H+j]={x:r()*t,y:r()*u-H,a:3*r()+1,c:j}}a=k;v.setInterval(function(){n=+(new g);a.clearRect(0,0,t,u);d("#FFA",H,250,150);d("#000",270,320,h);a.drawImage(w,0,u-H,t,H);for(i=0;++i<H;)f=(n-l)/h,s=o[H+i],d("#FFA",s.x,s.y,m.floor(m.max(s.a+m.sin(s.c++/10)-.5,1))),z=o[i],a.drawImage(q,z.x+=-.1/(z.b/h)*f,z.y+=(5-z.b/10)*f,z.a,z.a),z.y>u&&(z.y=-h),z.x<-H&&(z.x=t);l=n},60)//L<3
</script>
</body>
</html>
</div>
程序员七夕、情人节表白网页
需积分: 50 7 浏览量
2016-08-11
15:24:56
上传
评论 7
收藏 3.28MB ZIP 举报
PonyNiu
- 粉丝: 1
- 资源: 6