效果图如下： html源码： 代码如下: css源码： 代码如下: body{ background:url(bg.jpg) repeat; font-family:Arial Narrow, Arial, sans-serif; margin:0; padding:0; } header, section, footer{ display:block; } header{ width:100%; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.9); color:#ccc; padding:15px 0; letter-spacing:1px; margin-bottom:20px; position:relative; } header h...
首先来了解一下windows 8 的贴靠，在windows 8 中的Metro应用可以将屏幕很好的进行分割.如下图让用户在使用时可以非常方便的切换。 系统对贴靠也是有硬性规定的。最多两个屏幕，而且是一个大的一个小的。并且小屏的宽度是固定的 320像素。 所以当用户把网站贴成小屏幕，这个时候页面默认是等比例缩小的。如下图:那么怎么很好的解决这样的一个问题呢？让网站在windows 8的贴靠小屏幕下显示非常友好的效果呢？下面我有一个简单的示例...
原本效果拖拽之后效果代码如下 代码如下:[code]#div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));} [/code]它看...
HTML5, 原来如此神奇。程序在google浏览器中测试通过，感兴趣的朋友可以参考本文讲解的HTML5组件Canvas实现图像灰度化的具体步骤，希望对你有所帮助新建一个html页面，在body tag之间加入 代码如下:<canvas id="myCanvas" >Gray Filter</canvas>添加一段最简单的JavaScript 脚本 代码如下:<pre name="code" class="javascript">window.onload = function() { var canvas = document.getElementById("myCanvas"); <span style="wh...
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下： 任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示： 代码如下: // translate is move the startpoint to centera and back to top left corner function renderText(width, height...
主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现 HTML + JavaScript的代码很简单。 代码如下: window.onload = function() { draw(); var saveButton = document.getElementById("saveImageBtn"); bindButtonEvent(saveButton, "click", saveImageInfo); var dlButton = document.getElementById("downloadImageBtn"); bindButtonEvent(dlButton, "click", saveAsLocalImage); }; function draw(){ var canvas =...
以前也很少关注html5，感觉选择html已经慢慢成为趋势，想了解下。就找了个游戏学习了，写完这个游戏感觉html5和js结合很紧密，如果js不是特别好。估计需要先补习下js，这个只是个人的建议，不一定准确。还有一个就是，思维和逻辑要特别清楚，不然写游戏可能很痛苦。 贪吃蛇，最主要的功能点： 1，蛇的移动 2，改变蛇的方向 3，放置食物 4，增加舍身 5,怎么挂的。 第一次写游戏，第一次写html5 感觉还是很吃力的。写完了，给大家分享...
1.Email输入框,自动验证Email有效性。 代码如下: 2.number数字输入，验证正确，可以设置开始结束位。 代码如下: 3.URL输入框，可以验证URL输入的有效性。 4.Date pickers (date, month, week, time, datetime, datetime-local)选择框，可以选择日期，时间，月，周。 代码如下: 5.datalist输入选择。 代码如下:
只修改了2个地方： ，返回的速度改成了慢慢回去。（原来是一闪而返回） ，返回顶部图标出现的时机改成了只要不在顶部就显示出来。（原来是向下滚动500px后才显示） 注意：JS务必要写在 Html之后； HTML 代码如下: Javascript代码 代码如下: $(function(){ var d_top=$('#d-top'); document.onscroll=function(){ var scrTop=(document.body.scrollTop||document.documentElement.scrollTop); if(scrTop>500){ if(scrTop>0){ d...
演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。 一：颜色填充与描边 颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例 如下： 代码如下: // fill and stroke text ctx.font = 60pt Calibri; ctx.lineWidth = 3; ctx.strokeStyle = green; ctx.strokeText(Hello World!, 20, 100); ctx.fillStyle = red; ctx.fillText(Hello World!, 20, 100); 二：纹理填充与描边 HTM...
今天我突发其想，想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。 当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。 完工后的图片： 担心图片是被我PS后的同学可以直接进入下面的地址测试： http://www.cnblogs.com/yorhom/articles/3163078.html 由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋友可以直接看一下。 index.html中的...
代码如下: var canvas=document.getElementById(myCanvas); var ctx= canvas.getContext(2d); ctx.fillStyle="#99FF66"; ctx.fillRect(10,10,15,80); //ctx.fillRect(10,80,15,80); var canvas=document.getElementById(myCanvas); var ctx= canvas.getContext(2d); ctx.fillStyle="#99FF66"; ctx.fillRect(60,10,15,80); var canvas=document.getElementById(myCanvas); var ctx= canvas.getContext(2d); ctx.fillStyle="#0033CC"...
Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术 在HTML4中，js创建的程序都是单线程的，如果花费时间比较长的话web界面就会长时间没有响应，最恶劣的情况还会跳出一个脚本提示框： 提示脚本运行时间过长，是否继续。。。。于是就引出了本文的主角：Web Workers API 使用这个API用户可以非常容易的创建在后台运行的线程，要创建后台程序很简单：代码如下:var worker = new Worker(*.js);注意：后台线程...
正统的HTML5 Canvas中如下代码 代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke(); 运行结果绘制出来的并不是一个像素宽度的线 感觉怎么好粗啊，跟常常见到的网页版各种绘制线效果 很不一样，难道HTML5 Canvas就没想到搞好点嘛 其实这个根本原因在于Canvas的绘制不是从中间开始的 而是从0～1，不是从0.5～1 + 0～0.5的绘制方式，所以 导致fade在边缘，看上去线很宽。 解决方...
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。 一：渐进填充(Gradient Fill) Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为： createLinearGradient(x1, y1, x2, y2); 其中x1,y1为第一个点坐标，x2,y2为第二个点坐标。 createRadialGradient(x1, y1, r1, x...