2016年11月_吃瓜群众欢乐多

转载 CSS居中小谈-上下左右居中

http://web.jobbole.com/88804/内联元素居中方案水平居中设置：行内元素设置 text-align:center； Flex布局设置display:flex;justify-content:center;(灵活运用，注意兼容性和前缀)垂直居中设置：父元素高度确定的单行文本（内联元素）设置 line-height = height；父...

2016-11-26 12:05:59 271

原创 HTML5本地存储Localstorage

原文链接：http://caibaojian.com/html5%e6%9c%ac%e5%9c%b0%e5%ad%98%e5%82%a8localstorage.html基础知识vialocalstorage存储对象分为两种：原文来自：http://caibaojian.com/html5%e6%9c%ac%e5%9c%b0%e5%ad%98%e5%82%a8localstorage.ht...

2016-11-26 10:37:05 354

原创行星旋转案例canvas-konva.js未封装前的代码

静止状态下：整体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"...

2016-11-25 17:24:33 1523

原创面向对象封装--行星旋转案例canvas-konva.js

如图所示案例：具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。html代码： webitcas

2016-11-25 17:19:40 2423

原创面向对象canvas_进度条-Konva.js

效果图如下：html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"...

2016-11-24 19:11:43 1152

原创 Konva.js--矩形案例

body { padding: 0; margin: 0; background-color: #f0f0f0; overflow: hidden; } var stage=new Konva.Stage({ container:'container', width:window.innerWidth, height:win

2016-11-24 14:27:04 2411

原创 canvas人物走动--未进行JS封装时的源代码

img 点击改变方向左右前后 (function(){ var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); canvas.width=600; canvas.height=600; canvas.style.border="1px

2016-11-23 17:59:04 781

原创 canvas人物动画—走路

如图所示，小人在一直走动，并且点击上下左右时，会改变人走动的方向源图片：源代码：html代码：面向对象你的浏览器不支持canvas ← → ↑ ↓ (function(){ var canvas=document.getElementById('cavsElem'); // var ctx=ca

2016-11-23 17:54:37 6166

原创 Canvas扇形

Canvas案例- 你的浏览器不支持canvas，请升级浏览器 (function(){ var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2d'); var data = [{ "value": .2, "col

2016-11-21 21:00:39 796

原创 arttemplate两种用法

标准讲解链接：http://www.jq22.com/jquery-info1097用法一、放在script标签里面{{if longitude}} 经度:{{longitude}} 纬度:{{latitude}} 海拔高度:{{altitude}} 天气:{{weather}} 温度:{{temp}} 最低温度:

2016-11-18 16:27:12 2959

原创 jquery的jsonp.web

$(function(){ $.ajax({ type:"get", asyn:false, url:"./jsonp.php", // 相当于： // url:"./jsonp.php?cb=callback", // url:"./jsonp.php?_jsonp=abc", dataType:"jsonp", jsonp:"cb",

2016-11-18 14:39:10 204

原创封装Ajax

EMS #ems{ position: absolute; left: 50%; width: 400px; height: auto; margin-left: -200px; background: lightGreen; text-align: center; min-height: 50px; height: 500px;

2016-11-17 21:03:54 210

原创 Ajax与xml数据格式// Ajax与json数据格式

xml兼容性很好，任何浏览器都可以调用其中的数据1、Ajax与xml数据格式data.xml//文档声明三国演义文学描述水浒传文学草寇or英雄豪杰西游记文学妖魔鬼怪牛鬼蛇神什么都有红楼梦文学宝哥哥与林妹妹的爱情史 xml.html xml文档用法

2016-11-17 12:44:07 235

原创 ajax中responseText与responseXML区别

1、"responseText”属性以字符串形式返回HTTP响应；“responseXML”属性以XML形式返回HTTP响应。 var message = xmlHttp.responseText; telText.value = message;2、“responseXML”属性返回了一份XML文档对象，可以使用W3C DOM节点树方法和属性对该XML文档对象进

2016-11-17 11:34:25 498

转载 js中window.location.search的用法和作用。

用该属性获取页面 URL 地址：window.location 对象所包含的属性如图就是取出url中的参数。JS 脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得，然后通过 split 方法结合循环遍历自由组织数据格式。大概处理如下var searchURL = win

2016-11-16 09:44:02 4349

原创为什么不建议使用*{padding:0;margin:0;}进行reset？reset的目的是什么？？

原因：因为*需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。建议使用：html,body{padding:0;margin:0;}初始化的真正目的不上为了去掉默认的边距，只是为了统一所有的浏览器，正常化。

2016-11-12 19:43:07 1066 1

原创 CSS中一个冒号和两个冒号有什么区别

一个冒号是伪类，两个冒号是伪元素伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。伪类有：:first-child，:link:，vistited，:hover:，active:focus

2016-11-12 09:23:49 14276 1

原创 2016-11-11

今天双十一，可是我没有购物的心情，因为头疼，真的好难受。不晓得为什么会这样，兴许是早上吃了碗螺蛳粉吧，太辣了，影响了自己的胃。总之，今天整个人各种不舒服……哎，我以后一定要饮食规律，早上要吃得清淡点

2016-11-11 19:24:41 226

原创面向对象的程序设计-原型模式（案例：下拉菜单）

《javascript高级程序设计》第三版147页案例效果如图：代码如下无标题文档*{ padding:0; margin:0; list-style:none;}.all{ width:440px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:

2016-11-10 15:21:18 532

原创 tab栏再改进，为了减轻后台压力，鼠标快速滑过不响应，慢慢滑过才响应

1、var arrLi = str.getElementsByTagName("li"); var arrDiv = str.getElementsByTagName("span"); //遍历数组，事件源的数组(绑定事件用的) for(var i=0; i<arrLi.length; i+

2016-11-09 20:46:02 283

原创 tab栏切换效果：改进代码原理：闭包（共3步骤）

效果：1、2、3、

2016-11-09 19:34:04 1490

原创闭包原理--逐步改进加理解

公共代码：var btn1 = document.getElementById("btn1");//向左移动按钮 var btn2 = document.getElementById("btn2");//向右移动按钮 var box = document.getElementById("box");//移动的盒子1、var speed = 5; btn1.onc

2016-11-09 17:17:17 201

原创仿网易轮播图第二次，有改进

wangyi *{margin:0;padding: 0;} .w-slider{ width: 310px; height: 265px; margin:100px auto; position: relative; /*overflow: hidden;*/ } .slid

2016-11-09 10:53:01 291

原创仿网易轮播图

背景色还没去掉…… wangyi *{margin:0;padding: 0;} .w-slider{ width: 310px; height: 265px; margin:100px auto; background-color: pink; position

2016-11-08 21:24:58 438

原创 2016-11-08

这段时间电脑坏了，又加上其他七七八八的事情，学习上也耽误了一段时间，今天终于重拾旧业了！！！！现在晚上9点多了，一点也不辛苦！我很享受学习的过程，也喜欢学习带给我的成就感！我希望能够在前端方面有所成就！！自己要加油！！！！！！！！！上次电脑是戴尔，在学弟以及同学的推荐下，居然又买了戴尔，不过新款电脑用起来真心不错，速度上升了不止一个档次，二位是固态硬盘，质量上也上升了许多！！！不过也趁

2016-11-08 21:19:48 161

原创轮播图缓慢动画完整封装函数代码

需要用到直接调用即可animate(imgs[that],{left:0});// imgs[that]：移动的对象；后者为移动的属性，此处移动imgs的左边位置 // 多个属性运动框架添加回调函数function animate(obj,json,fn) { // 给谁 json clearInterval(obj.timer); obj.timer

2016-11-08 21:09:38 490

吃瓜群众的博客