2016/02/19 codes

最新推荐文章于 2024-09-04 20:18:34 发布

weixin_30535565

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量59

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whatcanido/p/5202404.html

版权

<!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.οnlοad=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 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);
}

}

转载于:https://www.cnblogs.com/whatcanido/p/5202404.html

weixin_30535565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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;} ...
复制链接

扫一扫