坚持#第31天~旋转图片学习完了

2016-9-5

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){


$(".pic ul li").each(function(i){//遍历每一张图片
var Deg = 

360/$(".pic ul li").size();

$(this).css({
"transform":"rotateY("+i*Deg+"deg)

translateZ(216px)"
});

});
});

</script>
@keyframes rotate{ //反着转
360到0degfrom
{transform:rotateY(0deg);}to
{transform:rotateY(360deg);}
}
放电影（自动旋转）在pic里加东西：.box 


.pic{animation:rotate 5s linear infinite;}//时间是速度

动画的方法：定义一个关键帧(在化妆里面写)，拍电影：@keyframes name{}，然后放电影：
.box .pic{animation:name speed linear infinite;}透明度是opcity:0.4;再来个文字盒子:<div class="text"></div>化妆：.text{想都不用想宽度高度背景颜色
width:660px;height:440px;background:pink;

}
写文字和显示文字的方法：在JS里面写（$下面，$不需要开头有空格）://创建一个数组存放所有的文字：var b = ["我只有会在做一件事情的时候才会想你,什么事呢,那就是呼吸."];var str = b.join()//放入join()里面;alert(str)弹出，需要分号,规范。
b.join(),i=0,arr=str.split("");//字符串分割   alert(arr);
var ms_stop = setInterval(function(){
if(i>str.length-1){
return;//不执行下面方法，免得输出其他字
//或写i=0;document.getElementById("txt").innerHTML = "";//打完后重新开始打
}
document.getElementById("txt").innerHTML = document.getElementById("txt").innerHTML+arr[i];
i++;
console.log(i);//aditplus输出是这个
//在当前页面,通过Id去寻找元,特别注意innerHTML的i是小写素"txt"；改为：<div class="text" id="txt">},1000);//每隔1000ms干什么事情
化妆：//text-indent是开头空多少距离，后面的是行高.text{text-indent:10px;line-height:20px;}
随机取整数Math.floor(Math.random()*5);

背景切换的方法的构造：
var RandomBg = function(){
return Math.floor(Math.random()*5);}
var ImagesAuto = setInterval(function(){

document.body.style.backgroundImage = "url(images/bg"+RandomBg()+".jpg)";},1000);//setInterval是设置时间间隔

调整背景大小：body{background-size:100% 100%;} body上面添加个html,body{height:100%;}


添加下雪效果有个下雪的JS，引用进来：
<script src="snow.min.js" 


type="text/javascript"></script>       

<script>createSnow('', 60);</script>
注意在下雪的js中打开方式记事本改一下雪花的路径：this.el.setAttribute("src", b + "images/snow" + Math.floor(Math.random() * 4) + ".gif");
//music
光棍登场：<embed src="在线放歌网址" hidden="true"/>