随笔分类 - 插件

特定功能的小插件

摘要：grunt与seajs grunt是前端流行的自定义任务的脚手架工具，我们可以使用grunt来为我们做一些重复度很高的事情，如压缩，合并，js语法检查等。通过定义grunt的配置文件Gruntfile.js，配置并注册grunt的任务，最终我们可以通过命令行来执行任务。 seajs主要用于模块化，通... 阅读全文

posted @ 2015-05-16 17:12 royalrover 阅读(2360) 评论(0) 推荐(4) 编辑

CSS3实现圆形进度条

摘要：介绍闲来无事，去了CSS3Plus网站逛了逛，发现了一个很有意思的实现--css3实现进度条。粗略看了下代码，发现原理其实很简单，不难理解。现在在此讲述下原理并实现一个1s更新的进度条。技术细节是这样的：进度条由两个半圆环组成，首先我们的任务是实现左右两个半圆环。圆环可以用border-ra... 阅读全文

posted @ 2015-01-22 16:46 royalrover 阅读(7811) 评论(0) 推荐(0) 编辑

3d效果的图片轮播

摘要：CSS3的3d变换 CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在... 阅读全文

posted @ 2015-01-21 16:10 royalrover 阅读(1948) 评论(0) 推荐(0) 编辑

canvas实现拖动页面时显示窗口视频

摘要：简介当前主流的视频网站目前有不少新鲜好玩的功能，最明显的莫过于小视频的显示--当视频不在当前视口范围时，会在右下角用一个小窗口来显示当前的视频，而且可以拖拽。今晚心血来潮，起了动手试试的念头。我的想法很简单，用canvas来获取视频每一帧的数据，并用动画函数requestAnimationF... 阅读全文

posted @ 2015-01-08 21:36 royalrover 阅读(456) 评论(0) 推荐(0) 编辑

简单拖拽实现

摘要：拖拽的元素必须绝对定位。在实际操作中，犯了一个简单的错误：对于iframe元素的事件绑定，需要在src完全加载后进行绑定。 iframe.onload = function(){ iframe.contentDocument.onclick = function(){} ... }另... 阅读全文

posted @ 2014-12-09 17:34 royalrover 阅读(286) 评论(0) 推荐(0) 编辑

富文本编辑器的一些要点

摘要：重新复习了富文本编辑器的基本实现，现总结下要点： 1，iframe的创建，之所以使用iframe框架，是为了防止编辑的内容影响当前文档。 2，隐藏的textarea保存iframe的源码 3，ie下的兼容性，为了保存ie的选中范围，需要借助于textRange.getBookmark(),以及... 阅读全文

posted @ 2014-11-19 23:37 royalrover 阅读(608) 评论(0) 推荐(0) 编辑

弹窗层效果的实现（非jQuery实现）

摘要：要想实现弹窗的效果，首先应该创建一个覆盖层maskLayer，以及一个显示层presentLayer。其次，每次弹窗时（除首次弹窗外），maskLayer的显示以及隐藏不应该导致文档流的reflow，但是repaint不可避免。所以对于maskLayer，用以display:absolute;最为关... 阅读全文

posted @ 2014-11-12 14:51 royalrover 阅读(370) 评论(0) 推荐(0) 编辑