HTML5

HTML5实践-如何使用css3丰富图片样式的详解(二)
JavaScript

HTML5实践-如何使用css3丰富图片样式的详解(二)

154 0

之前的教程《HTML5实践 -- css3图片样式》,我介绍了如何为图片添加background-image包装,借助box-shadow 和 border-radius为图片设置多种多样的样式,有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题,background-image大小不能调整,这对于响应式设计就不太理想了。今天我们将尝试解决问题。   问题  大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味着

HTML5实践-可伸缩的mobile搜索框图文详解
JavaScript

HTML5实践-可伸缩的mobile搜索框图文详解

356 0

今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框,他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript,只使用了原生css属性,所以这是一个非常简单而高效的实现。   目的  在移动设备上显示信息,要做到寸土寸金,珍惜每一寸的屏幕。例如搜索框的设计,在一般情况下处于收缩状态,激活的时候才将他扩展开来,这样做可以为屏幕上其他元素提供更多地显示区域。这就是本课程要完成的工作。我们先来看一个效果图:  在我的站点 Best Web Gallery 也有类似的设计,当查询按

HTML5实践-使用css制作时间ICON的具体详解(图)
JavaScript

HTML5实践-使用css制作时间ICON的具体详解(图)

200 0

最近我在重新设计自己的博客站点,决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片,感谢css3,现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。  photoshop 概念图  很多设计者采用直接在浏览器上设计的方式,但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现,但是用photoshop设计效果的方式比不断

HTML5实践-灰色图片画廊实现的方法
JavaScript

HTML5实践-灰色图片画廊实现的方法

174 0

以前,在web上要显示灰度图片的话,只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo,来展示如何实现这个功能。 目的这个demo将会向你展示用html5和jquery,如何实现鼠标在图片上移动移出时,灰度图像和原图之间的切换。在html5出现之前,要实现这个功能就需要准备两个图片,一个灰度图片,一个原图。但是现在借助于html5可以实现的更快更容易,因为灰度图片是直接在原图上生成的。我希望这段js代

HTML5第一人称射击游戏实现的代码分享
JavaScript

HTML5第一人称射击游戏实现的代码分享

475 0

功能说明:  游戏中在躲避敌人攻击的同时,需要收集三种不同的钥匙,开启对应的门,最后到达目的地。  该游戏同样基于自己开发的HTML5游戏框架cnGameJS。  推荐用chrome浏览器查看。效果预览:  方向键控制移动,空格键射击,shift键打开门。   实现分析:  在上一篇文章《HTML5实现3D迷宫》中,通过放射线法模拟出3D场景的效果,而本文则在3D效果的基础上,添加更多的游戏元素,构建成一个较完整的第一人称射击游戏。  关于如何模拟出3D场景效果上文中已经有较详细的描述,本文则主要介绍如何

详细介绍HTML5实现3D迷宫的代码案例
JavaScript

详细介绍HTML5实现3D迷宫的代码案例

114 0

功能描述:  左右方向键控制玩家的方向,上下方向键控制玩家的前进和后退。效果预览:   实现原理:  在上面的效果预览中,可以看到右边是2D的平面地图,而左边的则是第一人称的3D视图,这两幅图的关系是非常密切的,实质上,实现3D视觉的过程,就是依据2D地图把地图转换成第一人称视觉的过程。3D效果的实现只局限于平面(意思是从侧面看没有立体效果),在这种有局限性的3D效果中,我们以一个个物体为单位,通过不同物体平面之间的视觉差实现3D。而在这次的效果中,为了使物体从不同角度看都能具有立体效果,我们把单位从平面

HTML5+A*算法实现游戏寻路的代码分享
JavaScript

HTML5+A*算法实现游戏寻路的代码分享

53 0

功能描述: 结合A*算法和HTML5完成的一个寻路demo。 鼠标点击地图任意位置,飞鸟会寻找最短路程到达该位置。效果预览: 代码分析: 具体说说里面提到过的“穿越拐角规则”的实现: 所谓的“穿越拐角规则”,就是如下图中所出现的情况:假设绿色是障碍物,当右边的红色格子想到达上面的黄色方格,并不允许直接由红色方格跳到黄色方格,而需要经过蓝色方格的情况:  我的实现方法是判断使用当前格子的x值和下一个格子的y值的格子或者使用当前格子y值和下一个格子x值的格子是障碍物,则在该

HTML5游戏《坦克后援队》的示例代码分享
JavaScript

HTML5游戏《坦克后援队》的示例代码分享

64 0

功能描述:  该游戏实质上是坦克大战+推箱子。玩家控制坦克,在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关,共三个关卡。游戏说明:上下左右方向键控制移动,空格键发射炮弹,推动所有物资箱子()到目的地(),则可过关。 代码分析:  由于该游戏分了几个关卡,所以这里首先来看看关卡管理器是如果管理各个关卡的:123456789101112131415161718192021222324252627/* 关卡管理器 */var LevelManager=(function(){ var o