day20190916notes

记得学完知识，趁热打铁。认真看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;}

　　-------------------------------------------------------------------------------------------------------------------

jQuery_Chapter03_20190916/ 动画demo / .project

<?xml version="1.0" encoding="UTF-8"?>

<name>动画demo</name>

</projects>

<name>com.aptana.ide.core.unifiedBuilder</name>

</arguments>

</buildCommand>

</buildSpec>

<nature>com.aptana.projects.webnature</nature>

</natures>

<id>org.eclipse.ui.ide.multiFilter</id>

<arguments>1.0-name-matches-false-false-node_modules</arguments>

</matcher>

</filter>

</filteredResources>

</projectDescription>

　　-----------------------------------------------------------------------------------------------------

jQuery_Chapter03_20190916/ 动画demo / dh.html

<!doctype html>

<head>

<title>英雄难过棍子关</title>

</head>

</p>

</div>

</div>

$(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

---------------------------------------------------------------------------------------------------------------

jQuery_Chapter03_20190916/ 动画demo / img

1.jpg

2.gif

3.jpg

4.jpg

-------------------------------------------------------------------------------------------------------------

jQuery_Chapter03_20190916/ 动画demo / js / jquery-1.12.4.js

jQuery_Chapter03_20190916/ index.html

<!doctype html>

<head>

<title>当当图书导航</title>

<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-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>

<li><a href="">当当自出版</a></li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

</div>

<li class="all"><a href="">全部商品详细分类</a></li>

</ul>

</div>

/* 加载工厂函数*/

$(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>

轮播效果。

jQuery_Chapter03_20190916

lunBo.html

<!DOCTYPE html>

<html>

<head>

<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>

</div>

<ul>

</ul>

</div>

</body>

$(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>

</head>

<body>

</body>

</html>

jQuery_Chapter03_20190916/ stop.html

<!doctype html>

<head>

<head>

</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="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

jQuery_Chapter03_20190916/ tab.html

<!DOCTYPE html>

<html>

<head>

<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>

</div>

</body>

$("span").css("cursor","pointer");

$("span").eq(0).click(function(){

$(".d1").show();

$(".d2").hide();

})

$("span").eq(1).click(function(){

$(".d2").show();

$(".d1").hide();

})

</script>

</html>

day20190916notes的更多相关文章

随机推荐

【Redis深度历险】那些年Redis的数据结构
[Redis深度历险]那些年Redis的数据结构 Redis端口号6379的来源 Redis的端口号是6379,但这个端口号并不是随机选择的,源于"MERZ",这个单词在手机当中的 ...
ios Autolayout 按比例相对布局
看到一篇讲ios storyboard 按比例相对布局的博客,挺不错的转下来了! 可到liumh.com查看. 本文记录如何在 UIStoryboard 或者 xib 中进行百分比布局,包括 View ...
ssh WARNING:REMOTE HOST IDENTIFICATION HAS CHANGED(警告:远程主机标识已更改)
ssh 192.168.1.88 出现以下警告: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOT ...
NOIP模拟测试19考试反思
这次考试是存在很大问题的,(如果不是T1T2出乎意料地A了,鬼知道会发生什么) T2A是情理之中,考试的时候测的极限数据跑的很快(无论m什么范围),但是T1真的...... T3没有分配太多的时间+没 ...
使用Typescript重构axios(二十六)——添加HTTP授权auth属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
P2579 [ZJOI2005]沼泽鳄鱼（邻接矩阵，快速幂）
题目简洁明了(一点都不好伐) 照例,化简题目给一张图,每一个时间点有一些点不能走,(有周期性),求从起点第k秒恰好在终点的方案数,可重复,不可停留. 额dp实锤于是就被打脸了.... 有一种东西叫 ...
Python-webbrowser实现自动打开关、定时打开关闭网页/刷新网页
webbrowser- 方便的Web浏览器控制器,是Python一个模块,可实现自动打开关.定时打开关闭网页/刷新网页,在Unix下,图形浏览器在X11下更受欢迎,但如果图形浏览器不可用或X11显示器 ...
对于 TCP 三次握手的理解
假设名叫 A 和 B 的两个人要进行通信,那么他们两人之间,首先要确保通信顺畅. 而确保通信顺畅,就要从 3 个维度,确定 8 个能力 3 个维度分别是: 1.人知道(A 知道.B 知道) 2.人(A ...
Linux下编写-makefile-详细教程（跟我一起写-Makefile-Markdown整理版）
目录概述关于程序的编译和链接 Makefile 介绍 Makefile的规则一个演示例子 make是怎样工作的 makefile中使用变量让make自己主动推导另类风格的makefile 清 ...
[LC] 700题 Search in a Binary Search Tree （二叉搜索树中的搜索）（二叉搜索树）
①中文题目给定二叉搜索树(BST)的根节点和一个值. 你需要在BST中找到节点值等于给定值的节点. 返回以该节点为根的子树. 如果节点不存在,则返回 NULL. 例如, 给定二叉搜索树: 在上述示例 ...

day20190916notes

day20190916notes的更多相关文章

随机推荐

热门专题