最近正在学习html5，刚接触html5，感觉有点不适应，因为有一些标签改变了，特别是div, section article这三个标签，查了一些资料，也试着用html5和css3布局网页，稍微有点头绪了，下边还有一个我刚刚布局好的一个简单的网页，供大家参考，先看一下，最起码心里对html5的结构有些概念。 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义...
可能大家见过很多使用jquery/js开发的颜色选择器，今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器。希望大家喜欢！ 代码如下: R G B RGB HEX 代码很简单，包含了2个部分，一个点击元素，一个用来展示颜色选择器的元素。 JavaScript代码 代码如下: $(function(){ var bCanPreview = true; // can preview // create canvas and context objects var canvas = document.getElementById(picker); var ctx =...
HTML5已经去掉name属性，实现锚点时请使用id，实例效果：http://keleyi.com/keleyi/phtml/html5/9.htm 支持Chrome，火狐，IE8以上等浏览器。 以下是完整代码： 代码如下: HTML5锚点实例--柯乐义 body{margin:0px;} 柯乐义 HTML5锚点 keleyi.com 转到底部 请滚动鼠标使页面向下 www.keleyi.com 欢迎 hi 绿色箭头图片返回顶部效果 蓝色方块返回顶部 纯文本返回顶部 漂亮的返回顶部、底部和留言 keleyi.com keleyi keleyi.com ...
做HTML5的video标签，本身我们有下载功能，但是在video区域内，点击右键可以将“视频另存为”， 来下载视频，为了屏蔽“视频另存为”，可以在js中加入以下代码： 代码如下: $(#myVideo).bind(contextmenu,function() { return false; }); 其中myVideo为video标签的id，这样就可以屏蔽video标签区域的右键功能， 但是不能做到真正的屏蔽(你懂的。。。)。
1、在创建或打开数据库以后，就可以使用事务 API transaction。每一个事务作为操作数据库的原子操作，不会被打断，从而避免了数据冲突。transaction 的定义是：代码如下:void transaction(querysql, errorCallback, successCallback); querysql：事务回调函数，其中可以执行 SQL 语句。（必选） errorCallback：出错回调函数。（可选） successCallback：执行成功回调函数。（可选） 2、在回调函数querysql中，可以执行SQL语句，...
最近在学习html5，其中涉及到很关键的元素canvas-画布，在网上下载了一些游戏源代码，虽然能看懂，但是想单独地针对某个功能提取出来还是有难处的，于是乎自己又上网查找了一些例子，才将超级玛丽简单的动画给实现了。 设计中涉及到的主要的drawImage()函数 （1）drawImage(image,x,y)该方式是最基本的操作方式，具体是指将你整个要操作的图像对象描绘在指定的坐标轴上，左上角为（0，0）原点，以此计算你想要它描绘的位置 （2）dr...
代码如下: 便签 *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:3em; background:#666 ; color:#fff ; } h2,p{ font-size:100%; font-weight:normal; } ul,li{ list-style:none; } ul{ overflow:hidden; padding:3em; } ul li a{ text-decoration:none; color:#000 ; background:#ffc ; display:block; height:10em; width:10em; padding:1em; } ul li{ margin:1em; float:left; } u...
本游戏实现的基本原理: 游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。 俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当...
网页html 代码如下: Play css样式 代码如下: body{ text-align:center; } header,section,footer,aside,nav,article,hgroup{ display:block; } #skin{ width:700px; margin:10px auto; padding:5px; background:red; border:4px solid black; border-radius:20px; } nav{ margin:5px 0px; } #buttons{ float:left; width:70px; height:22px; } #defaultBar{ position:relative; float:left; width:600px; height:14...
最近有个需求，需要把网页部分内容做正文，并把原网页转成pdf作为附件，发送邮件给boss。由于我们这是报表类型的网站，在html5中控件开发无非就是canvas或者是svg，这里我们有几个控件是用svg，而svg在FoxMail邮件正文中无法正常显示，于是考虑将svg转成canvas显示，但是后来发现canvas也无法正常显示，最后不得已，只能将canvas标签再一次转成图片格式，终于解决了这个问题。下面就简单介绍一下实现过程。如下是一个svg标签 代码如...
修改img.src时涂层也会自动适应新图片的尺寸. 修改layer函数可更改涂层样式 以下是HTML源代码(已增加移动设备支持): 代码如下: (function(bodyStyle) { bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.backgroundColor='transparent'; canvas.style.position = 'ab...
1.请使用 span 元素对行内元素进行分组，以便通过样式对它们进行格式化。代码如下:This is a paragraph This is a paragraph This is a paragraph在一个td里，利用span控制复选框居左对齐：代码如下:{{urole.role}}
viewport 语法介绍： 代码如下:content=”height = [pixel_value | device-height] ,width = [pixel_value | device-width ] ,initial-scale = float_value ,minimum-scale = float_value ,maximum-scale = float_value ,user-scalable = [yes | no] ,target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]”/> 参数解释： width—-控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-wid...
谷歌浏览器是不支持12px以下小字体的，可能是考虑到用户体验吧。 网上也有一些文章介绍，说可以使用： 代码如下: -webkit-text-size-adjust:none; 但是，自chrome 27之后，就取消了对这个属性的支持。 我们还有其它办法解决这个问题吗？ 谷歌浏览器支持CSS缩放，于是，我们可以在这方面做文章： 代码如下: -webkit-transform: scale(0.5); 既然最小支持到12px，那么就以12px为基点进行缩放， 同时可以使用-webkit-transform-origin...
使用了jcanvas插件。 代码如下: var maxX=-1; var maxY=-1; var minX=99999; var minY=99999; function checkData(event){ var x=event.pageX-$('canvas').offset().left; var y=event.pageY-$('canvas').offset().top; if(x>maxX){ maxX=x; }else if(xminX=x; } if(y>maxY){ maxY=y; }else if(yminY=y; } } $(function(){ var obj=$('canvas'); var temp_e; var temp_draw=false; obj.on({ mousedown:function(e){ temp_e=e...