简单整理的一些座屏和dome，有时间就会整理一些
项目作品
作品1
FM类型音乐播放器
利用已经封装好的豆瓣音乐api制作一个功能相对完善的网页版音乐播放器。
基本功能：
- 增加换肤功能，使用两套css样式，点击按钮加载不同样式，cookie判断用户上次选择的皮肤，有效期10天
- 歌曲、歌词和频道列表的获取和展示，自动播放，单曲循环、随机播放，获取频道歌曲
- 页面的展现和拖拽功能
- 歌词随着时间的自动播放
- 进度条的滑动、跳进
- 音量的调节
用到的技术：
- 性能方面考虑，所有图标使用字体图标库(iconfont)
- html元素写入网页内容，H5媒体元素标签audio引入音乐资源，使用div、a、无序列表ul等元素实现网页基本内容
- css实现网页样式和布局，包括float及浮动的清除、position的绝对定位及相对定位、居中，颜色、大小、背景、display的设置，歌曲列表和歌词溢出隐藏，字体图标的引入,鼠标手势，元素选择器及伪元素选择的使用。
- js代码功能的实现，依照jQuery
- 整个播放器页面和按钮的拖放，点图标页面展现，播放页面只在第一次展现发送ajax获取歌曲，
- 页面展现后的自动播放事件，包括进度条、歌词的滚动，收起后停止。
- ajax请求获取频道channel信息、歌曲song和歌词信息
- 将频道信息拼装成dom添加到页面，歌曲信息放入audio标签并播放，歌曲名称和歌手的显示
- 获取歌曲信息后，首先使用正则匹配出时间，并将内容转化为json格式，歌词依照时间次序拼装成dom，歌词滚动时依次向上出现
- 歌词按钮、播放、单曲和随机播放、下一首、音量、频道列表按钮面板功能的实现。
- setInterval实现进度条和歌词的自动功能，播放时间的显示，进度条的点击和滑动控制播放进度，音量功能的实现也是如此。
- 代码的封装，利用js的prototype和闭包实现封装，html的生成也放入js中。
遇到的问题：
- 页面第一次加载获取歌曲但是并不播放，点击按钮页面展现并播放。设置一个标志位，当点击按钮页面展开后打开标志位，以后每次获取歌曲后自动播放。
- 高度和宽度的计算必须在动画完成后进行都则出现计算错误，进度条功能受限，将宽高取值和一些功能放在jQuery.animate动画执行完后的function中。
- 页面展现按钮和拖拽功能发生重叠，将click事件分解成up和down，移动时设置一个标志位，如果移动click事件不执行。
- 拖拽的问题，主界面和展现按钮会发生未知错乱，使用display：table形成BFC讲所有元素包含在一个容器内，并使用绝对和相对定位。
- 歌词和进度条、歌曲转化的逻辑实现问题，歌词在第一次点开时发送请求，以后每次点击如果没换歌曲就不用请求。每次进度条变化都要自动播放，自动播放时需要判断当前歌曲和歌词是否对应，不对应重新发送请求(歌词打开)。当前歌曲播放完自动加载下一首
- 歌词内容的解析，以及转化为json格式JSON.parse(string),string要拼装符合符合格式要求。每句歌词内容按时间设置距离歌词顶部距离，样式要在append()之前设置，否则内容错乱。
- 利用好原型链和闭包实现封装。
作品二
图片
- 实现：
- html/body宽高100%，页面全屏使用宽高100%实现，display:table使用水平和垂直居中
- a标签的hover效果，class区别不同样式
- ul>li标签使用float浮动并清除浮动，调整大小宽度使在一列平均分布
- background-img的引入、位置摆放和显示方式
- font-awesome字体图标的引入和使用
- css不同样式的设置，大小、居中、对齐、颜色
作品三
1、 静态页面（二）
图片
2、 静态页面（三）
图片
- 实现：
- 导航条的固定定位的实现
- 悬停hover效果，出现列表选项，及样式
- 自定义字体和font-awesome字体图标的引入
- 设置html/body宽高100%，页面全屏使用宽高100%实现
- ul>li标签使用float浮动并清除浮动，设置大小并调整位置，实现两列三列的平均排列
- 绝对定位、相对定位的使用，文本的对齐方式
- 表单元素的使用和大小设置
作品四
轮播效果和组件的实现(jQuery)
淡入淡出轮播
实现：
- 首先页面全屏显示，使用宽高样式100%,图片显示使用背景图片或者img标签均可。
- 将轮播的元素水平排列，采用向前向后移动的方式实现前后轮播，每次移动一个图片的宽度，设置运动时间有个过渡。
- 将最后一个元素复制一份放在最前面，点击向前播放页面向后移动出现复制的最后一个图片，移动完后在赋值将真正的最后一个图片呈现，防止点击向前时突然跳转到最后一个页面。最后一个页面向后使用同样的方法。
- 使用jQuery的animate动画实现效果，添加底部对应的小长条的的class。
- 响应和性能考虑，使用懒加载的方式，将src或url资源存放在一个属性中，需哟啊加载时在将其赋值给src或url。
- setInterval实现自动，pre和next效果在最第一个和最后一个时判断。
- 设置window的”resize”时间，每次窗口变化时都重新计算下宽度。
- 淡入淡出的实现使用fideOut和fadeIn动画实现，每次当前淡入出现，其他图片淡出，不用添加dom元素。
- 设置动画的标志位，防止多次点击动画执行。每次动画执行设置一次下面的对应点的class效果。
- 多个轮播，利用轮播图序数的方式，一个个遍历，每个执行自己的轮播动画，使互不影响
作品五
ajax加载更多
实现：
- 定义好接口和路由，需要传递和接受的参数是什么
- ajax请求的实现，设置好数据格式及传递的方式(get/post)
- 根据所要实现的功能设置请求成功后的处理函数，本例接受一个状态参数：是否成功和一个与请求个数一样的数组[‘内容n’，’内容n+1’，…] 。功能是将他们拼装成li元素的内容添加到页面中。使用jQuery的操作。
- 设置请求错误时的处理函数。
作品六
- 可视范围懒加载图片及回到顶部
- 实现
- 懒加载是在同一个页面加载多张图片时，为了节省网络资源和用户体验将图片地址放置在元素自定义的属性当中，当页面需要图片的呈现时在加载图片的一种方法。
- 使用jQuery计算滚动距离scrollTop()和页面高度heght()的和是不是大于元素距离页面顶端的距离，当大于时说明该元素需要加载图片，执行加载操作。
- 设置标志位，已经加载的图片无须再次加载，将图片资源赋值给img的src并加载图片显示。
- 性能考虑，可以设置一个一个延迟判断，防止用户频繁滚动页面而频繁执行图片加载操作。
- goTop功能实现了封装，动态创建回到顶部的按钮，样式设置为display;none,当页面滚动超过一定距离时，按钮出现，绑定点击事件，页面滚动距离变为0，回到顶部
作品七
- stickup插件(jQuery)
- img图片在一个区块中水平垂直居中的小插件
- 实现
- 使用jQuery插件的方法$.fn=function(){…};
- stickup的原理是当页面滚动时判断导航条顶端是否与页面窗口重合，重合即设置为fixed固定定位，始终位于页面顶端。页面窗口远离导航条顶端时取消fixed
- 为防止设置fixed后，元素脱离文档流导致页面错乱。复制一份完全相同的导航条占位，透明度为0，不产生错乱。
- 设置data-fixed属性记录导航条是否设置了fixed样式，用于取消和设置fixed的判断。
- 图片居中的插件适用于一个div或其他元素中有一个img子元素，设置img元素以原比例的形式宽或高完全铺满，并且居中对齐.
- 可自定义设置需要显示的宽高，一般为容器宽高，默认宽高为320x240.
- 父容器需设置多出部分隐藏。
- return:this;支持jQuery链式调用。
作品八
- 瀑布流效果
- 基本实现：
- 使用jsonp的方式，访问新浪新闻的数据接口
- 设置好容器的大小，里面图片文字的样式
- 通过判断图片是否呈现在窗口中，判断是否加载，节省资源
- ajax获取数据，并将数据拼装成dom元素放在图片容器中
- 使用jQuery的Deffred的方法，确保图片下载完后摆放图片位置
- 通过将dom不断放入最低一列，实现瀑布流的摆放
作品九
- 使用canvas实现五子棋
基本实现：
- 使用canvas画布绘制棋盘，16*16
- 使用js实现逻辑功能，穷举并记录全部的赢法
- 落子功能的实现，每点击一次绘制一个圆并设置渐变，表示旗子，计算距离在交叉点上绘制
- 计算机落子遍历没有赢法，根据连子数量的不同设置权重，防止最接近赢的情况出现。
- 当出现五子连在一块时，弹出提示
使用canvas实现照片模糊与显示
- 实现
- 制作照片模糊的效果，按钮和键盘空格控制重置模糊与显示。
- 通过绘制两张相同图片的方式，第一张完全加载设置模糊效果，第二张使用canvas绘制清晰图片
- canvas里面img和原图位置大小不变，通过绘制圆将清晰图片展示在里面，半径扩大逐步绘制半径更大的圆
- 重置清空原来的绘制，重新绘制一个随机的小圆。
- 不同设备大小做一个简单适配