拖拽
1 |
|
1 | <!DOCTYPE html> |
http://daili-11.github.io/vigour/index.html(响应式加点小动画)
http://daili-11.github.io/yibaidu/index.html(pc端加点小动画)
http://daili-11.github.io/hide/index.html(用到touch.js)
http://daili-11.github.io/fly/index.html(利用canvas)
http://daili-11.github.io/vivo/index.html
http://daili-11.github.io/snake/foolishsnake.html(利用canvas)
http://daili-11.github.io/snake/index.html
http://daili-11.github.io/jingyingba/Index/index.html
http://daili-11.github.io/xieyi/index.html(响应式布局)
http://daili-11.github.io/shopping/html/help.html
http://daili-11.github.io/shopping/html/visual.html
http://daili-11.github.io/shopping/html/classify.html
http://daili-11.github.io/shopping/html/menu.html
http://daili-11.github.io/shopping/html/video.html
http://daili-11.github.io/shopping/html/loading.html
http://daili-11.github.io/shopping/html/set.html
http://daili-11.github.io/goshopping/html/login.html
http://daili-11.github.io/goshopping/html/search.html
http://daili-11.github.io/goshopping/html/self.html
http://daili-11.github.io/goshopping/html/someone.html
http://daili-11.github.io/goshopping/html/register.html
http://daili-11.github.io/goshopping/html/buyCar.html
http://daili-11.github.io/goshopping/html/order.html
http://daili-11.github.io/tab/html/select.html
http://daili-11.github.io/tab/html/do.html
http://daili-11.github.io/tab/html/xiangqing.html
http://daili-11.github.io/tab/html/danpin.html
http://daili-11.github.io/rabbit/html/findcircle.html
http://daili-11.github.io/rabbit/html/zanshang.html
http://daili-11.github.io/rabbit/html/publish.html
http://daili-11.github.io/rabbit/html/focus.html
one:关于体育的
http://daili-11.github.io/one/html/index.html
http://daili-11.github.io/one/html/news.html
two:关于钻石的
http://daili-11.github.io/two/html/index.html
http://daili-11.github.io/two/html/renqi.html
http://daili-11.github.io/two/html/details.html
three:关于服装的
http://daili-11.github.io/three/index.html
four:关于耳机的
http://daili-11.github.io/four/html/james.html
http://daili-11.github.io/four/html/james2.html
http://daili-11.github.io/four/html/james3.html
http://daili-11.github.io/four/james4.html
five:关于冲浪的
http://daili-11.github.io/five/demo2.html
http://daili-11.github.io/five/index.html
six:关于健身俱乐部的
http://daili-11.github.io/six/inter.html
http://daili-11.github.io/six/index.html
seven:关于影像仪器的
http://daili-11.github.io/seven/index.html
eight:关于婚纱摄影的
http://daili-11.github.io/eight/index.html
http://daili-11.github.io/eight/detail.html
nine:关于蛋糕甜点的
http://daili-11.github.io/nine/gallery.html
http://daili-11.github.io/nine/index.html
http://daili-11.github.io/nine/menu.html
ten:LONGBORAD.CN
http://daili-11.github.io/ten/index.html 主页
http://daili-11.github.io/twelve/index.html 商城
eleven:三毛摄影
http://daili-11.github.io/eleven/sanmao.html
http://daili-11.github.io/eleven/sd.html
http://daili-11.github.io/eleven/yushou.html
http://daili-11.github.io/periodic/periodic.html
http://daili-11.github.io/periodic/3d.html
http://daili-11.github.io/swiper/index.html
http://daili-11.github.io/dream/index.html
用到了zepto.min.js touch.js Swiper.min.js
http://www.cnblogs.com/txw1958/p/wechat-tutorial.html
http://mp.weixin.qq.com/wiki/home/
http://www.tuling123.com/openapi/cloud/home.jsp
https://github.com/thebird/swipe
http://www.bootcss.com/p/chart.js/
http://lab.seaning.com/index.html
http://www.cnblogs.com/xiaoyao2011/archive/2012/06/29/Jcrop.html
http://www.js-css.cn/divcss/admin/Amaze/admin-table.html
https://github.com/mogutt/README
https://github.com/matyhtf/php-webim
1 | 1. PC优化手段在Mobile侧同样适用 |
加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点
1 | 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个 |
1 | 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳) |
1 | 减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip |
1 | 写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载 |
1 | 首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化 |
1 | 将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量 |
1 | 大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失 |
1 | 图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示 |
1 | Cookie会影响加载速度,所以静态资源域名不使用Cookie |
1 | 重定向会影响加载速度,所以在服务器正确设置避免重定向 |
1 | 第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源 |
1 | 脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意 |
1 | 空Src会重新加载当前页面,影响速度和效率 |
1 | 重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能 |
1 | DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长 |
1 | CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式 |
1 | 空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则 |
1 | Display属性会影响页面的渲染,因此请合理使用 |
1 | Float在渲染时计算量比较大,尽量减少使用 |
1 | Web字体需要下载,解析,重绘当前页面,尽量减少使用 |
1 | 过多的Font-size引发CSS树的效率 |
1 | 为了浏览器的兼容性和性能,值为0时不要带单位 |
1 | a) 无前缀应放在最后 |
1 | 高级选择器执行耗时长且不易读懂,避免使用 |
1 | a) 避免不必要的Dom操作 |
1 | 每次Dom选择都要计算,缓存他 |
1 | 每次.length都要计算,用一个变量保存这个值 |
1 | ID选择器是最快的 |
1 | 使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作 |
1 | Viewport可以加速页面的渲染,请使用以下代码 |
1 | Dom节点太多影响页面的渲染,应尽量减少Dom节点 |
1 | a) 尽量使用CSS3动画 |
1 | Touchmove、Scroll 事件可导致多次渲染 |
1 | CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用 |
1 | 我只会简单的使用,毕竟英语不好也是个大问题,所以不要嫌弃它哦! |
1 | function _equals(per_number , next_number, operation){ |
1 | function indexofFn(str,font){ |
1 | //方法1 |
1 | /*myrandom(min,max) min到max范围的随机数*/ |
1 | function getTimeFn(year,month,day){ |
1 | function sort(arr){ |
1 | var arr=[5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9]; |
1 | function timerFn(n){ |
1 | function sortFn(arr){ |
1 | function moveFn(){ |
1 | function showFn(before){ |
1 | /*获取标签最终top和left obj 需要获取的标签对象 返回json{top:xxx,left:xxxxx}*/ |
1 | /*findUl 找到孙子并隐藏孙子及孙子下所有的子级 obj 孙子的爷爷利用递归 逐级找到孙子以及孙子下所有的子级,并隐藏所有找到的子级*/ |
1 | //查找下一个节点函数 obj参数为当前标签元素 |
1 | // 函数注释 改变元素滚动条高度动画函数 end参数是最终高度,不可为空 fn参数是计时器结束后执行的回调函数,可为空 |
1 | /* loadImageFn 预加载图片函数 arr参数是图片数组 fn是过程回调函数 over是结束回调函数 IE6判断不了 */ |
1 | 函数 |
1 |
|
1 | 变量的作用域无非就是两种:全局变量和局部变量。 |
1 | var a = 5;//全局变量 |
1 | var a = 6; |
JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。
1 | /*什么闭包:function函数就是一个闭包,闭包里面的变量是封闭的,函数外面不可以获取。主要功能:function里面再嵌套一个函数,把这个函数返回出去 赋给外面的变量,函数外面就可以获取到函数里面的内容 注意的问题:闭包要注意内存溢出的问题,不可以乱用,需要用得才用*/ |
1 | 简而言之,闭包的作用就是在a执行完并返回后,闭包使得javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。 |
去重复
1 | var arr = [5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9]; |
1 | var arr = [5,3,2,4,8,1,7,6]; |
1 | eval() 函数可将字符串转换为代码执行,并返回一个或多个值 |
1 | var str = "function(){alert('a');}“; |
1 | eval()的返回值遵循以下规则: |
Date
时间戳:是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数
1 | // var oDate = new Date(2015,5,30); |
1 | /*一次性定时器 setTimeout(a,b); a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/ |
1 | /*循环性定时器 setInterval(a,b); a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/ |
倒计时的实现
1 | setInterval(function () { |
HTML部分
1 | <!DOCTYPE html> |
CSS部分
1 | .wrap{ |
JS部分
1 | //画出时钟 |
1 | 对于网站开发人员来说,浏览器信息和统计数据都是非常重要的。 |
js判断浏览器
1 | var a = window.navigator.userAgent; |
1 | 思路: |
HTML部分
1 | <!DOCTYPE html> |
CSS部分
1 | .wrap{ |
js部分
1 | window.onload = function (){ |
以上例子仅供参考!!!!感谢您的阅读,祝您学习愉快!!
1 | String |
案例:字符串的截取
1 | <!DOCTYPE html> |
案例 字符串方法以及查找字符
1 | <!DOCTYPE html> |
案例 字符串与数组
1 | <!DOCTYPE html> |
dorpdownlist(下拉列表)
1 | <!DOCTYPE html> |
1 | Math |
解析:
1 | console.log(Math); |
1 | Array 对象 |
解析
1 | //数组方法 |
栗子-输出随机的顺序
1 | var arr =['韦*','李*','戚*','杨**','张**','徐**','赖**','代*','李**','孔**','李**','庞**','胡**','肖*','肖*','张**','唐*']; |
输出随机的顺序函数代码
1 | //随机打乱数组内容 |
获取范围内的随机数
1 | /*myrandom(min,max) min到max范围的随机数*/ |
H5基础
HTML5 是下一代的 HTML。
2.CSS3样式属性
圆角
语法
例子
1 | /*border-radius:[ length | percentage ]{1,4} ] / [ length | percentage ]{1,4} ] 默认值:0*/ |
简写
1 | .a{ |
图像边框
1 | <!--border-image-source : none | url(图像来源路径)默认值:none |
阴影
文本阴影
语法
1 | /*text-shadow:none | shadow [ , shadow ]*shadow = length{2,3} && color ]默认值:none */ |
取值
1 | none: 无阴影 |
盒阴影
语法
1 | /*box-shadow:none | shadow [ , shadow ]*shadow = length{2,4} && color 默认值:none inset 内阴影*/ |
取值
1 | 第4个长度值:可选,阴影外延值。不允许负值 |
背景尺寸
1 | /* |
H5基础
HTML5 是下一代的 HTML。
1.语义化更好
1 | 新增标签 |
3.表单功能增强
1 | 新增的input元素的类型 |
5.响应式
响应式主要利用的是
1 | CSS3——media query(媒体查询) |
流式布局
1 | 仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组css媒体查询突变到另一组,两者间没有任何平滑渐变。 |
viewport 视口(改变分辨率)
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
媒体查询
1 | screen用于电脑屏幕,平板电脑,智能手机等。 |
栗子
1 | @media screen and (min-width: 320px) and (max-width: 640px){ |
核心的属性
Orientation-设备方向
1 | @media screen and (orientation:portrait){}/*-竖屏-*/ |
CSS3
1.更多选择器类型
通用选择器
1 | ~ : E~F{ } 匹配任何在E元素之后的同级F元素(从E元素往后找同级兄弟F元素)ie9以上 |
属性选择器(优先级比类选择器高,比id选择器低)ie8以上
1 | E[att^=“ val”] :属性att的值以“ val”开头元素 |
伪类选择器
1 | E: root 匹配E元素的根元素(html) |
1 | js什么的用文字说都太丧心病狂了,所以能用代码解决的事就不要揪着文字不放了!!!以下所有分析都在代码里,别说你看不见!!! |
代码
1 | <!DOCTYPE html> |
代码
1 | <!DOCTYPE html> |
代码
1 | <!DOCTYPE html> |
1 | function |
H5基础
HTML5 是下一代的 HTML。
3.CSS3进阶属性
CSS3渐变(linear-gradient(线性渐变)、radial-gradient(径向渐变))
线性渐变
1 | a{ |
径向渐变
1 | .a{ |
练习-使用渐变画出一个球体和渐变的圆角
1 | <!DOCTYPE html> |
蒙版
这里的蒙版与Ps的效果相反,不熟悉的可以先去玩Ps的,不过最后记得把思路转过来!!以下栗子接好
1 | { |
属性
1 | 蒙版图片:-webkit-mask-image: url()/gradient); |
CSS3倒影(reflect)
1 | .a{ |
CSS3过渡(transition)
1 | .transition{ |
CSS3 3-2D-3D变形(transform)
1 | transform:scale() ;缩放X Y |
栗子
scale
1 | <!DOCTYPE html> |
translate
1 | <!DOCTYPE html> |
rotate
1 | <!DOCTYPE html> |
skew
1 | <!DOCTYPE html> |
3d
1 | <!DOCTYPE html> |
练习-做一个立方体
1 | <!DOCTYPE html> |
过渡
1 | 贝塞尔曲线:cubic-bezier.com/#.17,.67,.83,.67 |
小贴士
1 | 浏览器内核(标准样式不用加内核前缀) |
动画
1 | animation:property(属性) duration(执行时间) timing-function(过渡曲线) delay(延时) iteration-count(循环次数) direction(翻转动画轨迹) play-state(动画暂停) fill-mode(动画前后位置) steps(number)(分成number帧) |
keyframes样例
1 | @-webkit-keyframes 'wobble' { |
animation属性
1 | -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/ |
传说的栗子
1 | <!DOCTYPE html> |
帧动画的栗子
1 | <!DOCTYPE html> |
引用字体包
1 | font-spider.org/ 字蛛,中文字体压缩器 |
1 | @font-face { |
终端压缩 到达文件路径后进行压缩 font-spider ./demo/*.html
图标字体库
1 | fontawesome.dashgame.com/ |
调用
1 | <!DOCTYPE html> |
小贴士
显示Mac系统文件夹目录(终端输入)
defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder
CSS3 分栏(适用于:报纸类、文字类)
栏数控制 column-count
栏间距 column-gap
栏宽度 column-width
是否跨栏显示 column-span all/none
1 | 语法:columns |
栗子
1 | <!DOCTYPE html> |
CSS3 自适应布局
1 | flew-box:弹性布局(IE9以上,手机端部分浏览器有bug) |
来颗栗子压压惊
1 | <!DOCTYPE html> |
小栗子
1 | <body> |
排列顺序
1 | .wrap{ |
显示顺序
1 | .wrap div:nth-child(1){ |
对齐方式
1 | .wrap{ |