随笔分类 - 前端开发
摘要：前几天写了HTML5的俄罗斯方块，其实也不是想好好练一下HTML5，其实真正是想把HTML5的socket通信功能好好熟悉一下，当然喽，下一步也就是HTML5俄罗斯方块的网络对战版，敬请期待哦（网址http://www.9k6.net/games）今天尝试了一下html5的postMessage功能，一度出现了代码出错的问题，结合出现的错误，在这里给大家分享一下，以便大家遇到类似问题时不会抓耳挠腮~~两个页面，index.html和inner.html，其中在index中使用iframe调用inner.html页面。最初写的代码如下（出错的代码）index.htmlView Code 1 &l
阅读全文
摘要：昨天晚上，和搞C的朋友在一起，闲来无事，商量着一人搞一个俄罗斯玩玩吧，几天之后拿出来比比谁的更有特色，结果我打算使用HTML5写一个俄罗斯方块。自己写了一些俄罗斯方块的函数，现记下，分享给有需要的人（方法都是最原始的方法，有问题望多多指教）。后来改写后成型的HTML5俄罗斯方块体验地址：http://www.9k6.net/games以下的图形都是已经设置了方向，可以随意旋转，配置自定义颜色和坐标1、三叉图形：View Code /* * * @以长矩形的底边中心为pointX，pointY * @point ...
阅读全文
摘要：var can = $$('can');var cans = can.getContext('2d');window.location=cans.canvas.toDataURL('image/png');
阅读全文
摘要：PPT的背景有的很好看，其实有的是用图片，有的是用渐变做的，今天我试着做了一个渐变式的PPT背景图（特殊用途），使用的是Canvas的径向渐变矩形，其实没什么特殊的，直接上代码吧View Code <!DOCTYPE html><html><head><meta charset="utf-8"><title>Canvas</title><meta name="keywords" content="Canvas"><meta name="
阅读全文
摘要：Canvas还有一个好的功能就是将文字书写出来，看实例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} </style> <
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} </style> <script type="text/java
阅读全文
摘要：Canvas是一个功能相当强大的画布，任由你去书写，当然，他也支持了图像处理的功能。drawImage（image，Dx，Dy）；//用于显示，有时会超出drawImage（image，Dx，Dy，Dw，Dh）；//用于缩放drawImage（image，Sx，Sy，Sw，Sh，Dx，Dy，Dw，Sh）；//用于剪裁、缩放、显示注：image是一个图像对象； Dx是画布中的x坐标，Dy是画布中的y坐标，Dw是图像在画布中的宽度，Dy是图像在画布中的高度，Sx，Sy，Sw，Sh分别是原图像中的x、y、width、height（本人较懒，略写一下）。下面是一个给出的剪裁的方法源代码：<!DO
阅读全文
摘要：有些人使用CSS做阴影效果，但是在HTML5中，canvas工具提供了一个相当不错的阴影效果方法，这可以使我们能够实现一个相当不错的阴影效果。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas
阅读全文
摘要：昨天写的博客中，写到了HTML5中使用Canvas画圆的方法，昨晚试了一下画一个笑脸，其实挺简单的，就是两个实心圆做眼睛，一个半圆弧做嘴，这个简单的笑脸就完成了，但是在做嘴的时候开始出现了问题：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; paddin
阅读全文
摘要：有些人有些不解，为什么Canvas的坐标是从左上角开始的，而且向下是Y的正方向，向右是X的正方向？其实我也很不理解~~为什么就不能给我们更多的自定义功能呢？下面我改写了一段Canvas画布调整的代码，包含了Canvas画布的移动、缩放和旋转等相关功能<!DOCTYPE html><html><head> <meta charset="utf-8"></head><style type="text/css"> body{margin:20px auto; padding:0; widt
阅读全文
摘要：HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。1、使用Canvas绘制直线：<!doctype html><html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} <
阅读全文
摘要：网站访问速度慢，一般主要有三个方面，一个是服务器端程序性能不佳，一个是网络传输速率不高，再有就是前端显示效率太低。
今天看了一本《高性能网站建设指南 前端工程师技能精髓》，对网页性能优化开始有了新的体会。一下是自己的感悟，也算是观后感吧，留下点东西以便以后能够用的上。
网页的性能瓶颈很多都不是在网络速率上的，而是在前端显示上。仅仅加载html文件大概占整个显示网页中的12%，可以见得，网页的后期显示在整个性能优化过程中需要更多的关注。
阅读全文
摘要：__autoload的功能是当程序中要使用的类不存在时，该函数将被调用。在面向对象的程序设计中，这个函数很有用，可以使函数智能加载某些文件与类，实现文件的动态包含、类的动态引用。下边是一个实例：<?phpfunction __autoload($class_name) { $class_name = str_replace('-', '', $class_name); $dirs = array('/plugins/'.$class_name.'/', '/includes/', '/includes
阅读全文
摘要：$("li").hover(function(){alert($("li").index(this));});
阅读全文
摘要：这大半天的就搞了一个跨域问题，那叫一个生不如死啊——前记 JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法，以活动为中心，一连串的活动的顺序组合成一个完整的工作进程。 之所以会有跨域这个问题的产生根本原因是浏览器的同源策略限制，理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。...
阅读全文
摘要：今天重温了一下Javascript，看到了数组的方法，其中有两个比较相似的方法——splice和splice，看着很像，就是多了一个p，但是用法却相当不一样。 1、slice slice是指定在一个数组中的元素创建一个新的数组，即原数组不会变var color = new Array('red','blue','yellow','black');var color2 = color.slice(1,2);alert(color); //输出 red,blue,yellow,blackalert(color2); //输出 blue
阅读全文
摘要：通过url进行传值，是php中一个传值的重要手段。所以我们要经常对url里面所带的参数进行解析，如果我们知道了url传递参数名称，例如:
/index.php?name=tank&sex=1#top
我们就可以通过$_GET['name']，$_GET['sex']来获得传的数据。但是如果我们不知道这些变量名又怎么办呢？这也是写这篇博文的目的，因为自己老是忘，所以做个标记，下次就不要到处找了。
我们可以通php的变量来获得url和要传的参数字符串：
$_SERVER["QUERY_STRING"] name=tank&sex=1
$_SERVER["REQUEST_URI"] /index.php?name=tank&sex=1
阅读全文
摘要：选项卡，不多说了，做不做网络的都知道，我学的比较晚，现在发一个选项卡制作的代码
效果下图所示：
源代码：
阅读全文
摘要：以前看着京东，淘宝的导航做的真好，真想哪一天自己也能做出来这么漂亮功能全的导航菜单。今天弄了一下午终于自制成功，主要使用jQuery和CSS，实现功能基本和京东一样。
功能介绍：
1、鼠标停留导航；
2、根据子列表的高度，自动调整对齐方式（顶端对齐/父类目对齐）；
3、父子类目样式一致。
这个问题困扰了我半天，也在一个群里求救，一个好心的兄弟给我一段JS代码，结果我还是没用上，最后看了一个选项卡的实例，终于把这个问题搞定了。解决办法是：
人为加宽父菜单的宽度，然后把右边框设置成0，最后记得把父标签的放在最顶端显示
父菜单： border-right:0; z-index:100; position:relative; 宽度覆盖子菜单
子菜单： 和父菜单背景色一样
阅读全文
