记得学完知识，趁热打铁。认真看3遍，写抄写模仿3遍。记不得，就罚抄3遍。奖罚分明。自知之明。最重要的是看懂和理解代码。能自己看懂代码，多花时间和功夫。
只要功夫深，铁杵磨成针。确定一个努力的方向，坚持和努力。物理学。
默写：
jQuery_Chapter03_20190916/ css / style.css
* {
padding: 0;
margin: 0;
}
html {
color: #404040;
font-size: 12px;
font-family: "Arial", "微软雅黑";
}
a {
text-decoration: none;
color: #1a66b3;
}
ul {
list-style: none;
}
.left {
float: left;
}
.right {
float: right;
}
.hide {
display: none;
}
.clearfix {
clear: both;
overflow: hidden;
height: 0;
}
.wrap {
width: 1200px;
margin: 0 auto;
}
/**头部**/
.top {
height: 32px;
background: #f9f9f9;
padding-top: 2px;
line-height: 32px;
border-bottom: 1px solid #f2f2f2
}
.top,
.top a {
color: #646464;
}
.top a:hover {
color: #ff2832;
}
.top-l .top-login {
color: #ff2832;
margin-right: 5px;
}
.top-m> li {
float: left;
height: 22px;
line-height: 22px;
padding-top: 5px;
}
.top-m> li.line {
width: 1px;
height: 12px;
background: #e1e1e1;
margin: 10px 0 0;
padding: 0;
}
.top-m> li a {
display: block;
padding: 0 8px;
}
.top-m> li a.menu-btn {
padding-right: 27px;
background: url(../images/home_sprite.png) no-repeat right -307px;
}
.top-m> li a i {
margin-right: 6px;
margin-top: 3px;
}
.top-m> li.on {
position: relative;
border: 1px #e6e6e6 solid;
background: #fff;
}
.top-m ul.topDown {
position: absolute;
border: 1px #e6e6e6 solid;
border-top: 0;
width: 100%;
top: 27px;
left: -1px;
background: #fff;
}
.top-m ul.topDown li {
line-height: 24px;
}
.top-m ul.topDown li a {
display: block;
padding-left: 10px;
color: #000;
}
.top-m ul.topDown li a:hover {
background: #f2f2f2;
color: #000;
}
.top-m .top-car {
width: 15px;
height: 14px;
background: url(../images/home_sprite.png) no-repeat -40px -86px;
}
.top-m .top-tel {
width: 11px;
height: 16px;
background: url(../images/home_sprite.png) no-repeat -40px -70px;
}
.nav-box {
height: 36px;
line-height: 36px;
background: #ff2832;
color: #fff;
}
.nav-box li {
float: left;
}
.nav-box li a {
display: block;
padding: 0 15px;
color: #fff;
font-weight: bold;
font-size: 14px;
}
.nav-box .all {
width: 190px;
border: 2px transparent solid;
border-width: 0 2px;
margin-right: 18px;
}
.nav-box .all a,
.nav-box .all a:hover {
padding-left: 20px;
padding-right: 0;
background: url(../images/home_sprite.png) no-repeat 161px -567px;
}
.nav-box li.on {
position: relative;
}
.nav-box li .topDown {
position: absolute;
width: 120px;
background: #fff;
top: 24px;
left: 0;
}
jQuery_Chapter03_20190916/ images
home_sprite.png
logo.jpg
new_book.png
sprite.png
jQuery_Chapter03_20190916/ img
jianjie.jpg
woshou.jpg
zainishenbian.jpg
jQuery_Chapter03_20190916/ js / jquery-1.12.4.js
jQuery_Chapter03_20190916/ 动画demo
---------------------------------------------------------------------------------------------------------
jQuery_Chapter03_20190916/ 动画demo / css
----------------------------------------------------------------------------------------------------------------
jQuery_Chapter03_20190916/ 动画demo / css / style.css
*{padding:0;margin:0;}
.btn-box{width:500px;margin:50px auto;}
button{
margin-right:50px;
font-size:16px;
width:80px;
height:80px;
text-align:center;
line-height:80px;
color:#fff;
font-weight:bold;
border-radius:50%;
}
.btnClick{
display:block;
width:100px;
height:105px;
background:url(../images/btn-bg.png) no-repeat;
margin-left:60%;
margin-top:68px;
}
.bg1{background:url(../images/1.jpg) no-repeat;}
.btn-main{margin-top:60px;}
.container{
position:fixed;
bottom:0;
left:0;
height:35%;
width:100%;
}
.stick{
position:absolute;
left:50px;
bottom:100%;
height:5px;
width:0;
background:#096;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /*IE9*/
-moz-transform:rotate(-90deg); /*Firefox*/
-webkit-transform:rotate(-90deg); /*Ssfari and Chrome*/
-o-transform:rotate(-90deg); /*Opera*/
transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
-o-transform-origin:0 100%;
transition:transform 0.35s linear;
-moz-transition:transform 0.35s linear;
-webkit-transition:transform 0.35s linear;
-o-transition:transform 0.35s linear;
}
.stickDown{
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
.man{
position:absolute;
left:0px;
bottom:98%;
width:65px;
height:97px;
}
.man img{
position:absolute;
left:0;
top:0;
}
.well-box{
position:absolute;
height:100%;
left: 0px;
}
.well{
position:absolute;
height:100%;
background:#000;
width: 50px;
}
.well-box div:first-of-type{left:0px;}
.well-box div:last-of-type{left: 400px;}
-------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>动画demo</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
<filteredResources>
<filter>
<id>1567159293122</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
-----------------------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>英雄难过棍子关</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body class="bg1">
<div class="btn-box">
<p class="btn-main">
<button class="btnClick"></button>
</p>
</div>
<div class="container">
<div class="stick"></div>
<div class="man"><img src="images/stick_stand.png"/></div>
<div class="well-box"><div class="well"></div><div class="well"></div></div>
</div>
<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//鼠标摁下事件
$(".btnClick").mousedown(function(){
/**
* 使用动画设置棍子宽度
* $(selector).animate({params},speed,callback);
*/
$(".stick").animate({"width":"500px"},2000);
}).mouseup(function(){
//停止动画,并将棍子水平放置
$(".stick").stop().addClass("stickDown");
//将静态图片替换成动态图片
$(".man img").attr("src","images/stick.gif");
//获取棍子的宽度
var width = $(".stick").width();
$(".man img").animate({"left":width},2000);
$(".man img").animate({"top":"200px"});
})
})
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
jQuery_Chapter03_20190916/ 动画demo / images
---------------------------------------------------------------------------------------------------------------
1.jpg
jQuery_Chapter03_20190916/ index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
<style>
.d{
width: 80px;
height: 100px;
border: 1px solid #999;
line-height: 32px;
position: absolute; /*可达到脱离标准文档流的作用 */
}
/*使用css设置当前元素隐藏 */
.menu-btn+ul{
display: none;
}
</style>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li>
<a href="" class="menu-btn">我的当当</a>
<!--<div></div>-->
<ul>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类</a></li>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
<li><a href="">服装</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">婴孕童</a></li>
<li><a href="">家具</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
/* 加载工厂函数*/
$(function(){
//鼠标移进、移出方式一
/*$(".menu-btn").mouseover(function(){
$(this).next().addClass("d");
});
$(".menu-btn").mouseout(function(){
$(this).next().removeClass("d");
})*/
//鼠标移进、移出方式二
$(".menu-btn").mouseover(function(){
//设置css样式显示
//$(".menu-btn+ul").css("display","block");
//使用jQuery显示函数
/*$(".menu-btn+ul").show();*/
$(".menu-btn+ul").fadeIn(1000);
$(this).next().addClass("d");
}).mouseout(function(){
//设置css样式隐藏
//$(".menu-btn+ul").css("display","none");
//使用jQuery隐藏函数
/*$(".menu-btn+ul").hide();*/
$(".menu-btn+ul").fadeOut(1000);
$(this).next().removeClass("d");
})
//鼠标移进、移出方式三
//使用复合事件+复合样式操作
/**
* mouseover() 和 mouseout() 的复合事件 hover()
* show()和hide()的复合简单动画效果 toggle()
* addClass()和 removeClass()的复合样式效果 toggleClass()
*/
/*$(".menu-btn").hover(function(){
$(".menu-btn+ul").toggle();
$(this).next().toggleClass("d");
});*/
})
</script>
</body>
</html>
轮播效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告轮播</title>
<style>
#d{
width: 500px;
height: 360px;
margin: 0px auto;
border: 2px solid red;
position: relative;
}
#d img{
display: inline-block;
width: 480px;
height: 350px;
text-align: center;
margin: 0px auto;
display: none;
position: absolute;
}
ul{
list-style: none;
display: flex;
position: absolute;
bottom: 0px;
left: 130px;
}
ul li{
width: 20px;
height: 20px;
border-radius: 10px;
background-color: grey;
color: white;
text-align: center;
font-size: 12px;
margin: 10px;
}
.orange{
background: orangered;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d">
<div>
<img src="img/jianjie.jpg" alt="1" />
<img src="img/woshou.jpg" alt="2" />
<img src="img/zainishenbian.jpg" alt="3" />
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//默认显示第一个
$("img").eq(0).show();
$("li").eq(0).addClass("orange")
//定义当前获取的标签下标位置
var _this = 0 ;
//定义一个变量,用来判断当前轮播是自动的,还是手动的,默认false,自动轮播
var stop = false;
/*手动切换广告*/
//设置li标签的鼠标悬浮事件
$("li").mouseover(function(){
//更改当前轮播的js变量
stop = true; //标志是手动轮播
//获取当前li标签的下标位置,下标从0开始
_this = $("li").index(this);
//alert(_this);
//获取所有的img标签
$("img").eq(_this).stop(true).fadeIn().siblings().stop(true).fadeOut();
$("li").eq(_this).addClass("orange").siblings().removeClass("orange");
}).mouseout(function(){
stop = false; //自动轮播
});
/*自动轮播*/
/*window.setInterval(function(){},1000);*/
//获取当前的img个个数
var imgLength = $("img").length;
window.setInterval(function(){
//判断当前轮播方式
if(stop==true){
return; //停止
}
if(_this==imgLength-1){
_this = 0;
}else{
_this++; //自定义加1
}
$("img").eq(_this).stop(true).fadeIn().siblings().stop(true).fadeOut();
$("li").eq(_this).addClass("orange").siblings().removeClass("orange");
},1000);
})
</script>
</html>
jQuery_Chapter03_20190916/ mouse.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<head>
<script src="js/jquery-1.12.4.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;200px;position:absolute;">HELLO</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d{
width: 500px;
height: 500px;
margin: 0px auto;
border: 1px solid red;
display: flex;
}
.d1,.d2{
width: 400px;
height: 200px;
}
.d1{
background: deeppink;
}
.d2{
background-color: peru;
}
span{
display: inline-block;
width: 200px;
line-height: 32px;
}
.s1{
background: paleturquoise;
}
.s2{
background: blueviolet;
}
.d2{
display: none;
}
</style>
</head>
<body>
<!-- div#d>div>span*2+div*2 -->
<div id="d">
<div>
<span class="s1">切换卡1</span><span class="s2">切换卡2</span>
<div class="d1">切换卡1内容</div>
<div class="d2">切换卡2内容</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$("span").css("cursor","pointer");
$("span").eq(0).click(function(){
$(".d1").show();
$(".d2").hide();
})
$("span").eq(1).click(function(){
$(".d2").show();
$(".d1").hide();
})
</script>
</html>