- 博客(16)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 lineheight使图片多行文字垂直居中
多行文字垂直居中html部分： Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis
2016-06-27 19:37:17
539
原创 利用Canvas+js实现贪吃蛇(4)
将贪吃蛇改造成面向对象，类似插件的东西。过程中，要把握好this的指向，因为这个，调试了好大会将randFood进行了修正，添加了一个配置参数与默认参数合并方法，其他的都还是一样的。html代码没有改，在第一篇文章里代码附上：function tanchishe(options) { this.canvas = options.canvas; this.sp
2016-06-25 13:54:25
1440
原创 js面向对象
今天看了一些js面向对象的视频，js做的事真的好多1、// 模拟重载2、// 调用子类的方法3、// 链式调用4、// 抽象类代码奉上// 模拟重载function Person() { var args = arguments; if (typeof args[0] === 'object' && args[0]) { if (args[0].name)
2016-06-25 10:37:11
277
原创 js面向对象与继承
直接来代码function Person(name, age) { this.name = name; this.age = age;}Person.prototype.hi = function() { console.log('Hi,my name is' + this.name + ',I`m ' + this.age + ' years old now.');};Pers
2016-06-23 16:42:41
299
原创 利用Canvas+js实现贪吃蛇(3)
想了想，蛇向下走的时候按上键，如何直接将蛇头变蛇身，好像不符合常理，所以处理这种情况，应当做蛇头碰到蛇身。。另外，实现蛇头碰蛇身的功能界面就不美化了。。。下一步就是封装成面向对象的插件了。。。附上js代码window.onload = function() { var canvas = document.getElementById('myCanvas'),
2016-06-23 14:29:25
1019
原创 利用Canvas+js实现贪吃蛇(2)
相比1 来说，增加了，以下功能：1、蛇每次一次食物，蛇身就增加 1。 2、吃一次食物，速度就加快20毫秒 未实现：蛇头碰到蛇身时，游戏结束。。。。bug：在它向上移动时，按 向下键，身体出问题了，不过 不影响继续游戏 。。同理，上下左右都有这个问题参数：var canvas = document.getElementById('myCanvas'),
2016-06-19 12:06:42
634
原创 利用Canvas+js实现贪吃蛇(1)
今天想写一个贪吃蛇的页面，于是就选择了Canvs，不过只实现蛇身的长度是1的情况，对于蛇身大于2的情况，我还没想出来 如何绘制蛇，等查资料后，再来实现下面是源码部分：html： score:0js部分：window.onload = function() { var canvas = document.getElementById('my
2016-06-12 21:04:29
3320
原创 CSS3实现炫酷进度条
看了一个进度条很漂亮，所以自己试试看html 0 css样式：* { margin: 0; padding: 0; font-family: 'microsoft yahei'; } html,body { width: 100%; height: 100%; background-color: #222; }
2016-06-10 13:32:28
2356
1
转载 css3中-webkit-text-size-adjust
1、当样式表里font-size2、-webkit-text-size-adjust放在body上会导致页面缩放失效3、body会继承定义在html的样式4、用-webkit-text-size-adjust不要定义成可继承的或全局的
2016-06-08 20:02:41
398
原创 CSS3中的display: box
今天看源码时，看到了display: -webkit-box;display: box; 似乎是第一次见，上网搜寻：display: box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。毕竟属于CSS3的东西，目前而言，仅Firefox/Chrome/Safari浏览器支持弹性盒子模型（IE9不详，Opera尚
2016-06-08 17:22:48
681
原创 window.onload，body onload，document.onreadystatechange
1、window.onload 页面全部加载完成，甚至包括图片2、body.onload 等doucment加载完成再加载相应的脚本3、document.onreadystatechange 当页面加载状态改变的时候执行这个方法。document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. fu
2016-06-08 17:06:37
491
原创 CSS3实现二级菜单
今天看了一个demo，原demo虽说是CSS3实现，但其中也使用了js，再一个里面的代码有些地方，我觉得还可以优化 ，所以自己就尝试着用css3实现一下我想说: 不论写一个多么炫酷的demo，z-index的值都最好不要超过2下面是源码：html部分 Animated Menu Dashboard
2016-06-08 16:20:40
2196
原创 js点击列表的第一个元素，不起作用，最后一个元素起作用
在网上看到 手风琴菜单的demo，就想来模仿着做一个html内容如下： First Menu Home About Us Services
2016-06-06 20:46:28
1850
原创 javaScript删除元素
有一段html代码 div1 div2 div3 div4 div5 假如我想删除div中的第二个div，我需要找到这个元素，在找到父元素，用removeChild进行删除。但是，看到一个办法，就是使用 outerHTML = '' 这个方法，outerHTML可以获得含标签在内的字符串，将字符串置
2016-06-03 11:15:46
400
原创 javaScript文档中常用的集合
1、forms集合2、elements集合3、options集合4、rows集合5、cells集合6、images集合7、links集合8、anchors集合9、frames集合使用：假如想获得 一个html中所有img标签的元素，你可以使用document.getElementsByTagName('img')，更简单的办法是document.images
2016-06-02 15:07:49
279
原创 offsetTop和offset().top
前段时间写了一个视觉差滚动的demo，是用js实现的。第二次看这个例子，我想封装一个jquery插件。首先demo中有两个button需要在jq中对它们进行定位，然而问题来了我先得到第一张图片的位置，对图片中的button的top进行定位时，想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this
2016-06-01 16:34:09
7634
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人