[TOC]

介绍

主要说明了如何进行浏览器历史管理：1.跳转页面；2.改变hash(#)值；3.pushState。跳转页面自不必说，点击链接页面就会跳转，通过浏览器页面上的前进后退可以切换。以下主要讲了后两种方法。

介绍

随机选择数字。很厉害的是灵活运用了splice，对选出的数据做了去重复操作。

介绍

通过改变hash值来控制页面内容，主要事件：onhashchange。

介绍

通过改变history对象中的state属性来控制页面内容：
主要方法：pushState();
主要事件：onpopstate
主要属性：event.state

介绍

照片墙，可以拖动图片，和相交面积最大的图片交换位置；可以点击随机按钮，让图片随机换位置。

学到了什么

1. 学会存储数据，备用。例：arr存的left值和top值，在后面多次使用；
2. 把功能分开，例：drag函数、nearLi函数、dis函数、crash函数，功能都非常单一；
3. 学会就参数变成json格式。

介绍

涉及到面向对象编程的小练习，概念：

• 面向对象的程序设计：OOP → Object-Oriented Programming
• 面向过程的程序设计：OPP → Procedure Oriented Programming

小练习包括：

• 切换选项卡（changetab-oop）
• 拖拽（drag-oop）
• 弹窗（dialog-oop-onoff）：使用对象作为开关标记已弹出弹框的做法非常聪明
• 类式继承（class inheritance）
• 组件开发（component development）
  • 基于对象的组件开发（component dev.-obj-based）
  • 组件开发之自定义事件（component dev.-custom event）
  • 基于jq的选项卡组件（component dev.-jq-based）：包含参数、方法、事件三者分离的**
• 放大镜（magnifier）
  • 面向过程之放大镜（magnifier-opp）
  • 面向对象之放大镜（magnifier-oop）
  • 面向对象之放大镜jq（magnifier-oop-jq）
  • 面向对象之放大镜组件版（magnifier-oop-module）
• 鼠标控制图片缩放（mouse control pic）
  • 鼠标控制图片缩放(面向过程)（mouse control pic - opp）
  • 鼠标控制图片缩放jq（mouse control pic - oop-jq）

介绍
两个通过jsonp解决跨域问题的小栗子：百度搜索 和 搜索豆瓣图书

介绍
百度搜索

说明 1.在搜索框里输入要搜索的内容；
2.鼠标可以移入建议项并跳转到相应的百度内容；
3.难点是找准请求地址。

介绍
搜索豆瓣图书

说明 1.在搜索框里输入要搜索的内容，点击查询；
2.鼠标可以点击书名跳转到相应的豆瓣图书详情页；
3.滑动滚动条可以继续加载图书并出现回到顶部的按钮；
4.难点是找准请求地址和滚动条划到什么位置继续加载图书。

介绍
点击按钮，出来文字

说明
1.要在服务器环境下才有效； 2.流程：通过ajax请求获取数据，处理数据，写入页面。

介绍
加载图片，滑动滚动条，继续加载图片

说明
1.要在服务器环境下才有效； 2.流程：通过ajax请求获取数据，处理数据，写入页面。

介绍
留言本

说明
1.要在服务器环境下才有效；
2.涉及到了数据库知识；
3.反复练习通过ajax请求获取数据和处理数据。

介绍
随机晚餐

说明
1.晚餐菜单保存在arr里，要添加或删除晚餐直接改arr数组就可以了；
2.点击 换 可以切换晚餐；
3.禁止了一些事件的默认行为(selectstart/mousedown/mouseup)，防止在点击页面时出现选中的蓝色背景，但如果要在页面中添加文本框，就要修改相关内容；
4.border-radius兼容了IE； 5.解决IE不能使用getElementsByClassName的问题；
6.加了自定义字体；
7.准备加的功能：a.在页面上输入菜名就可以添加；b.可以删除菜名；c.输入不当会有提示；
8.已经做了尝试：失败在目前我只知道cookie方法可以存储数据到本地，而chrome还不支持修改本地cookie）。等学习了更多内容再来完善。

说明
1.升级版，基本功能不变；
2.增加了添加菜单和删除菜单的功能；
3.添加重复菜单时会提示；
4.删除菜单时删除的是正在显示的菜单名； 5.按enter键时会取消焦点。

介绍
模拟滚动条

介绍
鼠标滚轮事件控制div的高度

说明
IE和chrome/firefox的鼠标滚轮事件名称不一样，绑定的方式也不一样。

介绍
实现了简易的拖拽功能

介绍
鼠标在元素四周按下拖动,可以改变元素大小

说明
1.改的是宽高和left/top值;
2.首先确定鼠标停留在哪边;
3.再根据鼠标停留的位置做数值上的改变。

介绍 通过键盘上的 上、下、左、右 键控制div

说明
1.按下键盘上的某个键不放，会出现卡顿问题（因为系统要辨别一下是用户误操作还是真的想连续操作），通过定时器可解决该问题。定时器控制走速，keydown事件控制走向。
2.网上搜到的解决办法是开启一个定时器，一直监测按下的键是不是上下左右键，是的话就运动。我给加了清除定时器的操作。

介绍

利用CSS3搭建3d环境，实现旋转图片的立体效果。

介绍

3d样式配合动画实现折纸动画效果。

介绍

3d样式配合动画实现动态切换图片效果。

介绍

运用定时器移动背景图。

介绍

运用定时器移动内圆背景图，定时器停止后让其进行3d旋转。

介绍

立体六边形

主要知识点

perspective 景深，即站到多远之外来看这个元素，近大远小 perspective-origin 景深基点，指视线从哪个方向看过去，默认是center center transform-origin 变换基点 transform-style:preserve-3d; 搭建3D环境 找准每个面的旋转轴和角度 解决第6个面覆盖第3个面和旋转之后倒立的方法：translateZ(-100px) rotateX(180deg)

介绍

用js封装了matrix方法，因为用css的矩阵matrix样式还要去算值，很容易算错，所以封装了一个简易的jsMatrix函数。只要把想实现的效果的值当作参数传进去，再运行一下就可以了；
jsMatrix函数可以实现旋转rotate、缩放scale、斜切skew、位移translate。

说明

保留2位小数的方法：先*100，四舍五入后，再/100；
斜切90度：tan90度为正无穷，计算出来的值很大，因此用100替代了。

介绍

导航按钮

主要知识点

CSS3 transition/transform等样式的使用；
用到公式求斜边和邻边；
用到transition end事件。

介绍

获取可视区域信息。 点击document，黄色div左移，再次点击，会回到原始位置。

主要知识点

node.getBoundingClientRect()

介绍

随机产生100个从0-100之间不重复的整数

主要知识点

开关，随机生成整数

主要知识点

定时器

介绍

时钟，注意60个指针以及时针、分针、秒针的旋转角度和原点设置

介绍

图片时钟，加载页面自动显示当前时间，切换的是图片

介绍

上翻时钟，切换的依然是图片，但是有一个上翻效果

介绍

自动循环轮播图

主要知识点

定时器

用法描述

1. 打开页面自动循环轮播图片；
2. 鼠标移入图片停止轮播；
3. 鼠标移出图片继续轮播。

介绍

鼠标移入图片，图片开始抖动。

主要知识点

定时器

介绍

自动生成一排div，点击document，div向下落，再点击，div向上升。

主要知识点

定时器

新需求

最后一个div落或升完成后，再次点击document才有效，否则点击无效。

说明

功能同上，满足需求“最后一个div落或升完成后，再次点击document才有效，否则点击无效”。

介绍

自动切换图片和鼠标移入悬停切换图片

主要知识点

定时器

用法描述

1. 打开页面图片从左边第一个 笑一笑 自动向下切换，同时改变图片；
2. 达到最后一个 丽质 时，图片向上倒着切换，直到第一个，如此循环往复；
3. 当鼠标移入时，定时器停止，图片不再切换；
4. 当鼠标移开时，定时器开启，图片再次自动切换，且从鼠标移开的位置开始切换，前进方向和移入前一样；
5. 点击window窗口上的任一点，停止定时器。

介绍

包含两个独立的练习：

1. music→选择音乐
2. score→点星打分

用法描述

1. 自动隔行变色，鼠标移入悬停改变该行颜色，移出恢复原本颜色；
2. 勾选checkbox，该行变成选中颜色；
3. 取消勾选checkbox，该行恢复原本颜色；
4. 勾选全选checkbox，所有行的checkbox都勾上，并变成选中颜色；
5. 取消勾选全选checkbox，所有行的checkbox都取消勾选，并恢复原本颜色。

用法描述

1. 鼠标移入星星隐藏右边的提示信息；
2. 鼠标移入星星提示相应的评价文本；
3. 星星分三种情况显示：移入星左边(含移入星星)、移入星左边(含移入星星)少于2颗、移入星右边；
4. 移入并点击星星改变星星显示，移出恢复星星显示。

介绍

点击切换相应的图片和描述文字

用法描述

1. 点击左边描述文字和底部描述文字切换到相应图片；
2. 点击左边第n个描述文字，第n个底部文字为选中状态，图片做相应切换；
3. 若底部没有第n个描述文字，则最后一个底部文字为选中状态，图片做相应切换。