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的更多相关文章

随机推荐

IoTClient开发3 - ModBusTcp协议客户端实现
前言进过前面两章的介绍,今天开始正式的实战. 进制转换很多朋友对于进制转换可能是在刚学计算机的时候有接触,后来做高级语言开发可能就慢慢忘记了.我们做工控开发的时候需要经常进行进制转换,这里和大家一 ...
【阿里云IoT+YF3300】8.物联网设备用户脚本开发
除了我们必须熟悉的网页脚本,比如JavaScript.其实在工业自动化中,组态软件是必备脚本的,只是有的脚本语言风格类似C或类似Basic而已.比如昆仑通泰的组态屏中的组态软件.通过安装组态软件可以简 ...
汇编实战准备：DOS调用命令
mov dx,offset message mov ah, int 21h 将message的偏移地址赋值给dx,之后 MOV AH,9 INT 21H 调用DOS功能,该功能为显示打印DS:DX地址 ...
创建 numpy.array
# 导包 import numpy as np numpy.array nparr = np.array([i for i in range(10)]) nparr # array([0, 1, 2, ...
[模板]tarjan——最后通牒
这么久了我还是不会板子,你们随便笑话我吧. 再不会打我实在是无能为力了. 这篇博客写的像个智障一样...写它的目的就是自嘲? 才不是,为了方便查阅,因为我真的记不住. 对于割边,要存储该点入边的编号, ...
NOIP模拟测试9
又考崩了咕咕咕... T1:随好题标记前置芝士: 原根:质数P的原根g满足1<=rt<P,且rt的1次方,2次方…(P-1)次方在模P意义下可以取遍1到(P-1)的所有整数. ...
st表复习笔记
st表,一种高效的区间最值查询(RMQ)算法.本质其实是一个动态规划. 其实吧,对于看过线性dp的人来说应该不难理解,只是处理有些麻烦.但是本土狗因为-1的问题居然改了许久... 用两个2^i的区间把 ...
学习笔记之vim的使用
很多刚学习linux编程的人总是对vim有一种恐惧,我自己就是这么回事的. 可是当你努力的去尝试学习使用后,才发现它的精髓所在. 在我看来,让vim变得好用的前提是要安装两个插件,ctags和tagl ...
SQlALchemy session详解
系列文章: Python SQLAlchemy入门教程概念 session用于创建程序和数据库之间的会话,所有对象的载入和保存都需通过session对象 . 通过sessionmaker调用创建一个 ...
jsoup爬虫实战心得
1.heder很重要,一切尽在header中.尤其cookie,useragent. 2.对于加密的连接,查看js加密过程并试着通过java或你正在使用的语言去实现 3.查看在跳转之前前端发起的关键请 ...

day20190916notes

day20190916notes的更多相关文章

随机推荐

热门专题