(-1)寫在前面 首先圖片是我從互聯網上下載的，向這位前輩致敬。我用的是chrome49，沒有加不同瀏覽器的首碼，jquery3.0，圖片資源放在了我的百度雲盤上http://pan.baidu.com/s/1o7LyHp4 (1)知識預備 a.瀏覽器x、y、z軸的概念 左手豎代表y軸，右手橫代表x ...
(-1)寫在前面
首先圖片是我從互聯網上下載的，向這位前輩致敬。我用的是chrome49，沒有加不同瀏覽器的首碼，jquery3.0，圖片資源放在了我的百度雲盤上http://pan.baidu.com/s/1o7LyHp4
(1)知識預備
a.瀏覽器x、y、z軸的概念
左手豎代表y軸，右手橫代表x軸，左右手擺成一個十字，z軸是即垂直x軸也垂直y軸穿過x、y交點的一條直線。
b. :nth-of-type(1)
img:nth-of-type(1)，所有有子元素img的父元素的第一個img子元素
body :nth-of-type(1) 等同於body *:nth-of-type(1)
(2)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<script type="text/javascript" src="base.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>為了生活</title>
<style type="text/css">
*
{
margin-top:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:530px;
height:530px;
position:absolute;
}
#lol img
{
display:block;
position:absolute;
border:1px #6F0000 solid;
}
#lol img:nth-of-type(1)
{
animation: one 10s linear 3s infinite;
}
@keyframes one
{
to
{
transform: rotateX(360deg);
}
}
#lol img:nth-of-type(2)
{
animation: two 10s linear 2s infinite;
}
@keyframes two
{
to
{
transform: rotateY(360deg);
}
}
#lol img:nth-of-type(3)
{
animation: three 10s linear 1s infinite;
}
@keyframes three
{
to
{
transform:rotateZ(360deg);
}
}
</style>
<script type="text/javascript">
$(function()
{
$("#lol").centerPos();
//讓lol元素水平垂直居中顯示，centerPos是自定義函數
})
$.fn.centerPos = function()
{
var parent;
this.each(function(index)
{
parent = this.parentNode;
if(parent == document.body)
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")
.css("top",($(parent).height()-this.offsetHeight)/2+"px");
}
else
{
window.console.error("沒有設置有效的position值");
}
})
return this;
}
</script>
</head
<body>
<div id="lol">
<img src="images/main5-pic1.png">
<img src="images/main5-pic2.png">
<img src="images/main5-pic3.png">
</div>
</body>
</html>
