程序员七夕、情人节表白网页_给女朋友做的漂亮页面资源-CSDN下载

共10个文件

js：3个

html：1个

woff：1个

需积分: 50 19 浏览量 2016-08-11 15:24:56 上传评论 7 收藏 3.28MB ZIP 举报

【程序员七夕、情人节表白网页】是一个专门为程序员设计的HTML5网页动画项目，旨在帮助他们在特殊的节日如七夕和情人节向心爱的人表达情感。这个项目利用了互联网上的开源资源，集成了丰富的互动元素和个性化功能，使得程序员可以轻松进行二次开发和定制。在HTML5技术的支持下，这个表白网页具有以下核心知识点： 1. HTML结构：网页的基础是HTML（HyperText Markup Language）代码，用于定义页面内容和结构。在这个项目中，HTML标签如`<header>`、`<section>`、`<article>`和`<footer>`被用来组织页面布局，同时可能包含`<img>`标签用于加载图片，`<audio>`或`<video>`标签用于播放音频和视频效果。 2. CSS3样式：为了实现动画效果和视觉美观，CSS3（Cascading Style Sheets）被广泛应用。这包括选择器、布局模式（如Flexbox或Grid）、过渡（transition）、动画（animation）以及自定义字体和颜色方案。 3. JavaScript交互：JavaScript是实现网页动态功能的关键。在这个表白网页中，可能使用了JavaScript来控制动画的播放、响应用户输入（如点击按钮）、更换图片和语言等。可能涉及到DOM（Document Object Model）操作，事件监听和AJAX异步数据交换等技术。 4. 图片和语言切换：为了让用户能根据自己的喜好更改表白内容，项目提供了更换图片和语言的功能。这可能通过JavaScript动态修改DOM元素的属性，或者通过JSON等数据格式存储多种语言版本，并根据用户选择加载相应内容。 5. 响应式设计：考虑到用户可能在不同设备上浏览网页，项目可能采用了响应式设计，确保在手机、平板电脑和桌面电脑上都有良好的显示效果。这通常通过媒体查询（media queries）和百分比布局来实现。 6. 开源资源利用：为了快速开发和提升用户体验，项目可能整合了各种开源库和框架，如jQuery、Animate.css或Bootstrap。这些工具提供了预设的动画效果、UI组件和跨浏览器兼容性解决方案。 7. 文件组织：压缩包中的"happyqixi"很可能包含了所有网页相关的文件，如HTML、CSS、JavaScript、图片和音视频资源。合理的文件组织结构有助于项目的管理和维护，例如，将相同类型的文件放在同一文件夹下。这个"程序员七夕、情人节表白网页"项目融合了前端开发的多项核心技术，包括HTML5结构、CSS3样式、JavaScript交互以及响应式设计。它展示了程序员如何利用现有资源，结合编程技能，创作出富有创意和个性化的表达方式。通过学习和理解这些知识点，程序员不仅可以制作出独特的表白网页，还能进一步提升自身的Web开发能力。

资源推荐

资源详情

资源评论

收起资源包目录

happyqixi.zip （10个子文件）

happyqixi

index.html 4KB

img

photo.jpg 431KB

l-by-l.min.js 602B

jquery-1.11.0.min.js 94KB

l-byl.js 1KB

music

background.mp3 2.91MB

fonts

icomoon.woff 1KB

icomoon.ttf 1KB

icomoon.svg 2KB

icomoon.eot 2KB

<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>

评论收藏

内容反馈