“JS实例”目录存档
2012年05月2日,星期三
大学时期,因为兴趣,花了不少时间学习flash动画制作以及AS脚本。后来开发个人网站时候,一方面想自娱自乐,另一方面由于这份无法割舍的情愫,开辟了个“阳光鑫情”的频道。要知道,这玩意很耗精力的。后来,工作忙了,任务重了,还要博客这块的压力,我只是个普通凡人,无法同时专注于几个事情,因此,“阳光鑫情”就让它去海南晒太阳去了。上周五一节前的几天,基本上没有什么活,各种x, y, z因素参杂在一起,让我突然脑中灯泡一亮——我是不是可以用HTML5实现“鑫情动画”?……
本文就将展示如何使用HTML5以及简单的JavaScript代码实现类似Flash的动画效果。
阅读全文…
标签:flash动画, HTML5, SVG, transition, 动画效果
发布在 JS实例 | 12 条评论 »
2012年04月1日,星期日
最近文章产量虽多,但大多都是短篇。本文断断续续折腾了差不多有一周,现在终于出炉了。主要是介绍了JS的自定义事件以及如何在DOM元素上自定义事件。循序渐进,娓娓道来,纯粹JS知识与理论。详尽的代码展示,制作精良的demo测试页面,必要的截图示意,相信本文的内容会对您的学习有所帮助的(如果你对JS有兴趣的话),不信?读一读就知道了。
阅读全文…
标签:addEventListener, attachEvent, createEvent, dispatchEvent, dom, javascript, onpropertychange, 兼容性, 原型, 对象字面量, 继承, 自定义事件
发布在 JS实例 | 50 条评论 »
2012年03月23日,星期五
跟风,尤其受pinterest的煽风点火,瀑布流就有不少人关注了。我正好最近比较闲,加上有人曾在我站点提出希望我介绍点瀑布流的东西,所以,今儿个也随下大流。
pinterest以及上面迅雷UED xwei的瀑布流demo(至少在FireFox下还是有致命的显示bug的)都是采用的绝对定位实现的,有相对复杂的位置计算。
我一向不喜欢吃别人嚼过的米饭,于是尝试使用另外的原理实现。我是个流体布局控,对绝对定位啊、浮动啊什么的一向没什么好感,于是,这里要介绍的就是基于多栏列表流体布局实现的瀑布流布局效果。
阅读全文…
标签:inline-block, 两端对齐, 流体布局, 滚动加载, 瀑布流布局
发布在 JS实例 | 48 条评论 »
2012年03月19日,星期一
本文内容正如标题所说的,介绍cssrefresh.js. 按照What? Why? How?的提问顺序介绍。末了,还附上了一个实际样式的demo。当然,源代码啊,截图啊什么的为日常口粮,自然少不了。不一定多使用,不过对于某些同行,尤其新人,估计还是很有用的。
阅读全文…
标签:cssrefresh.js, css相关, php
发布在 JS实例 | 16 条评论 »
2011年09月22日,星期四
HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-
自定义属性、placeholder
、以及email
类型input文本框。上周新上线的会员中心,自己又应用了HTML5相关内容——HTML5 localStorage本地存储,这里简单分享下。
一如既往,本文提供demo页面,提供必要的截图和源代码展示,还有对比实例,希望能触动一下大家的小小神经。
阅读全文…
标签:cookie, HTML5, localStorage, MooTools, 本地存储, 浏览器
发布在 JS实例 | 34 条评论 »
2011年09月15日,星期四
在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图,做法是借助于flash。或者使用隐藏的iframe框架页面模拟ajax上传,一次一张,连续多次。然而都有缺陷。HTML5是个好东东,其中之一就是支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,纯粹利用file控件实现,简单方便迅速,想不让人称赞都难啊!
本文就是详细地介绍基于HTML5的可预览多图片Ajax上传的一些内容。有丰富的截图示意和源代码展示,以及必要的API参数说明。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:Ajax, chrome, FileReader, HTML5, readAsDataURL, 图片上传, 图片预览
发布在 JS实例 | 316 条评论 »
2011年04月18日,星期一
由于jQuery自身没有wheel事件滚轮事件,懒得折腾,所以这里只写了MooTools库下是简易自定义滚动条。此自定义滚动效果比较简单,就点击滚动条拖移和鼠标滚轮滚动两个效果。
本文提供必要的demo页面以及源代码下载,另外简单展示了该小插件的使用,并分析了其一些不足和适用情况,内容相对较少。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:jQuery, MooTools, 插件, 滚动条, 相对定位, 绝对定位, 自定义滚动条
发布在 JS实例 | 7 条评论 »
2011年04月7日,星期四
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。本文就将简单展示下这种效果,本文的效果参照新浪微博的返回顶部效果,展示了在jQuery库和MooTools库下的实现。本文提供必要的demo页面和源代码展示。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:jQuery, MooTools, 动画效果, 滚动条, 返回顶部, 锚点
发布在 JS实例 | 24 条评论 »
2011年02月12日,星期六
正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。
一般翻译软件都有划词翻译功能,启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框。
在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这样子,我们就可以轻松地将页面上的内容分享到新浪微博这些微博网站上了。
本文提供demo页面,提供源代码展示,必要的截图。总之,希望能对您的学习有所帮助。
阅读全文…
标签:javascript, js相关, 兼容性, 分享, 文字选中, 新浪微博, 浮动层, 鼠标事件
发布在 JS实例 | 30 条评论 »
2011年01月18日,星期二
面对数据编程(data-oriented-programme)这个概念第一次接受是在前年阿里巴巴举行的D2前端论坛上,来自Baidu金大为:《模板语言与大前端》的分享,面对数据编程在处理大数据量交互的情况下非常好用,性能高,维护方便,思路简单清晰,不易出bug。本文还是那样,讲讲废话,举举例子,画画图,展示下代码,写个pp的demo页面,中间再插几个冷笑话。不是什么高深的东西,比我还懂的人大把大把,这里算是点自我总结,是自我提高,也希望能对跟我一样js新人提供些帮助。
阅读全文…
标签:dom, DOP, innerHTML, javascript, json, js相关, 对象字面量, 自适应, 面向数据
发布在 JS实例 | 21 条评论 »