2016/02/19 codes
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
h1{text-align: center;}
p1{text-align: center;}
*{ margin:0; padding:0; list-style:none;}
#box{ border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ width:200px; height:200px; float:left; padding:5px;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var aLi=oUl.children;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){
var l=oUl.offsetLeft-10;
if(l<=-oUl.offsetWidth/2){
l=0;
}
oUl.style.left=l+'px';
},75);
};
</script>
</head>
<body>
<h1>L sir,Welcome to my world!</h1>
<p1>
这是你的表情包。
</p1>
<div id="box">
<ul>
<li><img src="3.jpg" width="200"></li>
<li><img src="4.jpg" width="200"></li>
<li><img src="5.jpg" width="200"></li>
<li><img src="6.jpg" width="200"></li>
<li><img src="7.jpg" width="200"></li>
<li><img src="8.jpg" width="200"></li>
<li><img src="9.jpg" width="200"></li>
<li><img src="10.jpg" width="200"></li>
<li><img src="11.jpg" width="200"></li>
</ul>
</div>
</body>
</html>
/**************************function.js***********************/
/**
* Created by 呆萌萌 on 2016/2/19.
*/
var $window = $(window),gardenCtx,gardenCanvas,$garden,garden;
var clientWidth = $(window).width;
var clientHeight = $(window).height;
$(function() {
$loveHeart = $("#loveHeart");
var offsetX = $loveHeart.width()/2;
var offsetY = $loveHeart.height() / 2 - 55;
$garden = $("#garden");
gardenCanvas = $garden[0];
gardenCanvas.width = $("#loveHeart").width();
gardenCanvas.height = $("#loveHeart").height();
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation = "lighter";
garden = new Garden(gardenCtx,gardenCanvas);
$("#content").css("width",$loveHeart.width() + $("code").width());
$("#content").css("height",Math.max($loveHeart.height() + $("code").height()));
$("#content").css("margin-top",Math.max($window.height() - $("content").height())/2,10);
$("#content").css("margin-left",Math.max($window.width() - $("content").width())/2,10);
setInterval(function(){
garden.render();
},Garden.options.growSpeed );
$(window).resize(function(){
var newHeight = $(window).height();
var newWidth = $(window).width();
if(newWidth != clientWidth && newHeight != clientHeight){
location.replace(location);
}
});
function getHeartPoint(angle){
var t = angle / Math.PI;
var x = 19.5 * (16 * (Math.Pow(Math.sin(t),3)));
var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
return new Array(offsetX + x,offsetY + y);
}
function startHeartAnimation(){
var interval = 50;
var angle = 10;
var heart = new Array();
var animationTimer = setInterval(function(){
var bloom = getHeartPoint(angle);
var draw = true;
for(var i = 0;i < heart.length;i++){
var p = heart[i];
var distance = Math.sqrt(Math.pow(p[0] - bloom[0],2) + Math.pow(p[1] - bloom[1],2));
if(distance < Garden.options.bloomRadius.max * 1.3){
draw = false;
break;
}
}
if(draw){
heart.push(bloom);
garden.createRandomBloom(bloom[0],bloom[1]);
}
if(angle >= 30){
clearInterval(animationTimer);
showMessages();
}
else{
angle += 0.2;
}
},interval);
(function($){
$.fn.typewriter = function(){
this.each(function(){
var $ele = $(this).str = $ele.html().progress = 0;
$ele.html('');
var timer = setInterval(function(){
var current = str.substr(progress,1);
if(current == '<'){
progress = str.indexOf('>', progress) + 1;
}else{
progress++;
}
$ele.html(str.substring(0,progress) + (progress & 1 ? '_' : ''));
if(progress >= str.length){
clearInterval(timer);
}
},75);
});
return this;
}
})(jQuery);
function timeElapse(date){
var current = Date();
var seconds = ()/1000;
var days = Math.floor();
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds/3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours
+ "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds";
$("#elapseClock").html(result);
}
function showMessages() {
adjustWordsPosition();
$('#messages').fadeIn(5000, function() {
showLoveU();
});
}
function adjustWordsPosition() {
$('#words').css("position", "absolute");
$('#words').css("top", $("#garden").position().top + 195);
$('#words').css("left", $("#garden").position().left + 70);
}
function adjustCodePosition() {
$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);
}
function showLoveU() {
$('#loveu').fadeIn(3000);
}
}