摘要：
环形效果是不是相当的诱人，首先看几个例子：1、colorful-clock --- 漂亮2、CSS3+js实现多彩炫酷旋转圆环时钟效果 --- very good3、Percentage Loader --- 帅colorful-clock效果图如下：有没有更刺激的，接下来见证奇迹的时刻，如下图（精致）：在此之前，在回顾下前两个例子：1、时钟效果_raphael.js2、幸运大抽奖实现原理：第一步：构造圆环r.customAttributes.arc = function(value, total, R) { var alpha = 360 / total * value, ... 阅读全文
摘要：
时钟效果，很久很久以前由flash提供网页的各种有趣的效果，近些年由html5推出canvas后，canvas与之博弈。现在讲的是用raphaeljs实现时钟效果。raphaeljs封装了svg和vml操作方法，SVG(Scalable Vector Graphics)可缩放矢量图形。VML(The Vector Markup Language)矢量可标记语言。先饱饱眼福，win7中的时钟效果show下，见下图：接下来亮相的时钟效果图（金属光泽的超质感），见下图：简单描述实现原理：第一步：画时钟。时钟圆盘、时钟时分秒指针、刻度、时间。画图方法circle、rect、text。// 画时钟表盘r 阅读全文
摘要：
幸运大抽奖全新来袭，现在普遍的抽奖活动都是由flash开发的，然而，今天向大家展示由js实现的抽奖。早在2012年的时候写过一篇文章关于js抽奖的《javascript 抽奖》。 借助raphaeljs插件实现，官网：http://raphaeljs.com 中文文档：http://lab.julying.com/raphael-js/docs/ 幸运大抽奖已两种方式展现，一种是圆盘旋转（猎豹式），另一种是指针旋转（考拉式），实现抽奖三部曲。第一部：绘制圆盘和指针。var r = Raphael("test",300,300);// 绘制圆盘r.image... 阅读全文
摘要：
tooltip提示信息插件原理：定位元素在页面中的位置即坐标信息，将显示节点元素插入到body中绝对应为到相应位置，显示内容从指定元素的属性(dataMess)中获取或者通过设置获取。使用方法：$("#test").iTooltip({"posType":"top"}); 测试数据中。。。">测试 tooltip提示插件 测试数据中。。。">测试左测试数据中。。。">测试上测试数据中。。。">测试右测试数据中。。。">测试下测试数据中。。。"&g 阅读全文
摘要：
本来打算写关于手机端的知识，想了想先从meta着手。接下来请大家看几个网站的例子。一、天猫(http://m.tmall.com)天猫触屏版 二、淘宝(http://m.taobao.com)淘宝网触屏版三、京东(http://m.jd.com) 京东 - 手机版 四、网易(http://3g.163.com)手机网易网五、百度(http://m.baidu.com)meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容... 阅读全文
摘要：
doT.js模板和pagination分页应用博客中模拟了数据加载初始化的过程。doT.js渲染每一项内容的数据项。示例如下：pagination分页插件的使用，示例如下：MessPage.pagination(total, { callback: initPage, prev_text: "«", next_text: "»", items_per_page: pageSide, num_edge_entries: 1, num_display_entries: 10, current_page: current});参数说明：ca 阅读全文
摘要：
如何管理CSS和JS文件，一直是前端一个热门的话题。下面将简单分享一下使用心得，欢迎大家吐槽、拍砖和提供更好的实现方式。一、管理CSS文件，本博客将讨论less管理。iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。把上面的文件按实际需要合并成一个iBase.less文件。如：打算将iReset.less、iButton.less合并在iBase.less中。在iBase.less中引入如下文件即可 阅读全文
摘要：
首先祝大家，在新年里，好的、善良的都都马上有。关于css实现面包屑已经是一个典型例子了。不过今天还是与大家分享一下实现的原理。原理：每一段元素固定宽度并向左浮动，头尾突出部分相对父元素用相对定位固定位置，默认为同一颜色，高亮设置指定样式。详解见下图：合并小图标，减少链接请求数量DEMO： 面包屑 1 第一项 2 第二项 ... 阅读全文
摘要：
问题：前端采用grunt构建，后台采用java编写使用Eclipse或IntelliJ，把Tomcat嵌入到开发工具当中。问题一：在于是grunt编译之后生成的文件，每次都需要刷新项目文件夹，然后在刷新页面，才能起作用。问题二：Tomcat嵌入到上面java的开发工具中，然而使用其他开发工作如Sublime Text、notepad++，怎么办。解决办法：把Tomcat配置到与编译器无关性。安装Tomcat之前首先要安装jdk，因为Tomcat依赖jdk，是由java编写的。1、安装jdk。下载地址：http://www.oracle.com/technetwork/java/javase/d 阅读全文
摘要：
基于jquery和dot.js弹出框插件，兼容IE6+等其他浏览器。思想：弹出框元素插入body节点中，并在页面垂直居中显示（fixed定位），触发确定和关闭事件绑定。注意ie6包含两个问题：一、select、flash不能遮罩，采用iframe。二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。源码分析：1、creatHtml：采用doT.js初始化元素添加到body中；2、show：设置宽度，高度，居中显示；3、events：为关闭和确定绑定事件；4、removeCallback：移出元素节点，如有执行回调方法；5、ie6fixed：ie6中fixed的 阅读全文