整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
七夕來襲！是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意DIY？或者…無論那種形式，快來秀我們一臉吧！
文章目錄二、網站介紹
網站文件方面：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；
網頁編輯方面：可使用任意HTML編輯軟件（如：??、、 、 、、Text 、++??? 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,3D動態效果,雪花飄落等等
（3） js文件包含：頁面炫酷效果實現
三、網站效果??1.視頻演示
62-一生守護(含音樂)
2.圖片演示
四、 網站代碼HTML結構代碼
<html>
<head>
<meta charset="utf-8">
<title>關小曼，我愛你！我愿用一生的愛來守候你！title>
<meta name="keywords" content="關小曼,小可愛,小蠢貨">
<meta name="description" content="關小曼,我愛你,請原諒我的坦白,只有在你的微笑里，我才有呼吸，我才活得有朝氣,你的一眸一笑，刻畫在我心扉,我為你瘋狂，為你著迷，我想住進你的心里,感情上的事情，常常說不明白,不是不想愛，不是不去愛,怕只怕，愛也是一種傷害，愛我，你敢嗎？">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/polaroid-gallery.css"/>
<style type="text/css">body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FF62FF;
height: 100%;
overflow: hidden;
}
.content {
width: 60%;
color: #dd13ff;
height: 100%;
top: 20px;
left: 10%;
font-size: 18px;
font-weight: bolder;
line-height: 25px;
font-family: "微軟雅黑";
margin-top: 0px;
background-color: transparent;
}
@media only screen and (min-width:320px) and (max-width:600px) {
.content {
width: 80%;
color: #90F;
height: 100%;
top: 20px;
left: 10%;
font-size: 10px;
line-height: 15px;
}
}
body {
color: #FFF;
padding: 10px;
background: #FFF url(images/img/love.jpg) no-repeat fixed top center;
height: 100%;
overflow: hidden;
z-index:999;
}style>
<script src="js/jquery-1.7.1.min.js" language="javascript" type="text/javascript">script>
<script src="js/tao.js" language="javascript" type="text/javascript">script>
<script>$(document).ready(function(e) {
/*禁止右鍵和隱藏鼠標*/
$("body").bind("contextmenu", function() {
return false;
});
/*定義文字最底部顯示到哪兒*/
var guangs=[" ","|"," ","|"];
var guangBiao="/";
var guangSub=0;
var guang=setInterval("$.guang()",120);
var subs=0;
var string="關小曼 ██我愛你██請原諒我的坦白██只有在你的微笑里，我才有呼吸，我才活得有朝氣██你的一眸一笑，刻畫在我心扉██我為你瘋狂，為你著迷，我想住進你的心里██就算全世界離開你，還有一個我來陪，怎么舍得讓你受盡冷風吹██就算全世界在下雪，就算候鳥已南飛，還有我在這里，癡癡地等你歸██我真的很在乎你，所以我才神經質，默默忍受那傷悲██偶爾耍脾氣，不是我本意，其實心血滴██感情上的事情，常常說不明白██不是不想愛，不是不去愛██怕只怕，愛也是一種傷害，愛我，你敢嗎？ —————BY ZYL ";
$.intent=function(str){
str=" "+str;
//var reg=new RegExp("/█{1,2}/","i"); //創建正則RegExp對象
str=str.replace(eval("/█/gi"),"█");
return str;
}
string=$.intent(string);
var echo=setInterval("$.echo()",300);
$.guang=function(){
if(guangSub<guangs.length-1){
guangSub++;
}else{
guangSub=0;
}
guangBiao=guangs[guangSub];
$("#guang").html(guangBiao);
}
$.echo=function(){
if(subs<string.length){
$("#txt").html($("#txt").html()+$.repl(string.substr(subs,1)));
if($("#guang").offset().top > document.body.scrollHeight){
window.scrollTo(0,$("#guang").offset().top);
}
$(".des").css("bottom","0px");
subs++;
}
}
$.repl=function(str){
str=str.replace("\r\n","
");
str=str.replace("\n","
");
str=str.replace("█","
");
return str;
}
});script>
head>
<body>
<script type="text/javascript">//
var bodyBgs = [];
bodyBgs[0] = "loveme.mp3";
bodyBgs[1] = "loveme.mp3";
bodyBgs[2] = "loveme.mp3";
var randomBgIndex = Math.round( Math.random() * 2 ); document.write('');
//]]>script>
<SCRIPT LANGUAGE="JavaScript">//圖片的過程中，橫坐標的軌跡是以一點為中心的正弦曲線
//利用了setTimeout函數完成了動畫的功能
//圖片
var snowsrc="img/1.png"
//雪花個數
var no = 15;
//聲明變量，xp表示橫坐標，yp表示縱坐標>
var dx, xp, yp;
//聲明變量，am表示左右擺動的幅度，stx表示橫坐標的偏移步長，sty表示縱坐標的步長>
var am, stx, sty;
{
//獲取當前窗口的寬度
clientWidth = document.body.clientWidth;
//獲取當前窗口的高度
clientHeight = document.body.clientHeight;
}
var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var stx = new Array();
var sty = new Array();
var snowFlakes = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
//第i個圖片的橫坐標初始值
xp[i] = Math.random()*(clientWidth-50);
yp[i] = Math.random()*clientHeight;//第i個圖片的縱坐標初始值
am[i] = Math.random()*20; //第i個圖片的左右擺動的幅度
stx[i] = 0.02 + Math.random()/10; //第i個圖片y方向的步長
sty[i] = 0.7 + Math.random(); //第i個圖片y方向的步長
//生成一個容納雪花圖片的div，并設置其絕對坐標
var snowFlakeDiv = document.createElement('div');
snowFlakeDiv.setAttribute('id', 'dot'+ i);
snowFlakeDiv.style.position = 'absolute';
snowFlakeDiv.style.top = 15;
snowFlakeDiv.style.left = 15;
//生成一個雪花圖片對象，設置寬高，并加入div
var snowFlakeImg = document.createElement('img');
snowFlakeImg.setAttribute('src', snowsrc);
snowFlakeImg.style.width = 195;
snowFlakeImg.style.height = 195;
//將雪花div加入到document中，并通過數組保存
snowFlakeDiv.appendChild(snowFlakeImg);
document.body.appendChild(snowFlakeDiv);
snowFlakes[i] = snowFlakeDiv;
}
function snow() {
for (i = 0; i < no; ++ i) {
//第i個圖片的縱坐標加上步長
yp[i] += sty[i];
//如果新坐標超過了屏幕下沿，重置該圖片的信息，包括橫坐標、縱坐標以及x方向的步長和y方向的步長
if (yp[i] > clientHeight-50) {
//重新賦值圖片的橫坐標
xp[i] = Math.random()*(clientWidth-am[i]-30);
//重新賦值圖片的縱坐標
yp[i] = 0;
}
dx[i] += stx[i];//dx變量加上一個步長
//直接操作數組中對應的雪花div
var snowFlakeDiv = snowFlakes[i];
//更新圖片的縱坐標
snowFlakeDiv.style.top = yp[i];
//更新圖片的橫坐標
snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
//設定動畫刷新的時間周期
setTimeout("snow()", 10);
}
//調用snowIE()函數
snow();script>
<center>
<div align="left" class="content"><span id="txt">span><span id="guang">span>
<span>span>
div>
center>
<div id="gallery" class="fullscreen">div>
<div id="nav" class="navbar" style="display:none;">
<button id="preview">< 前一張
<button id="next">百變一下button>
div>
body>
<script type="text/javascript" src="js/polaroid-gallery.js">script>
<script>//$(document).ready(function(){
window.onload = function () {
new polaroidGallery("data/data.json");
//alert(new polaroidGallery("data/data.json").value);
};script>
<script type="text/javascript">var msg = document.title;
var titAn = function() {
msg = msg.substring(1,msg.length)+ msg.substring(0,1);
document.title = msg;
};
if (msg.length > 10) {
setInterval(function () {
titAn()
}, 500);
}script>
<script type="text/javascript">// 兩秒后模擬點擊
setInterval(function () {$('#next').click(); },1200);script>
html>
五、更多源碼
1.如果我的博客對你有幫助 ??請 “點贊” “??評論” “收藏” ??一鍵三連哦！
2.??【關注我| 獲取更多源碼】 ??帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
以上內容技術相關問題歡迎一起交流學習
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
