随笔分类 - Demo
摘要：Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。 简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。 既然有了WebGL，我们为什么还需要T
阅读全文
摘要：CSS3元素旋转、缩放、移动或倾斜 代码： 实现效果：
阅读全文
摘要：实现功能： 模仿淘宝图片放大效果，鼠标移动到小图片的某一处，放大镜对应显示大图片的相应位置。 实现效果： 实现代码：
阅读全文
摘要：功能实现： （1）设定图片称号的鼠标悬停事件； （2）在事件中利用自定义动画函数调整显示图片，并修改对应标号样式； （3）为图片显示区域设定鼠标悬停事件； （4）当鼠标停在该区域时，清除图片切换动画定时器； （5）当鼠标离开该区域时，重启图片切换动画，每隔2秒换一张图片； 效果图： (垂直滚动)实现
阅读全文
摘要：功能实现： （1）设定单元格的单击事件，判定被单击单元格是否已经是可编辑状态； （2）取出单元格原有内容，想单元格中加入文本框，并把原有内容显示在文本框中； （3）当用户编辑完成或者取消编辑后，将文本框的值取出，删除文本框，并将值在单元格中显示。 效果图： 完整代码：
阅读全文
摘要：功能描述： （1）设定起始页位置和每页的大小； （2）绑定自定义的分页事件，在事件中隐藏当前页不需要显示的行； （3）为表格添加页链接； （4）绑定链接的单击事件，在事件中触发表格分页事件。 效果图： 实现代码：
阅读全文
摘要：实现功能： 通过点击表头某个字段，实现内容的升序或降序排序。 效果如下： 完整代码：
阅读全文
摘要：CSS3 动画（@keyframes，animation） CSS3 @keyframes 规则 要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 CSS3 动画
阅读全文
摘要：CSS3 过渡transition 应用于宽度属性的过渡效果，时长为 2 秒： div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ } 添加了宽度，高度和转换效果： div { transition: widt
阅读全文
摘要：3D转换transform rotateX() 方法 rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 rotateY() 方法 rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。 转换属性 下表列出了所有的转换属性： 3D 转换方法
阅读全文
摘要：2D转换transform 2D变换方法： translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE
阅读全文
摘要：图像拼合 图像拼合 - 简单实例 实例解析： <img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像 宽度：46px;高度：44px; - 定义我们使用的那部分图像 backgr
阅读全文
摘要：HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度： 实例解析: 检测是否支持地理定位 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数
阅读全文
摘要：用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果： 拖放前 拖放后 实现代码： 解释说明： 设置元素为可拖放 首先，为了使元素可拖动，把 draggable 属性设置为 true ： <img draggable="true"> <img draggable="true"> 拖
阅读全文
浙公网安备 33010602011771号