第一天20170504
常用学习网站推荐
1.W3School: http://www.w3school.com.cn/
2.菜鸟教程： http://www.runoob.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- HBuilder 使用快捷键 -->
<!--注释或取消注释：ctrl + /-->
<!-- 自动提示： alt + / -->
<!-- 代码格式化： ctrl + shift + F -->
<!--
网页的构成：
1.标签：决定内容
2.样式：决定内容样子
-->
<!--
标签：
1.文本
2.图片
3.跳转
-->
1.编辑器代码提示快捷键
<p>先写p再按Tab键</p>
<!-- < 为HTML 字符实体 -->
<p>先按<再按p再按回车键</p>
<hr />
<!-- 这是一个段落标记 -->
<p>2.这是一个段落标记 </p>
<hr />
3.html按空格键生成中多个空格只会显示一个
<hr />
4.图片标签<br />
<!-- src:图片地址 -->
<img src="img/2.jpg" alt="2.jpg" />
<br />
<!-- 外部链接图片 -->
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2307466906,2255218472&fm=117&gp=0.jpg" alt="" />
<hr />
5.跳转链接
<a href="http://www.qq.com" target="_blank"><img src="img/2.jpg" alt="" /></a>
<hr />
</body>
</html>
第二天20170505
css
选择器的使用
例子1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式</title>
<style type="text/css">
/*选择器*/
/*1.标签选择器*/
p{
font-size: 30px;
/*RGB:一般是6位16进制，每两位代表一种颜色*/
color: #fff;
background-color: #000000;
}
img{
/*一般控制图片只会控制宽高其中一个，图片会自动按比例伸缩*/
width:300px;
height: 200px;;
}
/*2.id选择器（注意：一般这个页面相同的id只能出现一个）*/
#p2{
color: #abc;
background-color: green;
}
/*3.class选择器*/
.p3{
color: red;
}
</style>
</head>
<body>
<!-- 样式： -->
<p>第一个段落</p>
<p id="p2">第二个段落</p>
<p class="p3">第三个段落</p>
<p class="p3">第四个段落</p>
<img src="img/2.jpg" />
</body>
</html>例子2<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*类box内部的所有p标签*/
.box p{
color: blue;
}
/*类p2和p3使用相同的样式*/
.p2,.p3{
color:green;
}
</style>
</head>
<body>
<div class="box">
<p>内部第一个</p>
<p>内部第二个</p>
</div>
<p>外部第一个</p>
<p class="p2">外部第二个</p>
<p class="p3">外部第三个</p>
</body>
</html>
九大位置定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九大位置</title>
<style type="text/css">
* {
/*外边距*/
margin: 0;
/*4个参数顺时钟*/
/*margin:10px 10px 10px 10px;*/
/*2个参数（对边）：第一个参数上下，第二个左右*/
/*auto 自动计算距离*/
/*margin: 0px auto ;*/
/*内边距*/
padding: 0;
}
div {
width: 150px;
height: 150px;
background-color: cornflowerblue;
}
.div01 {
position: absolute;
top: 0px;
left: 0px;
}
.div02 {
position: absolute;
top: 0px;
/*外部元素50%*/
/*left：配合absolute定位一起用，距离父布局*/
left: 50%;
/*translate：平移*/
/*-50%代表自身50%*/
transform:translateX(-50%);
}
.div03 {
position: absolute;
top: 0px;
right: 0px;
}
.div04 {
position: absolute;
top: 50%;
left: 0px;
transform:translateY(-50%);
}
.div05 {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
/*简写*/
/*transform: translate(-50%,-50%);*/
}
.div06 {
position: absolute;
top: 50%;
right: 0px;
transform:translateY(-50%);
}
.div07 {
position: absolute;
bottom: 0px;
left: 0px;
}
.div08 {
position: absolute;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
}
.div09 {
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="div01"> </div>
<div class="div02"> </div>
<div class="div03"> </div>
<div class="div04"> </div>
<div class="div05"> </div>
<div class="div06"> </div>
<div class="div07"> </div>
<div class="div07"> </div>
<div class="div08"> </div>
<div class="div09"> </div>
</body>
</html>绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
}
/*一旦使用absolute：绝对定位，意味着每个div都有独立的层。之间会相互覆盖
覆盖原则：下面的标签会覆盖上面的标签
同时z-index属性开始生效，控制z轴：默认值为0;
* */
.div01{
position: absolute;
z-index: 1;
background-color: blue;
}
.div02{
position: absolute;
background-color: red;
}
/*关于absolute绝对定位的嵌套
标签设置了绝对定位。那么它自己本身相对的父元素是它就近相同设置了绝对位置的标签。
如果，一直向上找，都每找到设置了绝对定位的标签，那就相对于整个HTML页面。
* */
.father{
position: absolute;
width: 400px;
left: 40%;
height: 400px;
background-color: blueviolet;
margin:100px auto;
}
.child01{
position: absolute;
top:200px;
background-color: #000;
}
.child02{
position: absolute;
background-color: #f0f;
}
</style>
</head>
<body>
<div class="div01"></div>
<div class="div02"></div>
<br />
<div class="father">
<div class="child01">
</div>
<div class="child02">
</div>
</div>
</body>
</html>
相对定位
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body,html{
width:100%;
height: 100%;
}
.header{
width:100%;
height: 30%;
background-color: goldenrod;
}
.content{
/*相对定位不会破坏标签所在的位置。方便内部标签使用绝对定位，定位到具体位置*/
position:relative;
width:100%;
height: 60%;
background-color: royalblue;
}
.footer{
width:100%;
height: 10%;
background-color: greenyellow;
}
.content .left{
width: 30%;
height: 30%;
background-color: darkcyan;
position:absolute;
top:50%;
transform: translateY(-50%);
/*备注：一定不要使用relative定位置*/
}
.content .right{
width: 30%;
height: 30%;
background-color: coral;
position:absolute;
top:50%;
right: 0;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
</body>
</html>例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div01{
/*相对定位，四个方向的属性都是相对自己位置偏移*/
position: relative;
width:100px;
height:100px;
background-color: blue;
top:50px;
z-index: 1;
}
.div02{
position:relative;
width: 100px;
height: 100px;
background-color: darkcyan;
}
/*1.相对定位一般配合绝对定位一起使用。父元素使用相对定位，子元素使用绝对定位*/
/*2.相对定位不会影响到标签的位置，或者不会影响整个页面布局*/
</style>
</head>
<body>
<div class="div01"></div>
<div class="div02"></div>
</body>
</html>
应用小例子核心代码
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="box">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/9.jpg" />
</div>
</body>
</html>css代码
body{
background-color: blueviolet;
}
.box{
width:960px;
/*水平居中*/
margin: 50px auto;
}
img{
/*内边距*/
padding:10px;
background-color: white;
/*阴影参数：
* 参数1:阴影水平偏移
* 参数2:阴影垂直偏移
* 参数3：模糊度
* 参数4：颜色
* */
box-shadow: 10px 10px 10px black;
/*动画过度效果*/
transition: all 0.5s;
/*让图片使用z-index属性，同时不改变图片位置*/
position: relative;
}
/*选择img中第一个img*/
/*()里面可以填固定的子类序号或者填奇偶的字符*/
img:nth-child(odd){
/*旋转*/
transform: rotate(-10deg);
}
img:nth-child(even){
transform: rotate(10deg);
}
/*鼠标滑动监听*/
img:hover{
/*缩放*/
transform: scale(1.2);
z-index: 1;
box-shadow: none;
}
运行效果图：
固定定位
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
height: 300%;
}
.fix {
/*固定定位*/
position: fixed;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
background-color: red;
/*背景图片 参数:1.图片路径，2.平铺方式，3，图片位置*/
background: url(img/1.jpg) no-repeat center;
/*参数：1边框宽度，2.边框样式，3，边框颜色*/
border:10px solid goldenrod;
}
</style>
</head>
<body>
<div class="fix">
</div>
</body>
</html>实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div01 {
position: fixed;
bottom: 0px;
right: 0px;
line-height: 0px;
z-index: 1;
width: 280px;
height: 210px;
background-color: #efefef;
}
.div01 .div02 {
position: absolute;
right: 0px;
top:11px;
color: #333;
background-color: red;
}
.div01 .div03 {
position:absolute;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="div01">
<div class="div02">
<a href="http://blog.csdn.net/">关闭</a>
</div>
<div class="div03">
<a href="https://www.baidu.com/"><img src="http://img.ads.csdn.net/2017/201704241619521051.jpg"></a>
</div>
</div>
</body>
</html>字体布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.p1 {
width: 200px;
height: 100px;
background-color: blanchedalmond;
position: absolute;
margin: 10px auto;
/*字体居中，要使用以下两个属性一起使用*/
/*文本对齐居中*/
text-align: center;
/*行高要和标签本身的高度一致*/
line-height: 100px;
}
/*使用嵌套做到文本居于底部*/
div {
position: relative;
margin:300px auto;
width: 200px;
height: 100px;
background-color: chartreuse;
}
div .p2 {
position:absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<p class="p1">第一个段落</p><br />
<div>
<p class="p2">这是第二段</p>
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 30%;
background-color: goldenrod;
}
.content {
/*相对定位，不会破坏标签所在的位置。方便内部标签使用绝对定位，定到具体位置*/
position: relative;
width: 100%;
height: 60%;
background-color: royalblue;
}
.footer {
width: 100%;
height: 10%;
background-color: greenyellow
}
.content .left {
width: 30%;
height: 30%;
background-color: black;
/*永远相对的是自己最原始的位置*/
position: relative;
/*由于本身的左上角（原点）和content的重合。所以以下类似absolute的写法一样可以居中*/
top: 50%;
transform: translateY(-50%);
/*备注：一定不要使用relative定位置*/
}
/*这种写法也可以做到居中。原理：本身的长度的30%,translateY(-50%)上移自己的一半，相当于往上移动15%
top=50%-15%=35%
* */
/*.content .left {
width: 30%;
height: 30%;
background-color: black;
position: relative;
top: 35%;
}*/
.content .right {
width: 30%;
height: 30%;
background-color: red;
position: relative;
/*如果，要达到居中。那么左上角的位置相对父布局=50%-自身一半（15%）=35%。
本身左上角的位置是30%。
top=35%-30%=5%
* */
top: 5%;
/*以下代码为靠右。左移100%，把自身移除界面了。然后使用translateX(-100%)，移回本身*/
left: 100%;
transform: translateX(-100%);
}
/*下面这种写法：自身的长度为30%，往回移动自身的长度。相当于，只要左移=100%-30%=70%*/
/*.content .right {
width: 30%;
height: 30%;
background-color: red;
position: relative;
top: 5%;
left: 70%;
}*/
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
</body>
</html>第三天20170506
盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/**
* 盒模型有两种
* 1.content-box(默认的)
* 真实宽度=width+padingLeft+padingRight+borderLeft+borderRight;(内边距边框分左右)
* 2.border-box
* 真实宽度=width;（内边距和 边框，不会增加标签宽度）
*/
.box01{
width:200px;
height:200px;
padding:20px;
box-sizing: border-box;
/*border:30px solid black;*/
background-color: blue;;
}
.box02{
width: 200px;
height:200px;
background-color: darkblue;;
}
</style>
</head>
<body>
<div class="box01">
</div>
<div class="box02">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- value:默认的真实值 -->
<!-- placeholder:提示语 -->
<input type="text" id="" value="" placeholder="手机号/邮箱" />
<input type="password" name="" id="" value="" placeholder="6位密码" />
<input type="checkbox" name="" id="" value="" checked="checked"/>
<hr />
<!--radio单选框。必须设置name，并且要保持一致。value值不显示在页面-->
<input type="radio" name="radio" id="" value="L" checked="checked"/>篮球
<input type="radio" name="radio" id="" value="Z" />足球
<input type="radio" name="radio" id="" value="P" />排球
<hr />
<input type="button" name="" id="" value="登录" />
<button>登录</button>
<input type="color" name="" id="" value="" />
</body>
</html>
简单动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
margin: 200px auto;
background-color: blue;;
/*增加过度*/
/**
* 参数1.所有动画都过度
* 参数2.动画持续时间
*/
transition: all 2s;
transition-delay: 0.5;
}
/*transform数值基本都是相对自己的*/
.box:hover{
/*平移*/
/*transform: translateX(200px);*/
/*缩放*/
/*transform:scale(2);*/
/*旋转*/
transform: rotate(180deg);
/*改变旋转中心*/
/*距离左上角*/
transform-origin: -10% -50%;
}
.box2:hover{
transform: translateX(100px) translateY(100px) scaleY(2) rotate(360deg);
}
</style>
</head>
<body>
<!--<div class="box"></div>-->
<div class="box2"></div>
</body>
</html>
实例小项目
准备工作
在网站 http://www.iconfont.cn/home/index 中下载图标并解压
图标的使用方法:参照运行后的demo.html页面
新建web项目
login.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="box">
<!-- 一般h1在整个页面只出现一次 -->
<!-- 空格隔开代表两个class：login和Title -->
<h1 class="login Title">登录</h1>
<input type="text" id="userName" placeholder="邮箱" />
<input type="password" id="pasword" placeholder="密码" />
<p class="pRegister">还没有账号？点击此处立即 <a href="register.html">注册</a></p>
<a href="search.html"><input class="submit" type="submit" value="提交" /></a>
</div>
</body>
</html>
register.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="box">
<!-- 一般h1在整个页面只出现一次 -->
<h1 class="register Title">注册</h1>
<input type="text" id="userName" placeholder="邮箱" />
<input type="password" id="pasword" placeholder="密码" />
<input type="password" id="pasword" placeholder="确认密码" />
<button class="submit">提交</button>
</div>
</body>
</html>
search.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="box">
<h1 class="search Title">发现</h1>
<div class="serchDiv">
<input type="search" id="search" placeholder="请输入昵称" />
<button>搜索</button>
</div>
<div class="footer">
<a href="http://WWW.baidu.com">
<span class="font"></span>
<p>首页</p>
</a>
<a>
<span class="font"></span>
<p>发现</p>
</a>
<a>
<span class="font"></span>
<p></p>
</a>
<a>
<span class="font"></span>
<p>我的</p>
</a>
<a>
<span class="font"></span>
<p>退出</p>
</a>
</div>
</div>
</body>
</html>main.css代码
* {
padding: 0;
margin: 0;
}
/* 从demo.html运行后页面的第一步中复制过来的 */
@font-face {font-family: 'iconfont';
src: url('../fonts/iconfont.eot'); /* IE9*/
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.box {
position: relative;
width: 400px;
height: 500px;
border: 1px solid darkgrey;
margin: 50px auto;
}
.Title {
background-color: #0dc441;
font-size: 27px;
color: white;
text-align: center;
}
#userName,
#pasword {
width: 350px;
height: 30px;
border: none;
border-bottom: 1px solid darkgray;
/*选中边框*/
outline: none;
margin-top: 20px;
font-size: 17px;
position: relative;
left: 25px;
}
.pRegister{
margin-left: 25px;
margin-top: 20px;
}
.pRegister a{
color: #0dc441;
}
.submit{
margin-left: 25px;
margin-top: 25px;
}
.serchDiv{
/*文本相关的标签，只要父布局控制文本居中就可以了*/
text-align: center;
}
/*应用本地声明的字体*/
.font{
font-family: iconfont;
}
.footer a{
/*变成一行*/
float:left;
width: 20%;
text-align: center;
/*子元素会继承父元素的字体*/
font-size: 200%;
color: #ccc;
/*去掉a标签的下划线*/
text-decoration:none;
}
.footer a p{
font-size: 18px;
}
.footer{
width: 100%;
position: absolute;
bottom: 0;
border-top: 2px solid #ccc;
}
.footer a:nth-child(3) span{
font-size: 150%;
border: 2px solid #ccc;
border-radius: 50%;
}
/*被点击字体改变颜色*/
.footer a:active{
color: #0DC441;
}
运行效果图：
第四天20170507
小项目实战：明星资料卡
目录结构：
运行效果：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>明星资料卡</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="box">
<!--
figure:相当于Div,一般适用于图文结合
<figcaption>在figure中只能出现一个
-->
<figure class="view1">
<img src="img/1.png" />
<figcaption>
<h2>Billboard三首排行第一</h2>
<p class="p1">Shake It Off</p>
<p class="p2">Black Space</p>
<p class="p3">Bad Blood</p>
</figcaption>
</figure>
<figure class="view2">
<img src="img/2.png" />
<figcaption>
<h2>Taylor Swift</h2>
<p class="p1">Birthday:1989.12.13</p>
<p class="p2">Height:180cm</p>
<p class="p3">Weight:56kg</p>
</figcaption>
</figure>
<figure class="view3">
<img src="img/3.png" />
<figcaption>
<h2>Back To December</h2>
<p class="p1">I'm so glad you made time to see me. How's life, tell me how's your family? I haven't seen them in a while. You've been good, busier then ever. We small talk, work and the weather Your guard is up and I know why.</p>
</figcaption>
</figure>
<figure class="view4">
<img src="img/4.png" />
<figcaption>
<figcaption>
<h2>1989</h2>
<div class="rotate"></div>
<p class="p1">Taylor Swift《1989》</p>
</figcaption>
</figcaption>
</figure>
<figure class="view5">
<img src="img/5.png" />
<figcaption>
<h2>Taylor Swift-《22》</h2>
<p class="p1">I don't know about you, but I’m feeling 22, Everything will be alright if you keep me next to you, You don't know about me, but I bet you want to, Everything will be alright if we just keep dancing like we're... 22</p>
<div class="square"></div>
</figcaption>
</figure>
<figure class="view6">
<img src="img/6.png" />
<figcaption>
<h2>Out of the Woods</h2>
</figcaption>
</figure>
<figure class="view7">
<img src="img/7.png" />
<figcaption>
<div class="div1"></div>
<div class="div2"></div>
</figcaption>
</figure>
<figure class="view8">
<img src="img/8.png" />
<figcaption>
<h2>Taylor Swift</h2>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</figcaption>
</figure>
<figure class="view9">
<img src="img/9.png" />
<figcaption>
</figcaption>
</figure>
</div>
</body>
</html>main.css
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px auto;
}
figure {
width: 33%;
max-height: 400px;
/*从左往右排成一行。宽度不够的情况就会换行*/
float: left;
/*超出 边界的部分隐藏*/
overflow: hidden;
position: relative;
}
h2,
p {
position: absolute;
}
.view1 h2 {
top: 50px;
left: 50px;
color: white;
transform: translateX(20px);
}
.view1 .p1 {
left: 50px;
top: 120px;
color: white;
background-color: blue;
transform: translateY(500px);
}
.view1 .p2 {
left: 50px;
top: 170px;
color: white;
background-color: blue;
transform: translateX(400px);
}
.view1 .p3 {
left: 50px;
top: 220px;
color: white;
background-color: blue;
transform: translateX(-300px);
}
figure,
h2,
p {
transition: all 0.5s;
}
.view1:hover {
transform: translateX(50px);
}
/*hover后面接标签就是指定标签的css,没有就是改变自己的css*/
/*动画的相对位置和相对定位一样,永远都是相对自己 的位置*/
.view1:hover h2 {
transform: translateX(0px);
}
.view1:hover .p1 {
transform: translateY(0px);
}
.view1:hover .p2 {
transform: translateX(0px);
}
.view1:hover .p3 {
transform: translateX(0px);
}
/*======================================*/
.view2 h2 {
top: 70px;
left: 120px;
color: lawngreen;
transform: translateY(20px);
}
.view2 .p1 {
left: 70px;
top: 120px;
background-color: white;
transform: translateX(-300px);
}
.view2 .p2 {
left: 70px;
top: 170px;
background-color: white;
transform: translateX(-400px);
transition-delay: 0.2s;
}
.view2 .p3 {
left: 70px;
top: 220px;
background-color: white;
transform: translateX(-500px);
transition-delay: 0.4s;
}
.view2:hover {
transform: translateX(50px);
/*透明度：范围0~1*/
opacity: 0.8;
}
.view2:hover h2 {
transform: translateX(0px);
}
.view2:hover .p1 {
transform: translateY(0px);
}
.view2:hover .p2 {
transform: translateX(0px);
/*动画延时*/
}
.view2:hover .p3 {
transform: translateX(0px);
}
/*第三个======================================*/
.view3 h2 {
top: 100px;
left: 100px;
transform: translateY(-300px);
}
.view3 .p1 {
left: 50px;
top: 170px;
transform: translateY(500px);
}
.view3:hover img {
transform: translateY(-20px);
/*透明度：范围0~1*/
opacity: 0.8;
}
.view3:hover h2 {
transform: translateX(0px);
}
.view3:hover .p1 {
transform: translateY(0px);
}
/*第四个======================================*/
.view4 h2 {
top: 50px;
left: 20px;
transform: translateY(20px);
opacity: 0;
color: white;
}
.view4 .p1 {
bottom: 45px;
right: 50px;
transform: translateY(20px);
/*设置为不可见*/
/*display:none;*/
opacity: 0;
}
/*div控制的小白块三角*/
.view4 .rotate {
position: absolute;
top: 100%;
left: 30%;
background-color: white;
width: 450px;
height: 200px;
/*transform: rotate(-20deg);*/
/*改变旋转的中心点*/
transform-origin: 0 0;
transition: all 0.7s
}
.view4:hover .rotate {
transform: rotate(-18deg);
}
.view4:hover h2 {
opacity: 1;
transform: translateX(0px);
}
.view4:hover .p1 {
opacity: 1;
transform: translateY(0px);
}
/*第五个======================================*/
.view5 h2 {
top: 80px;
left: 50px;
}
.view5 .p1 {
width: 330px;
top: 150px;
left: 50px;
}
/*白框*/
.view5 .square {
position: absolute;
top: 60px;
left: 45px;
width: 340px;
height: 250px;
border: 2px solid white;
transform: translateX(-400px) rotate(-600deg);
transition: all 0.5s;
transform-origin: 10% 20%;
}
.view5:hover .square {
transform: translateX(0) rotate(0);
}
/*第六个======================================*/
.view6 h2 {
top: 260px;
left: 140px;
transform: rotate(-750deg) scale(0);
transition: all 1s;
}
.view6:hover h2 {
transform: rotate(-30deg) scale(1);
}
.view6:hover img {
transform: scale(1.2);
opacity: 0.5;
}
/*第7个======================================*/
.view7:hover img {
transform: scale(0.6);
transform-origin: 120px 250px;
}
.view7 div {
position: absolute;
transition: all 0.6s;
}
.view7 .div1 {
top: 95px;
left: 70px;
width: 0px;
height: 180px;
border-top:3px solid white;
border-bottom:3px solid white;
opacity: 0;
}
.view7 .div2 {
top: 70px;
left: 95px;
width: 180px;
height: 0px;
border-left:3px solid white;
border-right:3px solid white;
opacity: 0;
}
.view7:hover .div1{
width: 250px;
opacity: 1;
}
.view7:hover .div2{
height: 250px;
opacity: 1;
}
/*第8个======================================*/
.view8 h2 {
top:500px;
left:40px;
transform-origin: 20% -300%;
transition-delay: 0.5s;
}
.view8 div {
position: absolute;
transition: all 0.5s;
}
.view8 .div1 {
top: 25%;
left: 18%;
width: 0px;
height: 2px;
background-color: white;
}
.view8 .div2 {
top: 18%;
left: 30%;
width: 2px;
height: 0px;
background-color: white;
}
.view8 .div3 {
bottom: 25%;
left: 18%;
width: 0px;
height: 2px;
background-color: white;
}
.view8 .div4 {
top: 18%;
right: 30%;
width: 2px;
height: 0px;
background-color: white;
}
.view8:hover .div1{
width: 250px;
}
.view8:hover .div2{
height: 250px;
}
.view8:hover .div3{
width: 250px;
}
.view8:hover .div4{
height: 250px;
}
.view8:hover h2 {
top: 200px;
left: 245px;
transform:rotate(360deg);
}
/*第9个======================================*/
.view9:hover {
transform:rotate(-30deg);
}
第五天20170508
简单动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
border:9px solid darkgoldenrod;
/*
1.自己定义的动画名
2.动画执行时间
3.执行次数（infinite无限执行）
*/
animation: squar 2s infinite;
/*延迟执行*/
animation-delay: 3s;
}
/*backColor:给这个动画取个名字*/
/*大括号里面写css*/
@keyframes backColor {
/*from代表0%*/
from {
background-color: red;
left: 100px;
}
/*to代表100%*/
to {
background-color: green;
left: 400px;
}
}
@keyframes squar {
0% {
left: 0px;
top: 0px;
transform: rotate(300deg) scale(0);
}
25% {
left: 500px;
top: 0px;
transform: rotate(-300deg) scale(1);
}
50% {
left: 500px;
top: 500px;
transform: rotate(300deg) scale(0);
}
75% {
left: 0px;
top: 500px;
transform: rotate(-300deg) scale(0.1);
}
100% {
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>动画加载图标小项目
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="boxs">
<!-- 加空格等于设置了两个class -->
<div class="box box1">
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</div>
<div class="box box2">
<div class="container">
<div class="div1"></div>
</div>
</div>
<div class="box box3">
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
</div>
<div class="box box4">
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
</div>
<div class="box box5">
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
<div class="box box6">
<div class="container">
</div>
</div>
</body>
</html>main.css
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #333;
}
.boxs {
width: 1100px;
margin: 50px auto;
}
.box {
position: relative;
width: 300px;
height: 300px;
background-color: black;
float: left;
margin: 20px;
}
.container {
position: absolute;
width: 120px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box1 .container div {
background-color: #67CF22;
height: 90px;
width: 20px;
float: left;
margin-right: 4px;
animation: scaleYBar 0.7s infinite;
}
.box1 .container .div1 {
animation-delay: 0.2s;
}
.box1 .container .div2 {
animation-delay: 0.3s;
}
.box1 .container .div3 {
animation-delay: 0.4s;
}
.box1 .container .div4 {
animation-delay: 0.5s;
}
.box1 .container .div5 {
animation-delay: 0.6s;
}
@keyframes scaleYBar {
0% {
transform: scaleY(1);
}
/*百分比越小相当于提前播放*/
20% {
transform: scaleY(2);
background-color: #fff;
}
100% {
transform: scaleY(1);
}
}
/*=====================*/
/*上面已经把container已经设置居中了*/
.box2 .container {
height: 120px;
}
.box2 .container .div1 {
width: 100%;
height: 100%;
background-color: #67CF22;
border-radius: 50%;
animation: rotateCircle 1s infinite;
}
@keyframes rotateCircle {
0% {
transform: rotateX(180deg) rotateY(0deg);
}
50% {
transform: rotateX(180deg) rotateY(180deg);
background-color: white;
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
/*第3个=====================*/
.box3 .container {
height: 120px;
}
.box3 .container div {
position: absolute;
width: 100%;
height: 100%;
background-color: #67CF22;
border-radius: 50%;
animation: scaleCircle 1s infinite;
}
/**
* 强调：分析动画，再怎么复杂，都值优先考虑其中一个div的动态
* 延迟时间必须是整个时间的一半，才刚刚好放一个最大，另一个最小。
*/
.box3 .container .div2 {
opacity: 0.5;
animation-delay: 0.5s;
}
@keyframes scaleCircle {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
/*第4个=====================*/
.box4 .container {
height: 120px;
}
.box4 .container div {
position: absolute;
width: 50%;
height: 50%;
background-color: #67CF22;
animation: squareMove 2s infinite;
}
.box4 .container .div2 {
animation-delay: 1s;
}
@keyframes squareMove {
0% {
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
}
25% {
transform: translateX(60px) translateY(0px) scale(0.2) rotate(-90deg);
}
50% {
transform: translateX(60px) translateY(60px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(60px) rotate(-270deg);
}
100% {
transform: translateX(0px) translateY(0px) rotate(-360deg);
}
}
/*第5个=====================*/
.box5 .container {
width: 150px;
height: 30px;
}
.box5 .container div {
width: 30px;
height: 30px;
background-color: #67CF22;
margin-left: 15px;
border-radius: 50%;
float: left;
animation: circleMove 1s infinite;
}
.box5 .container .div1 {
animation-delay: 0s;
}
.box5 .container .div2 {
animation-delay: 0.25s;
}
.box5 .container .div3 {
animation-delay: 0.5s;
}
@keyframes circleMove {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
JavaScript输出和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!-- 一般js文件放到body下面 -->
<script type="text/javascript">
//定义一个变量,并且赋值
var a = 1;
//1.在控制台上打印
console.log("Hello World");
//2.弹窗
//alert("你好");
//方法
function plus(x, y) {
var z = x + y;
console.log(z);
}
plus(3, 4);
//带返回值的
function reduce(x, y) {
var z = x - y;
return z;
}
var result = reduce(5, 6);
console.log("result=" + result);
//方法直接赋值给变量(注意：调用必须在赋值之后)
var mutip = function(x, y) {
var z = x * y;
return z;
}
console.log(mutip(4, 5));
//方法当做参数传
function mix(fn, y) {
var z = fn(5, 7) + y;
return z;
}
//alert(mix(reduce, 8));
</script>
</html>JavaScript获取标签属性和修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="p1">初始文本</p>
<p id="p2">初始化文本</p>
<p class="p3">第三个</p>
<p class="p3">第三个</p>
<p class="p3">第三个</p>
</body>
<script type="text/javascript">
//通过id获取标签文本
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var text = p1.innerText;
console.log(text);
//修改文本,会吧引号中的字符串当成纯文本输出;
p1.innerText = "修改过了";
//输出会解析文本中的html标签
p2.innerHTML = "<h2 id='h'>你好</h2>";
document.getElementById("h").innerText = "文本被修改"
//单个生成标签
//参数是标签名
var imgView = document.createElement("img");
//给img设置图片
imgView.src = "img/2.jpg";
//设置id
imgView.id = "img1";
//添加到到p2标签
p2.appendChild(imgView);
//class========================================
/**
* getElementsByClassName得到的是包含这个class名的所有标签的数组。
* 得到的是p3(三个p3，中间的索引1)
*/
var p3 = document.getElementsByClassName("p3")[1];
p3.innerText="我在中间";
</script>
</html>第六天20170509
js获取并修改标签属性，js监听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="userName" value="用户名" />
<input type="button" id="login" value="提交" />
<input type="button" id="login2" οnclick="clickLog()" value="提交2" />
</body>
<script type="text/javascript">
var userName = document.getElementById("userName");
//1.获取输入框中的文本
var text = userName.value;
//alert(text);
//2.修改文本框里的值
userName.value = "你好";
/**
* 设置监听器:所有的标签都可以设置onclick
*/
var login = document.getElementById("login");
login.onclick = function() {
alert(userName.value);
}
function clickLog() {
alert(userName.value);
}
</script>
</html>js修改css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="width: 300px; height: 300px; background-color: red;"></div>
</body>
<script type="text/javascript">
var div1 = document.getElementById("div1");
//style标签的属性
div1.style.width="700px";
/**
* css里面带有中划线的样式名，在JavaScript里面变成了驼峰命名
*/
div1.style.backgroundColor="#0ff000";
</script>
</html>
项目目录结构：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/mian.css" />
</head>
<body>
<marquee hehavior="alternate">打地鼠</marquee>
<div class="but">
<button οnclick="begin()">开始</button>
<button οnclick="end()">暂停</button>
</div>
<div class="box">
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
<div class="mole" οnclick="hitMole(this)"></div>
</div>
<p>得分: <span id="score">0</:span></p>
</body>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>main.css
marquee{
margin-top:50px;
font-weight: 500px;
font-size: 50px;
/*字体粗细*/
font-weight: 500px;
}
.box{
width:330px;
height: 330px;
margin: 100px auto;
margin-top:0px;
}
.box div{
width:100px;
height: 100px;
background-color: #DEB887;
float: left;
margin:5px;
background: url(../img/bg.jpg);
}
p{
text-align: center;
}
.but{
width:190px;
heith:40px;
margin: 50px auto;
}
.but button{
width:90px;
float: left;
}
main.js
//所有地鼠div
var moles = document.getElementsByClassName("mole");
//分数span
var scoreSpan = document.getElementById("score");
//记录得分
var score = 0;
var lastIndex = 0;
function showMole() {
/**
* Math.random()产生一个随机数范围(0,1);
* Math.floor()向下取整
* moles.lenght = 9 表示数组的长度
*/
var showIndex = Math.floor(Math.random() * moles.length);
//通过索引获得一个div
var mole = moles[showIndex];
lastIndex = showIndex;
//显示小老鼠
mole.style.backgroundImage = "url(img/mole.gif)";
}
//检查是否是小老鼠
function checkMole() {
var tag = moles[lastIndex];
//判断是不是小老鼠
//判断这个字符串里面是否含有mole，有的话返回mole的索引一定大于-1
if (tag.style.backgroundImage.indexOf("mole") > -1) {
tag.style.backgroundImage = "url(img/bg.jpg)";
}
}
var randomShowMole=null;
var isStart=false;
//开始
function begin() {
//每次开始之前停止一下之前的游戏。防止多次点击开始
end();
isStart=true;
//开始游戏
randomShowMole = setInterval(function() {
checkMole();
showMole();
}, 500);
}
//暂停
function end() {
// 取消定时器
clearInterval(randomShowMole);
isStart=false;
}
function hitMole(obj) {
if(!isStart){
return;
}
if (obj.style.backgroundImage.indexOf("mole") > -1) {
//得分
score++;
//重置背景
obj.style.backgroundImage = "url(img/bg.jpg)";
// checkMole();
// showMole();
} else {
score--;
}
//显示得分
scoreSpan.innerText = score;
}
运行效果：
第七天20170510
js通过Selector
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title></title>
</head>
<body>
<p class="p1">第一个段落</p>
<p class="p1">第二个段落</p>
<divclass="div1">
<p>第二个段落</p>
<p>第三个段落</p>
</div>
<p id="p1">我是id标记的p</p>
</body>
<scripttype="text/javascript">
//css语法
//永远只会返回匹配的第一个
varp1=document.querySelector(".p1");
p1.innerText="修改第一个";
//修改第二个class为p1的文本
//这个方法,返回匹配的元素,是个数组。
varp2=document.querySelectorAll(".p1")[1];
p2.innerText="修改第二个";
//把“第三个段落”改成“第3个段落”
varp3=document.querySelectorAll(".div1 p")[1];
p3.innerText="第3个段落";
varp4=document.querySelectorAll("#p1")[0];
p4.innerText="这里修改了id标记的p标签";
</script>
</html>
jQuery的基本使用
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<divclass="div1">1</div>
<divclass="div1">1</div>
<divclass="div2">2</div>
<divclass="div3">3</div>
<divclass="div4">4</div>
</div>
<buttonid="submit">提交</button>
</body>
<scriptsrc="js/jquery-1.11.0.js" type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript">
//$就代表jQuery对象
//css语法选择标签：返回的是jQuery对象,不是dom元素,找到的是所有匹配。
$(".box.div1").text("第一个");//相当于js中的innerText
$(".box.div2").html("<h2>第二个</h2>"); //相当于js中的innerHtml
//获得标签上面的文本
var text = $(".box.div1").text();
console.log(text);
//获得第几个dom元素。备注：获得的是纯dom,非jQuery
var div4 = $(".boxdiv").get(3);
div4.innerText = "第四个";
//修改css:语法类似css,属性之间用","分割
var div3 = $(".box.div3").css({
"width":"300px",
"height":"300px",
"background-color":"blue",
"position":"absolute"
});
//设置监听器
$("#submit").click(function(){
alert("点击了我")
});
//动画
/**
* 参数1,动画所要达到的效果；
* 参数2,动画执行时间。
* 参数3,动画执行完成后执行的方法。
*/
$(".box.div3").animate({left:"200px"},1000,function(){
alert("动画完成！");
});
</script>
</html>
第八天20170511
视频音频的插入
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title></title>
</head>
<body>
<!--<audio> 标签是 HTML 5 的新标签-->
<!-- controls显示控制器 autoplay自动播放 loop循环播放-->
<audio src="audio/CaraDillon - Craigie Hill.mp3" controls autoplay loop></audio>
<video id="video"src="video/movie.mp4"></video>
<buttonid="start">开始</button>
<buttonid="pause">暂停</button>
</body>
<scripttype="text/javascript">
var vido =document.getElementById("video");
var start =document.getElementById("start");
var pause =document.getElementById("pause");
start.οnclick=function(){
//如果停止,则播放
if(video.paused){
video.play();
}
}
pause.οnclick=function(){
//如果正在播放,则停止
if(!video.paused){
video.pause();
}
}
</script>
</html>
h5中画布元素使用
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<!--HTML 5 <canvas> 标签-->
<canvasid="canvas"></canvas>
<img src="img/5.jpg"alt="" id="img" />
<button id="btn">清空</button>
</body>
<scripttype="text/javascript">
//画布
var canvas =document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor ="blue";
//获得画笔
var context =canvas.getContext("2d");
//画笔设置颜色
//边框颜色（线条）
context.strokeStyle ="red";
//1.画条线。
//开始路径
context.beginPath()
//设置线的粗细
context.lineWidth = 10;
//第一个点定位
context.moveTo(0, 0);
//第二哥点,划到的点
context.lineTo(100, 100);
context.closePath();
//填充路径
context.stroke();
//2.画矩形
//填充颜色内部
context.fillStyle ="aqua";
context.beginPath();
/**
* 第一，第二个参数：代表左上角
* 第三个参数：宽度
* 第四个参数：高度
*/
context.rect(200, 200, 200, 200);
context.closePath();
//边框
context.stroke();
//填充内部
context.fill();
//3.画三角形
context.beginPath();
context.moveTo(50, 100);
context.lineTo(50, 200);
context.lineTo(100, 150);
context.lineTo(50, 100);
context.closePath();
context.stroke();
context.fill();
//4.画圆
context.beginPath();
/**
* 第一个第二个参数：圆心
* 第三个参数：半径
* 第四个角度：起始
* 第五个结束：结束
*/
context.arc(300, 100, 50, 0, 2 *Math.PI);
context.closePath();
context.stroke();
//5：写文字
//设置字体：此出如果设置一定要带上字体大小和字体。
context.font = "30px 宋体";
context.beginPath();
//第一个参数：文本，第二个，第三个:文本位置
context.fillText("你好！", 300, 450);
context.closePath();
//6：画图片
// var img=new Image();
// img.src="img/5.jpg";
var img =document.getElementById("img");
img.onload = function() {
context.beginPath();
context.drawImage(img,300, 100);
context.closePath();
}
//清空
document.getElementById("btn").οnclick= function() {
//清空某一个区域(图片清理不掉，是因为加载需要时间。需要在图片的onclick中清空)
context.clearRect(0, 0,canvas.width, canvas.height);
}
//延时器
//setTimeout(function(){
//context.clearRect(0,0,canvas.width,canvas.height);
//},1000);
</script>
</html>
画布元素使用小项目
运行结果：
index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/main.js"type="text/javascript" charset="utf-8"></script>
</html>
main.js
var canvas = document.createElement("canvas");
//添加
document.body.appendChild(canvas);
//把整个页面的宽高给canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = "black";
//画笔
var context = canvas.getContext("2d");
//定义一个数组
var dots = [];
loop();
function loop() {
setInterval(function() {
context.clearRect(0,0,canvas.width,canvas.height);
var dot = new Dot(canvas.width * 0.5, canvas.height * 0.5);
//把点添加到数组
dots.push(dot);
for (var i = 0; i < dots.length; i++) {
dots[i].update();
}
}, 50);
}
//定义一个Dot对象
function Dot(x, y) {
//圆心
this.x = x;
this.y = y;
//偏移
this.cX = Math.floor(Math.random() * 8) - 4;
this.cY = -5;
//重力因素
this.garvity = 0.1;
//半径
this.radius = 5;
//定义一个画圆的方法
this.drawArc = function() {
//设置随机颜色
context.fillStyle = this.getColor();
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
context.closePath();
//填充
context.fill();
}
//更新圆的位置
this.update = function() {
//更新圆心
this.x = this.x + this.cX;
this.y = this.y + this.cY;
//重力因素,让点下落
this.cY = this.cY + this.garvity;
//重新绘制
this.drawArc();
}
//产生随机颜色
this.getColor = function() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
}
第九天第十天：自己开发贪吃蛇项目
目录结构：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<audio src="audio/snack.mp3" autoplay loop></audio>
<div class="container">
<div class="ground">
</div>
<div class="control">
<span class="banner">无限组合</span>
<ul class="speed">
<li οnclick="gread1()">一级</li>
<li οnclick="gread2()">二级</li>
<li οnclick="gread3()">三级</li>
<li οnclick="sub_v()">减速</li>
<li οnclick="add_v()">加速</li>
</ul>
速度:<span class="speed_v"></span>
<span class="score"></span>
<div class="buttons">
<button id="start">开始/结束</button>
<button id="purse">暂停/恢复</button>
</div>
</div>
<div class="intro">
<h4>游戏说明:</h4>
<p>上下左右键控制蛇的转向.一级,二级,三级都代表速度,三级速度最高。也可以直接点击加速(add-v，快捷键A)或减速(sub-v，快捷键S).不要撞到仙人掌哦</p>
</div>
</div>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>
main.css
.container {
/*避免蛇定位到.ground外边*/
position: relative;
width: 1000px;
margin: 0 auto;
}
.ground {
positon: relative;
width: 100%;
height: 500px;
background: url(../img/background.jpg) no-repeat;
}
.control {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #cce290;
}
.banner {
float: left;
margin-left: 10px;
font-size: 18px;
}
.buttons {
float: right;
margin-right: 10px;
}
.speed {
float: left;
margin: 10px auto;
height: 40px;
/*去掉无序列表中的格式*/
list-style-type: none;
line-height: 40px;
text-align: center;
}
.speed li {
background-color: #f6ff9f;
float: left;
width: 60px;
heith: 100%;
margin-right: 12px;
border-radius: 40%;
}
.speed li:hover {
background-color: yellow;
}
.speed li:active {
background-color: red;
}
.intro {
width: 100%;
height: 50px;
position: relative;
background: url(../img/key.jpg) no-repeat;
background-color: #CCE290;
}
.intro h4 {
position: absolute;
left: 220px;
}
.intro p {
position: absolute;
left: 320px;
margin-top: 0px;
}
.food {
position: absolute;
background: #8b0 url(../img/body.gif);
transform: scale(1.3);
}
.eagle{
width: 100px;
height: 100px;
/*属性规定当内容溢出元素框时发生的隐藏事情。*/
overflow: hidden;
border:1px dotted red;
}
.block {
width: 20px;
height: 20px;
/*属性规定当内容溢出元素框时发生的隐藏事情。*/
overflow: hidden;
}
.snake-block {
position: absolute;
background: red;
}
.speed_v {
width: 200px;
}
#h-down,
#t-down {
transform: rotate(90deg);
}
#h-up,
#t-up {
transform: rotate(-90deg);
}
#h-left,
#t-left {
transform: rotate(180deg);
}main.js
//获得贪吃蛇活动范围的div
var ground = $(".ground");
//获得计分元素
var aSpan = $(".score");
//定义蛇数组
var snakerAry = [];
//声名全局变量存放当前食物
var oFood;
//存放障碍物数组.要放到createCactus();前面。先声名后使用
var cactusAry = new Array();
//对吃过的食物计数，初始化为0；
var sum = 0;
//蛇头移动方向，默认为右
var moveDir = "right";
//存放创建的定时器
var timer;
//游戏运行状态标记
var runing = false;
//是否点过“开始”按钮标记
var begin = false;
//获取开始/结束标签
var oStart = $("#start");
//获取暂停/恢复标签
var oPurse = $("#purse");
//获得显示速度的标签
var speed_v = $(".speed_v");
//定时器设置时间，控制速度
var perTime = 300;
//显示速度
speed_v.html(1000 - perTime);
//鹰距离左边的距离
var eagleLeft;
//鹰距离上边的距离
var eagleTop
//创建蛇=================================================================================================================================
//i从3开始主要是定位用的
for (var i = 3; i > 0; i--) {
//创建div标签
var tempDiv = $("<div/>");
tempDiv.css({
"left": i * 20 + "px",
"top": "60px"
});
/**
* addClass(向被选元素添加一个或多个类名);
*/
tempDiv.addClass("block snake-block");
if (i == 3) {
tempDiv.css({
"background": "url(img/head.png)",
//以使背景图像完全覆盖背景区域
"background-size": "cover"
});
} else if (i == 2) {
tempDiv.css({
"background": "url(img/body.png)",
"background-size": "cover"
});
} else {
tempDiv.css({
"background": "url(img/tail.png)",
"background-size": "cover"
});
}
//获得属性值
//alert(tempDiv.attr("class"));
//css() 方法设置或返回被选元素的一个或多个样式属性
//alert(tempDiv.css("left"));
snakerAry.push(tempDiv);
ground.append(tempDiv);
}
//生成随机坐标。格式是数字(主要是创建障碍物和食物时用到)======================================================================================================
function divPoint() {
var iLeft, iTop;
var flag = false;
do {
/**
* 生成随机点距离left和top的距离
* 应为class为ground的div宽1000,高500.
* 而每个图片是20*20的
*/
iLeft = Math.floor(Math.random() * 50) * 20;
iTop = Math.floor(Math.random() * 25) * 20;
//判断创建食物的位置是否和蛇身重合
for (var i = 0; i < snakerAry.length; i++) {
//css() 方法设置或返回被选元素的一个或多个样式属性。
if (iLeft == parseInt(snakerAry[i].css("left")) && iTop == parseInt(snakerAry[i].css("top"))) {
flag = true;
break;
}
}
} while (flag)
//返回两个参数
return {
iLeft: iLeft,
iTop: iTop
};
}
//创建鹰================================================================================================================================
//创建鹰标签
var eagle = $("<div/>");
eagleLeft = Math.floor(Math.random() * 10) * 100;
eagleTop = Math.floor(Math.random() * 5) * 100;
while (eagleLeft < 100 || eagleTop < 100) {
eagleLeft = Math.floor(Math.random() * 10) * 100;
eagleTop = Math.floor(Math.random() * 5) * 100;
}
eagle.css({
"left": eagleLeft + "px",
"top": eagleTop + "px",
"background": "url(img/eagle.gif)",
//以使背景图像完全覆盖背景区域
"background-size": "cover"
});
/**
* addClass(向被选元素添加一个或多个类名);
*/
eagle.addClass("eagle snake-block");
ground.append(eagle);
//创建障碍物==============================================================================================================================
// 先创建障碍物，是因为食物会多次创建，并不能和障碍物重合，所以要先确定障碍物
function createCactus() {
for (var i = 0; i < 5; i++) {
var cactus = $("<div/>");
//不让左上角周围有障碍物
var Left = divPoint().iLeft;
var Top = divPoint().iTop;
while (Left < 100 || Top < 100) {
Left = divPoint().iLeft;
Top = divPoint().iTop;
}
cactus.css({
"left": Left + "px",
"top": Top + "px",
"background": "url(img/cactus.png)",
"background-size": "cover"
});
cactus.addClass("block food");
cactusAry.push(cactus);
ground.append(cactus);
}
}
//调用生成障碍物
createCactus();
//判断是否和障碍物重合,Left,Top是数字==========================================================================================
function coincide(Left, Top) {
var state = false;
for (var i = 0; i < cactusAry.length; i++) {
if (Left == parseInt(cactusAry[i].css("left")) && Top == parseInt(cactusAry[i].css("top"))) {
state = true;
break;
}
}
return state;
}
//创建食物================================================================================================================
function createFood() {
oFood = $("<div/>");
var num = Math.floor(Math.random() * 4);
//避免在障碍物上创建食物
var Left = divPoint().iLeft;
var Top = divPoint().iTop;
while (coincide(Left, Top).state) {
Left = divPoint().iLeft;
Top = divPoint().iTop;
}
oFood.css({
"left": Left + "px",
"top": Top + "px"
});
switch (num) {
case 0:
oFood.css({
"background": "url(img/gold.png)",
"background-size": "cover"
});
break;
case 1:
oFood.css({
"background": "url(img/berries.png)",
"background-size": "cover"
});
break;
case 2:
oFood.css({
"background": "url(img/peach.png)",
"background-size": "cover"
});
break;
default:
oFood.css({
"background": "url(img/apple.png)",
"background-size": "cover"
});
break;
}
oFood.addClass("block food");
ground.append(oFood);
}
createFood();
//食物添加到尾巴的前面后,计算尾巴现在应有的坐标，单位是数字========================================================================
function priTail(headLeft, headTop, tailLeft, tailTop, moveDir) {
// 竖方向添加
if (tailLeft == headLeft || moveDir == "right" || moveDir == "left") {
if (tailTop > headTop)
tailTop -= 20;
else if (tailTop < headTop)
tailTop += 20;
} else if (tailTop == headTop || moveDir == "up" || moveDir == "down") { //横方向添加
if (tailLeft > headLeft)
tailLeft -= 20;
else if (tailLeft > headLeft)
tailLeft += 20;
}
return {
tailTop: tailTop,
tailLeft: tailLeft
};
}
//蛇和鹰移动=====================================================================================================================
function move() {
//获得蛇头
var snakeHead = snakerAry[0];
//蛇距离左边距离，数字
var headLeft = parseInt(snakeHead.css("left"));
//蛇距离顶部距离，数字
var headTop = parseInt(snakeHead.css("top"));
/**
* 蛇身移动
* 先移动蛇身，因为需要用到蛇头
*/
for (var i = snakerAry.length - 1; i > 0; i--) {
snakerAry[i].css({
"top": snakerAry[i - 1].css("top"),
"left": snakerAry[i - 1].css("left")
});
}
//蛇头移动
switch (moveDir) {
case "left":
headLeft -= 20;
break;
case "right":
headLeft += 20;
break;
case "up":
headTop -= 20;
break;
case "down":
headTop += 20;
break;
}
snakerAry[0].css({
"left": headLeft + "px",
"top": headTop + "px"
});
//当蛇头方向变时旋转蛇头，这里通过改变id。然后通过css旋转的。
snakerAry[0].attr("id", "h-" + moveDir);
//与蛇身相撞结束游戏
for (var i = 1; i < snakerAry.length; i++) {
if (headLeft == parseInt(snakerAry[i].css("left")) && headTop == parseInt(snakerAry[i].css("top"))) {
reStart();
}
}
/**
* 鹰移动，上下左右，或不动
*/
var eagleMove = Math.floor(Math.random() * 5);
eagleLeft = parseInt(eagle.css("left"));
eagleTop = parseInt(eagle.css("top"));
//增加和蛇头向心力
if (eagleLeft > headLeft && eagleLeft > 6) {
eagleLeft -= 6;
} else {
if (eagleLeft < headLeft && eagleLeft <= 894) {
eagleLeft += 6;
}
}
if (eagleTop > headTop && eagleTop > 4) {
eagleTop -= 4;
} else {
if (eagleTop < headTop && eagleTop <= 396) {
eagleTop += 4;
}
}
//随机移动
switch (eagleMove) {
case 0:
if (eagleTop > 20) {
eagleTop -= 20;
}
break;
case 1:
if (eagleTop <= 380) {
eagleTop += 20;
}
break;
case 2:
if (eagleLeft > 20) {
eagleLeft -= 20;
}
break;
case 3:
if (eagleLeft <= 880) {
eagleLeft += 20;
}
break;
default:
break;
}
eagle.css({
"left": eagleLeft + "px",
"top": eagleTop + "px"
});
//撞墙游戏结束
if (headLeft < 0 || headTop < 0 || headTop >= 500 || headLeft >= 1000) {
reStart();
return;
}
//撞障碍物游戏结束
if (coincide(headLeft, headTop)) {
reStart();
return;
}
//鹰和蛇任何位置相撞，游戏结束
eagleLeft1 = parseInt(eagle.css("left"));
eagleTop1 = parseInt(eagle.css("top"));
for (var i = 0; i < snakerAry.length; i++) {
var sLeft = parseInt(snakerAry[i].css("left"));
var sTop = parseInt(snakerAry[i].css("top"));
if (sLeft >= eagleLeft1 && sLeft < (eagleLeft1 + 100) && sTop >= eagleTop1 && sTop < (eagleTop1 + 100)) {
reStart();
return;
}
}
//获取当前的尾巴方向,调整尾巴的方向
var snakeTail = snakerAry[snakerAry.length - 1];
var tailLeft = parseInt(snakeTail.css("left"));
var tailTop = parseInt(snakeTail.css("top"));
if (tailTop < parseInt(snakerAry[snakerAry.length - 2].css("top"))) {
snakeTail.attr("id", "t-down");
}
else if (tailTop > parseInt(snakerAry[snakerAry.length - 2].css("top"))) {
snakeTail.attr("id", "t-up");
}
if (tailLeft > parseInt(snakerAry[snakerAry.length - 2].css("left"))) {
snakeTail.attr("id", "t-left");
} else if (tailLeft < parseInt(snakerAry[snakerAry.length - 2].css("left"))) {
snakeTail.attr("id", "");
}
//吃到的食物添加到尾巴的前面，分别改变尾巴和食物的定位坐标值
if (headLeft == parseInt(oFood.css("left")) && headTop == parseInt(oFood.css("top"))) {
//添加蛇身
tailLeft = parseInt(snakeTail.css("left"));
tailTop = parseInt(snakeTail.css("top"));
oFood.attr("class", "block snake-block");
oFood.css({
"background": "url(img/body.png)",
"top": tailTop + "px",
"left": tailLeft + "px"
});
sum++;
/**
* arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
*/
snakerAry.splice(snakerAry.length - 1, 0, oFood);
aSpan.html("已吃食物" + sum + "个");
//修改尾巴
tailTop = priTail(headLeft, headTop, tailLeft, tailTop, moveDir).tailTop;
tailLeft = priTail(headLeft, headTop, tailLeft, tailTop, moveDir).tailLeft;
snakeTail.css({
"left": tailLeft + "px",
"top": tailTop + "px"
});
//重新生成食物
createFood();
}
}
//开始(恢复)或结束==================================================================================================================
oStart.click(function() {
if (!runing) {
//打开定时器
openTimer();
begin = true;
runing = true;
} else {
var msg = confirm("结束游戏成绩将清空,确定结束吗！");
if (msg) {
clearInterval(timer);
//重新加载页面
window.location.reload();
}
}
});
//暂停和恢复===========================================================================================================================
oPurse.click(function() {
if (runing) {
clearInterval(timer);
runing = false;
} else {
//只有点过开始的状态，才可以恢复
if (begin)
oStart.click();
}
});
//定时器============================================================================================================================
function openTimer() {
timer = setInterval(function() {
//开始移动
move();
}, perTime);
}
//改变速度===========================================================================================================================
//一级
function gread1() {
//经测试这里需要先暂停下定时器
clearInterval(timer);
perTime = 300;
speed_v.html(1000 - perTime);
if (runing) {
openTimer();
}
}
//二级
function gread2() {
clearInterval(timer);
perTime = 100;
speed_v.html(1000 - perTime);
if (runing) {
openTimer();
}
}
//三级
function gread3() {
clearInterval(timer);
perTime = 60;
speed_v.html(1000 - perTime);
if (runing) {
openTimer();
}
}
//加速
function add_v() {
clearInterval(timer);
if (perTime > 100) {
perTime = perTime - 50;
speed_v.html(1000 - perTime);
}
if (runing) {
openTimer();
}
}
//减速
function sub_v() {
clearInterval(timer);
if (perTime < 900) {
perTime = perTime + 50;
speed_v.html(1000 - perTime);
}
if (runing) {
openTimer();
}
}
//重新开始=========================================================================================================================
function reStart() {
clearInterval(timer);
//confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框
alert("此次游戏失败，要重新开始吗？");
clearInterval(timer);
window.location.reload();
}
//设置转向和加减速==================================================================================================================
$(document).keydown(function(e) {
e = e || window.event;
var keyCode = e.which || e.keyCode;
switch (keyCode) {
case 37:
if (moveDir != "right") {
moveDir = "left";
}
break;
case 38:
if (moveDir != "down") {
moveDir = "up";
}
break;
case 39:
if (moveDir != "left") {
moveDir = "right";
}
break;
case 40:
if (moveDir != "up") {
moveDir = "down";
}
break;
case 65: //加速
add_v();
break;
case 83: //减速
sub_v();
break;
}
});运行效果：
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
