鸿蒙开发者社区

公众号矩阵

移动端

视频课免费课排行榜短视频直播课软考学堂

全部课程软考信创认证华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

账号设置退出

前端

2.9w内容

关注

分享前端领域的前沿热点、技术实战、框架应用和使用案例，为开发者学习前端技术提供参考。

文章博文帖子课程

共 2.9w 条

HTML 5 WebDataBase设计离线数据库

我们这边使用WebSQL来设计和编写底层服务，W3C 的 WebDatabase 规范中说这份规范不再维护了，但是几乎实现者都选择了SQLite这种轻量简单易用的客户端数据库:

2012-05-23 09:49:50

HTML 5文档转换工具Crocodoc兴起

Crocodoc是一个可以将PDF和Office文档迅速转变成HTML5的网站，目前该网站应用很广泛，包括Drophox、LinkedIn、SAP、Yammer和Edomodo等都是Crocodoc的付费企业客户。

2012-05-23 09:40:09

jQuery tab切换防止页面刷新

tab切换，是一个很常见的效果，今天在项目中遇到这样一个问题。就是切换后，页面刷新，又重新定位到第一个上了，很是郁闷。在网上找了很多jquery效果，都是这样的，于是自己写了一个。防止页面刷新的tab切换。

2012-05-22 11:15:37

jQuery两个有意思的切换方法

话说，JQuery中toggle这是一个好玩意，用于绑定多个事件处理器函数，以响应被选元素的轮流click事件。如果元素是可见的，切换为隐藏。如果元素是隐藏的，切换为可见。

2012-05-22 10:12:59

jQuery模拟超链接的用户单击事件

模拟超链接的用户单击事件，我们需要做的就是：导入外部CSS文件，Main.css，导入外部JavaScript文件Main.js（必须在导入JQuery文件之后导入）；

2012-05-22 09:52:03

蘑菇与熊游戏开发第八回（完善游戏）

其实整个游戏其实还可以继续完善，比如说蘑菇被碰到后颤抖几下、碰撞声音、加入游戏帧数、加入关数、不同的关数、不同的动物和奖品、难度。。等等

2012-05-21 14:08:21

蘑菇与熊游戏开发第七回（熊碰到奖品处理）

给奖品加上一个存是否被撞过的属性hit，默认值为false。当奖品撞到的时候。改变hit的值为true。描绘奖品的时候判断hit值是否有没撞到，被撞到的话就不描绘。

2012-05-21 13:32:45

蘑菇与熊游戏开发第六回（绘制奖品）

由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置。需要到的全局变量、初始化托全局变量、定义奖品数据及实例、把奖品装进数组.....

2012-05-21 13:25:49

蘑菇与熊游戏开发第五回（熊碰撞蘑菇处理）

一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函数。二、熊碰撞蘑菇发生的事件以及处理。三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数。

2012-05-21 13:18:12

蘑菇与熊游戏开发第四回（熊碰撞边界处理）

第四回主要讲熊移动碰到边界时的反弹处理:一、写一个碰撞处理函数、二、在游戏循环GameLoop()尾部中加入检测边界函数，如下：

2012-05-21 13:11:51

蘑菇与熊游戏开发第三回（让熊动起来）

一、先定义全局变量、二、定义熊、三、描绘熊在画布上，注意上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码。

2012-05-21 10:53:30

蘑菇与熊游戏开发第二回（让蘑菇动起来）

定义蘑菇实例：由于在画布上的物体全部都有3个共同的属性：x、y坐标，素材image。所以我们定义一个公用的游戏物体。为了方便拓展，定义一个公用的蘑菇。

2012-05-21 10:45:30

蘑菇与熊游戏开发第一回（游戏分析）

游戏的介绍：用蘑菇顶住熊不给落地，熊碰撞完顶部的奖品为赢。顶部的奖品有3种:叶子、鲜花、橡子。我使用开发环境是：Dreamweaver。开发语言：HTML5,jquery。

2012-05-21 10:40:13

带来灵感的HTML5网站设计实例赏析

我们不会再去让HTML5和Flash去比较。现在移动端的普及已经让局面越来越明显起来。相信在未来HTML5将有更快更强的发展趋势。今天我们分享出了45个通过运用HTML5来设计编写的网站，你可以从中看到新的技术和设计创意灵感。

2012-05-21 10:05:10

HTML 5打造桌面应用

就在这个星期，我看到的一篇文章，宣称HTML5要“准备就绪”还要再过10年。我想问：“准备什么？”，当然目前还有许多API仍在发展，但大多情况下，HTML5就是现在进行时。

2012-05-21 09:31:56

HTML 5实现拍照上传应用实现

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源。

2012-05-18 15:10:22

HTML 5游戏制作之五彩连珠（试玩）

既然可以走动了，那就可以判断是否可以消除同样颜色的行、列或斜线了。只要>=5个同样的色球，就清除他们，并且可以继续移动。如果不可以清除，那就再增加3个球。

2012-05-18 14:05:53

HTML 5游戏制作之五彩连珠（寻路）

其实Canvas也是html的一个元素而已，所以我们可以给Canvas加click事件。来查看click时鼠标的坐标，这样就等得出点击了map的哪个位置。我们给game增加一个click方法，当Canvas点击时调用此方法。

2012-05-18 13:59:45

HTML 5游戏制作之五彩连珠（动画）

另外，我们不光飞入的动作需要重绘，游戏开始后玩家还要点击移动一个泡泡到另外一个格子，所以这里也要重绘。那绘制的信息这么多，整个重绘工作都要交给game来进行，game控制所有的父元素。

2012-05-18 13:11:09

HTML 5游戏制作之五彩连珠（设计）

分析一下游戏所需的元素：1、棋盘（地图）2、泡泡 3、等待区域（新的3个即将进入棋盘的泡泡）4、奖励区域（白搭星、超级百搭星、炸弹）5、统计信息 6、按钮

2012-05-18 13:07:04

HTML 5游戏制作之五彩连珠（画图）

棋盘起始的位置我也做了调整，只要修改起始的x y值，棋盘就会在这个点开始画。那，现在我们要在第五行，第六列画一个黄色的球，该怎么画呢？只需要给map增加一个方法，再调用这个方法就行啦

2012-05-17 14:45:34

HTML 5游戏制作之五彩连珠（预览）

ctx是canvas的绘制的类型2D的，以后会支持3D，那木，目前基于canvas的绘制都是调用2d context的方法。所以要了解绘制各种图形，得先看看他的api

2012-05-17 13:45:35

HTML 5实现的图片拖拽分组效果

基本目前所有的现代浏览器(Firefox，Chrome，Safari，或者Opera)都支持这个实用的功能。这意味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。

2012-05-17 13:17:26

HTML 5应用普及,浏览器取代应用商店

2012年可说是手机浏览器年，众多厂商纷纷踏入第三方手机浏览器的市场当中，旧的市场格局正在逐渐被打破，而这并不是偶然，必然的原因在于随着HTML5应用开发的普及，浏览器相较于应用商店而言成为了应用开发者们的首选。

2012-05-17 09:45:30

HTML 5开发RPG游戏之四（游戏脚本化）

先来考虑以什么形式来制作游戏的脚本，我们有多种选择，可以选择xml，可以选择json，也可以选择纯自定义语法，这次，我为了省事，选用比较方便处理的json，因为javascript可以很轻松的处理json数据。

2012-05-15 13:57:41

HTML 5开发RPG游戏之三（卷轴和对话）

按照上图说明，实现地图滚动，只需要先把即将出现的地图（图中黄色部分）画上，然后滚动地图，待地图滚动完毕之后，将屏幕之外的部分（图中绿色部分）

2012-05-15 13:44:00

HTML 5开发RPG游戏之二（跑起来吧英雄）

要控制游戏的人物，首先，我们要由控制事件，当触发这个事件的时候，就来调用相应的方法，做我们想要的做的处理setCoordinate和getCoordinate是设定和得到人物当前的坐标。

2012-05-15 13:29:20

HTML 5开发RPG游戏之一（地图人物实现）

在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上。

2012-05-15 13:10:57

HTML 5游戏开发实用建议

正是由于HTML5具有丰富的功能并且无处不在，所以它给开发者带来了很多的灵感。俗话说得好，“一旦开发者有了灵感，他们就开始编写游戏了。”

2012-05-15 10:35:35

Facebook发布HTML 5应用中心

Facebook发布HTML5应用中心，所有应用开发者都可以接入应用中心，但会有比苹果更加合理的审核方式，用户数低或质量差的应用不会被批准进入应用中心。

2012-05-15 09:42:06

非常好的jQuery矢量地图生成插件

插件的文档非常完善，你可以很方便的查看相关的选项和callback方法。相信大家肯定有机会应用到自己的网站开发和设计中，希望大家喜欢。

2012-05-15 09:35:43

CSS3制作Windows7开始菜单

如果我们分解这个Windows 7开始菜单，我们会得到1个div，2个ul列表，1组链接以及一些icon小图标，我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码

2012-05-14 16:29:53

用jQuery Mobile制作记事本

设计应用的总体架构；创建一个基本的用户界面模型；使用Jasmine开发框架定义应用的公共接口；开始实现已定义的公共接口。

2012-05-14 14:56:30

多个的HTML 5电商专业网站赏析

在当前的网页设计行业中，HTML 5无疑是热点，它有两大特点，既强化了Web 网页的表现性能，也追加了本地数据库等Web应用的功能。HTML5的很多新特性帮助网页设计师和开发人员制作出更加精美的网站。

2012-05-14 14:46:00

HTML 5的一个滑动拼图游戏

canvas的宽和高使用像素为单位。如果这两个属于没有被指定，他们的默认的宽度为：300px，高度为：150px。在图板画图需要使用canvas的上下文环境，通过脚本调用getContext()方法获取上下文环境。

2012-05-14 13:29:25

Web开发不可少的六个HTML 5编辑器

Mercury是个采用HTML5开发的WYSIWYG编辑器类似于TinyMCE或CKEditor。但拥有不同的使用体验。它不是放置在一个指定的元素中，而是出现在整个页面的上面。所以可用于编辑整个页面或任意指定一个区域。

2012-05-14 10:31:37

jQuery中关于Ajax的详解

本文介绍如何使用jquery实现Ajax功能. 用于发送Ajax请求的相关函数如load, get, getJSON和post这些渐变Ajax方法, 对于核心的ajax 方法没有过多介绍, 主要是通过配置复杂的参数实现完全控制Ajax请求。

2012-05-14 10:18:54

别怕！我们还有HTML 5和CSS3

不管是浏览器的历史遗留问题，还是互联网用户的习惯，都或多或少的限制着HTML5和CSS3的推广，我们期待规范制定者们能够尽快推出统一的标准，各个浏览器厂商能够更好更多地支持新特性。

2012-05-11 09:37:34

HTML 5实现淘宝语音搜索功能

淘宝网的语音搜索也有了一阵子了，但似乎都没看到相关的博客或帖子在说这个如何实现，今天查了点资料，发现原来实现是如此简单，可能是因为太简单了，也就没有人讨论了吧。

2012-05-10 15:41:46

实现JavaScript编写类的方式

构造方法方式：这是最基本的也是最像Java写class的方式。这样的方法简单明了, 也符合JAVAer的胃口, 但是每new一个新对象, 就会在内存中分配一个sayName方法, 性能不是很好。

2012-05-10 15:21:50

jQuery实现无限循环滚动公告

如果有2条公告或以上就有个滚动效果，实例请移目前端组公告栏。在此感谢Newton同学的耐心指导，不多说了，上代码！

2012-05-10 14:02:46

创建jQuery插件的建议

使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里分享10条我总结的经验。

2012-05-10 13:45:45

CSS 3D转换教程大放送

本文作者一直以来都在从事将2D转换成3D方面的研究。也许你会因一些概念、术语等将两者混淆，文中例举的这几款示例能帮你轻松解答困惑。对于CSS 3D爱好者来说，无疑是个不错的选择。

2012-05-10 10:55:03

多个很棒的jQuery教程

jquery 是一个非常优秀的 javascript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。今天的这篇文章收集了多个非常棒的 jQuery 教程分享给大家

2012-05-10 10:36:53

2012年Web设计和开发的15个趋势

我们很难预测将来会发生什么，但是一些设计师、开发工程师和行业的大师提出了自己的观点。以下是他们对2012年的一些猜测，关注这些方面，你更可能取得成功。

2012-05-10 10:01:31

HTML 5开发的优秀网页游戏

随着各大浏览器对 HTML5 技术支持的不断完善，越来越多的开发人员开始使用 HTML5 来开发交互性强、效果出众的 Web 应用和游戏。

2012-05-10 09:45:14

HTML 5如何实现缓冲效果

大家都知道Web2.0以来，应用程序的实现使用了大量Ajax，而Loading的小图标也有很多，甚至还有专门提供Loading图片的网站，所以我就想能不能让HTML5一并解决这个以前用gif文件才能解决的问题。

2012-05-09 14:49:23

微博@功能的详解

对这个功能进行分析如下：确定光标的位置、textarea文本框里对字符串@的判断、tip的弹出事件、键盘的操作事件、ajax调用、文字的插入等

2012-05-09 14:02:46

印象深刻的jQuery手风琴效果应用

jQuery 是最流行的 JavaScript 开发框架，它简化了 HTML 文档遍历，事件处理，动画以及 Ajax 交互，帮助 Web 开发人员更快速的实现各种精美的界面效果。

2012-05-09 13:45:04

难以置信的HTML 5和JS实验

今天，本文与大家分享其中9个很棒的例子，HTML5 Canvas 和 JavaScript 的实验项目，里面的例子都很独特，让人惊叹。为了有更好的效果，建议在Chrome浏览器中浏览。

2012-05-09 10:32:28

上一页 1 ··· 505 506 507 508 509 ··· 587 下一页

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区 AI.x社区

教育

51CTO学堂精培企业培训 CTO训练营