![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript
文章平均质量分 50
baoeni
爱编程,爱web,爱生活
展开
-
Javascript waterfall layout (pinterest) 瀑布流布局
Here is a summary of how to make a waterfall photo gallery like pinterestReference: http://www.impony.com/?p=516First: If we turn javascript off, all images will be float:left and position:sta原创 2014-07-07 21:16:23 · 260 阅读 · 0 评论 -
CSS3中对Animations和Transitions的比较
http://www.kirupa.com/html5/css3_animations_vs_transitions.htmCSS3中的Animations和Transitions有些类似,但有点区别,举例如下:SimilaritiesFrom a distance, both animations and transitions are very si转载 2012-05-26 22:26:37 · 355 阅读 · 0 评论 -
parallax视差网页制造3d效果
前几天看到parallax视差网页的例子:http://f6design.com/projects/parallax-scrolling/感觉非常有意思,就了解了一下,发现实现起来还是很简单的, 原文解释在这个链接里http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jqu原创 2012-05-27 02:31:48 · 925 阅读 · 1 评论 -
JavaScript Array vs HTML Collections
如果你习惯使用Jquery,千万要小心$()函数(以及其他travse函数)的返回值可不是简单的array,他们是HTMLCollection。换句话说我们是不能使用array的函数来处理的,比如slice,concat,pop,push等等。HTMLCollection本身只有两个函数:PropertieslengthThe number of items in the coll原创 2012-03-14 22:35:00 · 347 阅读 · 0 评论 -
javascript生成网页快照
google feedback有一个非常酷的功能,能够让你在线对网页进行快照,而起还可以隐藏隐私信息。例子:http://www.google.com/tools/feedback/intl/en/index.html有人猜了一下,估计是使用canvas把页面重新构建,神奇的是他能把页面重构的一模一样。详细信息参看:http://html2canvas.hertzen.com/docu原创 2012-03-14 22:52:42 · 2222 阅读 · 0 评论 -
javascript onerror event 打造js error错误日志
如果你想track网站js error的数据,可以使用onerror事件来捕捉,见例子如下:window.onerror=function(msg, url, linenumber){ alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber) return true}document.wr原创 2012-03-14 22:41:33 · 569 阅读 · 0 评论 -
javascript载入研究
为啥要研究javascript的载入呢,原因很简单,因为他影响页面载入速度,特别是第一次的载入速度。(如果考虑同域的其他页面可以使用预先载入的方法:几种Preload javascript,CSS, image的方法)。一个页面载入除了html,剩下的就是javascript,css和image了。css可以使用sprite。image在以后会讨论(Preload image 网页图片原创 2011-12-29 23:42:18 · 739 阅读 · 0 评论 -
Preload image 网页图片预载入
如果你的网站包含比较多重复的大尺寸图片,不妨预先载入他们,这样用户的浏览同个网站中其他页面的时候这些图片就不用再远程载入了。参看:http://perishablepress.com/press/tag/preload-images/方法1:CSS#preload-01 { background: url(http://domain.tld/image-01.png) no-r原创 2011-12-30 19:19:21 · 824 阅读 · 0 评论 -
7种延迟加载javascript方法
延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载,一般有一下几个方法:1. DOMhead append script tagwindow.onload = function() { setTimeout(function(){ // reference to var he原创 2011-12-28 00:23:35 · 4950 阅读 · 0 评论 -
几种延迟运行javascript的方法
javascript在网页中一般的情况就是加载之后直接运行,即使是延迟加载的javascript也是这样(参看我之前的文章:7种延迟加载javascript方法),问题是运行javascript对于浏览器来说也是很耗时的,而且运行的时候会block其他资源的下载。所以就有了延迟运行的概念。steve也谈到这个问题:http://stevesouders.com/controljs/解决办法是:原创 2011-12-29 19:33:43 · 696 阅读 · 0 评论 -
javascript弹出窗口小结
弹出窗口已经被小广告弄得声名狼藉,虽然如此,但是有的时候还是需要用弹出窗口和原来的窗口分开来,比如说显示一个问卷调查。最基本的就是使用window.open函数,搭配对于弹出窗口的属性作为输入参数。第一个问题是许多浏览器都有popup blocker,从脚本直接运行window.open会被拦截,大部分用户会看不见你做的窗口。而且safari根本不允许脚本直接执行window.open,一原创 2011-12-13 06:07:01 · 740 阅读 · 0 评论 -
javascript清除表单缓存- disable form caching
表单缓存是指当用户在表单输入之后再次回到该表单的时候,浏览器会直接显示用户之前的输入。在大多数情况下这正是我们想要的,但也有些情况我们希望表单能够刷新,特别是根据后台刷新。我现在就遇到了这种问题:某网站有两个select box选择日期进行搜索,搜索结果还是返回相同页面。比如你先选择1月1号到1月2号,然后再选择2月3号到2月4号,这是如果用户点击后退,select还是会保持在2月3号到2月4号,原创 2012-01-11 05:24:56 · 1437 阅读 · 0 评论 -
customize scrollbar-自定义滚动条
在google的一些应用中已经出现了自定义的scrollbar,比如google wave和google mail。和传统的滚动条相比,优势在于体积很小,从而提供更多空间给内容动态显示和隐藏自定义的风格,可以配合整个网页的风格下面列出一个简单的jquery插件的例子。其主要思想是对三个事件的捕捉:鼠标滚动事件捕捉,鼠标点击滚动条,鼠标拖动滚动条。通过对这三个事件的捕捉,确定原创 2012-01-06 18:50:42 · 596 阅读 · 0 评论 -
gmail附件上传javascript研究
gmail附件上传已经摆脱超级传统的文件上传方式:用户既不知道进度,也只能看到文件的名字。它使用了两个新技术:html5的file API和HTML5的drag and drop这里借鉴http://www.nczonline.net/blog/2012/05/31/working-with-files-in-javascript-part-4-object-urls/里介绍的功能做了一个de原创 2012-06-02 22:32:29 · 488 阅读 · 0 评论 -
CSS3 transform matrix 矩阵研究
在重新审视CSS3的时候发现一个优秀的专门介绍transform里matrix的demo:http://peterned.home.xs4all.nl/matrices/整体分为几个部分:帮助函数play:添加事件监听函数Play.prototype:处理drag and drop,根据转换属性调用不同的matrix函数,display和current轮流切换来原创 2012-05-26 21:33:15 · 815 阅读 · 0 评论 -
Understanding Safari Reader
Interesting enough to find out the Reader function in Safari is actually Javascript and there are many interesting stuff from the 2000 line code:* 5 main parts in the file:* 1. define const* 2原创 2014-07-07 21:11:47 · 328 阅读 · 0 评论 -
如何获取中文输入/拼音
之所以要了解这个问题是因为在autocomplete中我们希望提前捕获用户输入的拼音,这样的话就可以尽早提供常用选项,从而让用户尽量少的输入,尽量快的找到对应选项。首先想到的就是keyup, keydown, keypress, input事件,看看哪个事件可以在用户输入拼音的时候就捕获。在网上搜了一下,最终解决方案是:捕获keyup事件参考:使用中文输入法时对键盘事件原创 2014-07-07 21:10:16 · 451 阅读 · 0 评论 -
how to add borders for a google map marker 谷歌地图 自定义图钉
If you are not satisfied with default Google map Marker (Default google marker can only be a icon, image or shape), for example adding a border, then you should use richmarker!http://google-maps原创 2014-07-06 21:06:36 · 443 阅读 · 0 评论 -
谷歌地图 如何获得一组位置的中心和最佳zoom level
you can use google maps api: bounds to group points togetherexample: http://jsfiddle.net/john_s/BHHs8/6/原创 2014-07-06 21:10:49 · 776 阅读 · 0 评论 -
jquery trigger函数和triggerHandler函数的对比
一句话的区别就是:trigger will bubbling jQuery events (not default DOM events) and triggerHnadler will not do that!原创 2014-07-06 21:05:06 · 288 阅读 · 0 评论 -
Google map Marker cluster 谷歌地图图标聚合
Have you wonder how do some map app provide functions to cluster icons/markers?Here is one solution:http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/docs原创 2014-07-06 21:02:08 · 352 阅读 · 0 评论 -
CSS3 3D transform创建立方体
首先建立html结构 1 2 3 4 5 6 然后定义css,关键是透视和style.container { width: 200px; height: 200px; position: relative; perspective: 1000px;}#cube { width: 100%;原创 2012-06-26 04:22:30 · 1040 阅读 · 0 评论 -
HTML5 web worker简介
HTML5 web worker就像在java中新建一个thread一样,创建一个独立的环境运行计算量比较大的程序,于目前来说还是没有太大的用武之地,但是估计以后可能用途比较大。基本的代码很简单:var worker = new Worker('doWork.js');worker.addEventListener('message', function(e) { console.原创 2012-06-25 18:05:58 · 570 阅读 · 0 评论 -
font-face小抄
font-face已经有很多浏览器支持了,这里简单介绍一下如何使用:1. 使用工具定义你想要的图片和编码:use a tool (http://keyamoon.com/icomoon/app/) to create font file: select a image and a utf8 code for it2. 定义font-face in css@font-fa原创 2012-06-25 17:53:50 · 338 阅读 · 0 评论 -
firefox bookmarklet小细节
如果你要在firefox bookmarklet中给元素赋值,记住要把程序包封在这里面: javascript:(function(){ var mycode = 1;})();不然的话他们是不会被执行的。原创 2012-06-25 17:48:29 · 373 阅读 · 0 评论 -
lightbox在IE6中的bug
lightbox或者叫modal window是比较常用的UI,在IE6中我们会通常遇到这样的bug:select元素不会隐藏在overley中,相反它会显示出来,一般的做法是在overlay中添加iframe,但是如果你给overlay添加了eventhandler,比如点击overlay关闭lightbox或者用户按esc键关闭lightbox,这时iframe会覆盖在overlay之上,所有原创 2012-06-25 17:45:14 · 530 阅读 · 0 评论 -
CSS3知识实战网站
想了解CSS3吗? 那就去看http://css3please.com/吧,上面的例子是可以动态修改的!以下讨论一下这个网站是怎么实现的,其主要的逻辑在javascript.js里面:window.cssMath 这里定义的是一些辅助计算函数,包括从colorpicker中取得色彩的rgb值,hex值等等window.generator 修改例子,grabAndSet -》applyS原创 2012-05-26 22:14:16 · 312 阅读 · 0 评论 -
几种Preload javascript,CSS, image的方法
原文:http://www.phpied.com/preload-cssjavascript-without-execution/preload javascript可以提升页面的速度,原因是preload之后网站的其他页面的许多资源都是已经加载过了,也就是说都在缓存里。普通的页面也可以preload资源,但是对已第一次的加载就会很耗时。为了提高速度,可以使用以下的方法在不影响第一个网页加原创 2011-12-28 00:37:21 · 1988 阅读 · 0 评论 -
CSS3 modernizer 检测浏览器是否支持CSS3
前几天在看headjs的时候偶尔发现这段代码,可以用来检测浏览器是否支持CSS3的属性,用纯Javascript写成,不依赖任何framework,感觉挺有用的。源代码:https://github.com/headjs/headjs/blob/master/src/css3.js/** Head JS The only script in your原创 2011-12-27 21:49:25 · 932 阅读 · 0 评论 -
跨浏览器的多点触控与鼠标事件处理
[译]跨浏览器的多点触控与鼠标事件处理Posted by luoqingming on 2011年11月28号Leave a commentGo to comments原文地址:http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.as转载 2011-12-11 21:18:00 · 398 阅读 · 0 评论 -
HTML elements 添加自定义属性 attributes/properties
<br />以前一直怀疑是不是所有的HTML elements都能随便的添加自定义属性,因为印象中好像有些是不行的,今天做了一个实验,发现所有浏览器(包括IE)好像都可以添加自定义属性,包括表单和表格,估计我以前遇到的是某些elments的某些属性只读吧。<br /> <br />以下适用于所有浏览器:<br /> <br /><div customizedAtt="customedAtt"></div><br /> <br /> <br />document.getElementById('target'原创 2010-08-08 04:17:00 · 418 阅读 · 0 评论 -
Javascript disableUserSelect 防止用户选择
有时候当我们要拽动某个控件的时候,浏览器会以为我们要选择网页内容,然后出现一大片难看的选择区域,为了避免这种情况,各大javascript库都都提供类似的函数: 基本有一下几种方法: CSS: 对于firefox:style.MozUserSelect = "none"对于webkit:style.WebkitUserSelect = "none" IE:对于IE: element.unselectable = "on" 防止事件: disabl原创 2010-08-07 05:25:00 · 315 阅读 · 0 评论 -
Javascript event 事件之DOMNodeInserted,DOMNodeRemoved
<br /> <br />w3c的事件,但并不是所有浏览器支持(除了IE之外)<br /> <br />these two events will only bubbles up, so only childs' event will bubbles up. parent's event will not esculate to children<br /> <br />原创 2010-08-08 04:28:00 · 2543 阅读 · 0 评论 -
IE activate event
<br />相对于一般浏览器的focus和blur事件,IE有它独特的事件,激发顺序如下:<br /> <br />beforeactivate/beforedeactivate -> activate/deactivate -> focusin/focusout -> focus/blur<br /> <br />这几个事件和focus/blur的区别是他们可以bubble,可以捕捉到更多信息。<br /> <br /> <br />例子如下:<br /> <br /><br /><a href="htt原创 2010-08-07 04:44:00 · 332 阅读 · 0 评论 -
javascript库学习之sizzle
<br /><br />sizzle也是另外一个专业的CSS选择器<br /> <br /> <br /> http://sizzlejs.com/<br /> <br /> <br />原理:首先用var chunker = /((?:/((?:/([^()]+/)|[^()]+)+/)|/[(?:/[[^/[/]]*/]|['"][^'"]*['"]|[^/[/]'"]+)+/]|//.|[^ >+~,(/[//]+)+|[>+~])(/s*,/s*)?((?:.|/r|/n)*)/g来分析select原创 2010-06-05 04:09:00 · 297 阅读 · 0 评论 -
javascript库学习之cssQuery
<br />cssQuery是专业的CSS选择器<br /> <br /> <br />http://dean.edwards.name/my/cssQuery/<br /> <br /> <br />原理:首先用逗号分类出单个的css selector<br /> <br />然后通过:var $$STREAM = /[/s#.:>+~()@]|[^/s#.:>+~()@]+/g;把selector中的token和filter分出来,例如:<br /> <br />'pdd a:first-child'原创 2010-06-05 03:55:00 · 696 阅读 · 0 评论 -
javascript库学习之jRaiser
<br /> <br />jRaiser是由Heero编写的,简介如下:http://code.google.com/p/jraiser/http://heeroluo.net/<br />jRaiser是一个面向对象的Javascript类库,核心功能包括文档节点搜索、样式修改、事件绑定、Ajax动态交互、Cookie处理和内置类型扩展等。它的目标是简化Javascript程序编码、提高Web应用程序的开发效率。其主要的内容包括:<br /> <br />css selector<br />DOM enr原创 2010-06-05 03:46:00 · 492 阅读 · 0 评论 -
javascript animation动画引擎核心
<br />昨天看到某个javascript库的动画引擎的核心,发现果不其然,说到底有两种方法:<br /> <br />假设<br />var delta = propertyValue1 - propertyValue2;<br />var duration = 1000ms;<br />var interval = 10ms<br />var loopCount = duration/interval;<br />var <br /> <br />1. 计算出每次增量<br />var loopInc原创 2010-07-22 03:51:00 · 401 阅读 · 0 评论 -
Ipad/Iphone里的网页编程以及drag and drop
在ipad或者iphone中网页原本的drag and drop不能使用了,原因是移动设备本身支持多点触摸的话会和d&d有冲突,但是今天发现可以获取safari mobile上的touch事件,由它再触发mousedown, mousemove事件即可实现d&d,代码如下: var iCenter = null;var reset = false;var sDir = "";原创 2010-04-30 05:55:00 · 1025 阅读 · 0 评论 -
Iframe 载入修改浏览器历史
最近在项目上发现如果一个页面有ifame,动态改变iframe的src,浏览器历史里就会记下这个新src,后退按钮就会生效,如果不想让浏览器这样的话可以用以下的办法: var oDocument = iframe.contentWindow.document; oDocument.open("text/html", "replace"); oDocument.write(res原创 2010-04-30 05:49:00 · 325 阅读 · 0 评论