这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。在线演示 源码下载 HTML代码Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consecte...
本文实例编写的一个小游戏，基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成，键盘键事件的监听，小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库 游戏开发流程： 1、创建画布： 将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样一来使其看上去像手机，利于观看。2、创建移动的小木块： 定义一个...
本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 合并前：合并后：具体代码如下：/** * desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data * @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数...
我们经常参加各种电商优惠活动，比如购买达到一定数额进行抽奖活动，在比如微信抽奖，淘宝抽奖，迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的，今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩，先看下效果图吧：再来看看Canvas的几个主要api：全部源代码如下：HTML5 Canvas圆盘抽奖应用DEMO演示*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";} ....
本文实例讲述了jQuery实现鼠标跟随提示层效果代码。分享给大家供大家参考，具体如下： 运行效果截图如下：Web网站有不少需要用到tip提示层的地方，结合jquery的jquery.cluetip.js ，可以实现本地字符或ajax异步调用显示提示层。如以上购评分明细提示。(优势：宽度需要调用页加载时定义，高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置，达到醒目直观的效果) jquery.cluetip.css/* global */ #cluetip-close img {...
简单记录下今早做H5上传中一些代码还有坑 一、展示 因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有解决办法找了下，PC上有些是把这个input换成flash，采用jquery的工具库比如uploadify来做，但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式，只是把这个form和input的透明度设置为0，让它们和准备显示的内...
通过网上的资料，加上自己的整理，写了一份html摇一摇功能的简介，用做技术备份。 知识要点 1、DeviceMotionEvent这是html5支持的重力感应事件，关于文档请看：http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍： deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。 devicemotion 提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中...
HTML颜色选择器 范围：#000 - #FFF //  '); } document.writeln(''); var begin = 0; for (var i = 0; i '); for (var g = begin; g '); } } document.writeln(''); } } // ]]> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
腾讯微博也已近实现了拖拽上传。其实很简单。 由于没有服务器支持在文章里不能做上传演示，下载实例 拖拽上传需要什么支持 1:需要浏览器支持 drop 事件。(响应拖拽事件获取file对象); 2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据); 以上两个条件 目前仅有 firefox 能达到。 chrome 第一项达标，第2项可以使用 google.gears 来模拟。 所以能实现拖拽上传的浏览器 有 firefox3.6 + 和 chrome7+。 如何实现拖拽上传 1:绑...
这里把符合以下条件的对象称为伪数组 1，具有length属性 2，按索引方式存储数据 3，不具有数组的push,pop等方法 如 1，function内的arguments 。 2，通过document.forms，Form.elements，Select.options，document.getElementsByName() ，document.getElementsByTagName() ，childNodes/children 等方式获取的集合（HTMLCollection，NodeList）等。 3，特殊写法的对象 ，如 代码如下: var obj={}; obj[0] = "一"; obj[1] = "二"; ...
html代码： 代码如下: plain special I am special plain script代码： 代码如下: function addRemoveItemNS() { var $newLi = $(special and new I am new remove me); $(#list3 li.special) .find(button.addone) .unbind(click.addit) .bind(click.addit, function() { $(this).parent().after($newLi); addRemoveItemNS(); }) .end() .find(button.removeme) .unbind(click.removeit) .bind(click.removeit, function() {...
功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码： HTML代码： 代码如下: Item1 Item2 Item3 arthinking Jason itzhai arthinking Jason ...
对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了。 一 通过修改标签属性来改变它的样式 js设置和获取标签的属性 代码如下: window.onload = function () { var attr = document.getElementById("attr"); attr.setAttribute("style", "font-weight:bold;") alert(attr.getAttribute("style")); }...
js： 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ...
页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html, html代码如下： 代码如下:点击这里查看效果 关闭 正在加载，请稍后.... css代码如下： 代码如下:body { font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0; } #main { height:1800px; padding-top:90px; text-align:center; } #fullbg { background-color:gray; left:0; opacity:0.5; position:absol...