1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架，它简化了HTML 文档遍历、事件处理、动画和Ajax交互。jQuery插件非常之多。 2. Dojo Javascript框架 Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。 3. Sencha Ext JS4 Javascript框架 Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。是绘画、图表引擎，使用DOM-accessible JavaScript图表和矢量图。 4. Prototype javascript框架 Prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。 5. Uize Javascript框架 UIZE免费使用、支持移动设备、可CSS更换皮肤。Java (Apache TomCat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, 等等，无论服务器端何种语言，均可使用。具有大量的内置小工具，类似jQuery插件。 6. Qooxdoo Javascript 框架 qooxdoo 是一个用于开发Ajax应用程序的GUI框架，使用它可以开发出类似于Window桌面风格的Web应用程序。使用Qooxdoo并不需要你具备HTML, CSS 和 DOM 的知识。 7. Zepo Javascript 框架 Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 8. DHTMLX Touch Javascript 框架 它是针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。 9. YUI library Javascript 框架 Yahoo! UI Library […]
View Detailswindow.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event if (evt.keyCode) { if(evt.keyCode == 116){ //do something } } } keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode […]
View Details<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>检测大写锁定键</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>检测大写锁定键 </h1> <form action="#" method="post"> <p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p> </form> <script type="text/javascript"> //<![CDATA[ function detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode = e.keyCode||e.which; // 按键的keyCode var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住 if ( ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键 || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键 ){oTip.style.display = ";} else{oTip.style.display = 'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html> from:http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html
View Details目前这种视差滚动效果被越来越多的国内外网站所应用，成为网页设计的热点趋势。 通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。 视差滚动效果与少即是多的理念相互交融，能带来清新炫目的感受，例如这组网站。 你也可以试试： 网页特效：滚动视差设计指南 利用ADOBE神器十分钟零代码实现HTML5视差滚动特效 Broken Twill theQ camera Srgint Sojourn Network Fall in Tennessee Made by Block Kill your Darlings WAAAC Spotify Serve Seattle Codetex 原文地址：webdesignledger 转摘请注明优设网译文出处，谢谢各位小编。 from:http://www.uisdc.com/inspiring-examples-of-parallax-scrolling-sites
View Details动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画，从最简单的基础效果到富有开创性的展示结果。毫无疑问，这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。已经被永不满足现状的Web开发者们发展到了一个全新的水平。这些动画缓慢却很清晰，让网页设计师在页面上把交互和视觉都展现结合的淋漓尽致。 如果你想学今天的这些案例，推荐回顾《让网页舞动起来！25个免费的视差滚动插件》和《网页特效：滚动视差设计指南》这两篇文章：） 小伙伴们！最新的最火爆的最给力的网页设计趋势来了！快来看看这个神奇的视差滚动设计趋势！ 小提醒：有些网站效果不能再赞，谷歌、火狐才能打开唷。 新鲜的网站趋势类型好文： 《网页设计新招式：火力全开！引爆网页中的视频应用》 《2014网页菜单新趋势！21例时尚创新的侧边栏菜单网页设计》 Kaipoche 该网站致力于今年的风筝节。通过一个简单的滚动激活动画技术，它有一个真正充满活力和引人瞩目的设计。 Bizbrain 是一个先进的长页面网站。它通过精彩的彩色图熟练地演示了各种数据。各个版块都有各自相应的信息。 Drugs and Alcohol on Campus 这也是一个交互式图表，能够在不知不觉中给你最紧迫的问题提供答案。所有画面都是通过鼠标来激活动画的，使这些问题看起来不那么“干巴巴”的。 Bright Media 该团队利用视觉引导串起所有元素，使用正确的顺序引导用户，每个部分都有装饰的动画元素，你的任务就是顺着线条走就OK了。 Adobe Muse CC 这是一个创新的、干净而复杂的网站，利用艺术方法引导用户来关注自身新产品。主要包括简洁的白色页面、纸张变形模式和滚动动画来实现效果。 Fluger 网站的开发人员在页面上放置了一架小飞机，用户通过滚动鼠标滚轮可以看到小飞机在页面上飞行，实现浏览整个网站的目的。网站是用图片和手绘稿糅合起来的，加上飞机的引导，看起来酷毙了！不过加载时需要等一定的时间。 Fillet 这是一个流行的平面风格网站，拥有很棒的字体。当你向下滚动鼠标时，每个色块都会顺利转化为一串漂亮的字符。整个过程显得很愉快。 NGUMA 这是一个富有魅力的互动机构网站。该网站允许你直接参与它的互动。也是基于滚动动画的设计趋势。 Happy New Year 2014 滚动激活动画模式非常适合于庆祝节日的网站设计。特别是圣诞节。这个网站里面通过一个完整的动画建立起一个温馨的节日气氛，真是让人感到很别致。 Merry Christmallax 和上面的例子一样，这个创意网站的目的就是给用户们一个温暖而衷心的节日祝福。故事开始于一张干净的纸张，最后演变成一个充满活力的插图场景，整个故事就是动过滚动激活动画技术实现的。 Pixelgyar 这是另一个奇妙的和迷人的圣诞故事。圣诞老人的旅程完全取决于你的行动,所以旋转鼠标滚轮,让圣诞老人到达他的目的地吧！ Make Your Money Matters 这是一个宣传网站,生动地展示了加入信用联盟的好处。在整个动画过程中你将成为一个积极参与者。这项技术允许我们持有一个既定主题来实现网站设计，做到和用户之间的良好互动。 The Future of Mobile Phones 正如网站标题所言，该网站就是预测未来的手机的。网站的交互式信息里面充满了各种动画图形，都是定期统计的数据展示。 Camplight 这是一个整洁、干净而时尚的在线展示网站。提供了一个较为新颖的展示方式让用户来熟悉公司。 1McHappy Day 这个网站通过橡皮泥一样的图形设计带给用户返老还童式的体验，心灵上很容易就欢快起来。（我觉得要是来点卡哇伊的背景音乐一定会更给力的！） CEZ 提供了另一个惊人的互动之旅，该技术功不可没啊。 What’s behind the number 网站目的是广泛宣传关于防晒霜的防晒指数及其优势。当你向下滚动时,你会享受到一个整体活泼的故事，试图告诉你使用该产品后，在阳光下你的皮肤依然很安全。 InfoGuest Infographic 如其名字一样，它有大量的信息填充内容，通过图表和动画的有效结合展示出来。 Bolia 和上面的例子稍有不同，该创意团队应用基于照片的滚动激活动画来展示椅子的所有面。 Bam 该公司试图利用长页面布局和各种图纸来实现信息填充。为了避免各部分信息过于统一单调，研究小组决定采用滚动激活动画给网站带来生气。 Areal Plankstadt 这是一个宁静的网站，拥有美丽的氛围。为什么？——蓝白两色，青春一生……通过滚动激活动画技术实现页面之间的切换，非常平静安宁。 结语 这里所列出的这些在线信息展示网站、视觉故事网站、创意机构网站以及投资组合网站都实实在在地利用了滚动激活动画这一崭新的设计技法，构造了一个特定的用户体验模式，希望小伙伴们能够有动力去学习这一项新技术。 我最喜欢Adobe Muse CC和Fluger了，看起来真的是十分赞的！ 原文地址：designmodo 优设网翻译：@sheisjane 本文由优设网uisdc.com原创翻译，转摘请注明优设网译文出处，谢谢各位小编。
View Details最近大家伙越来越关注视差滚动的网页了，很多同学都在四处寻找相关的案例来赏析学习。此前我们也分享过相关的制作教程及文章。 那么今天我们继续推荐20个创意十足的视差滚动酷站，希望能为你的案例带来灵感：）强烈推荐收藏。 好文推荐： 《无法抗拒的诱惑，美女封面网站设计欣赏》 《敢于尝试！23个有着非同寻常配色的网页设计》 《极好的交互设计：19个创意网页欣赏》 Beatbox Academy Discover Shadow This is Now Sam Markiewicz Erős Balázs Le Tour de France Pi’s Epic Journey Scroll For Your Health TCM Summer Under the Stars TEDxGUC aBenção – Malhas e Tricots Criativos WAAAC De Might of Mister Miller Negative Space Anthelios SPF Sunscreen InfoQuest Infographic Reunite the River Fillet Eone 原文地址：speckyboy.com from:http://www.uisdc.com/20-webpage-parallax-scrolling-design
View Details在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是"改变"。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的，今天这篇文章就和大家分享六款精心挑选的 jQuery 视差滚动效果插件，它们能够帮助你制作出精美的视差滚动效果。 Sequence.js Sequence 是一款非常优秀的 jQuery 滑动插件，能实现多种精美的滑动效果，其中之一就是水平方向的视差滚动。 在线演示 下载源码 jQuery Scroll Path 这款插件用于实现自定义路径的滚动效果。可以显示使用 Canvas 绘制路径线条和弧形，看到非常形象的运动效果。 在线演示 下载源码 Parallax Slider with jQuery 这个视差滚动滑动效果多次在我的博文中出现过，相信关注我博客的朋友一定不会陌生，有非常详细的制作教程。 在线演示 下载源码 jQuery Parallax 这款 jQuery 插件实现了类似 Nikebetterworld.com 产品展示页面的视差滚动效果，代码托管在 Github 上面。 在线演示 下载源码 Scrollorama 这款 jQuery 插件能够帮助你实现非常酷的滚动效果，可以应用飞入、缩放、淡入淡出等多种过渡效果。 在线演示 下载源码 Stellar.js 正如它的口号所说：实现视差滚动效果从未如此容易，的确，它能帮助轻松的实现网页视差滚动效果。 在线演示 下载源码 jParallax 这款基于 jQuery 的视差滚动插件使用简单，官方提供了五种不同的效果演示。 在线演示 下载源码FROM:http://www.jb51.net/article/31259.htm
View Details随着 Web 开发者和设计者收藏 JavaScript 库的数量越来越多，JavaScript 也有大量流行的库：jQuery，MooTools 等等，很多时候大家都会使用 JavaScript 模板引擎来开发 JavaScript 应用。以下列表介绍的就是 JavaScript 模板引擎。 这里我们收集了一些非常有用的 JavaScript 模板引擎，希望能给 Web 开发者和设计者提供一定的帮助，在评论与大家交流一下 JavaScript 模板引擎的相关心得吧：） 1) Jade jade 是超高性能的 node JavaScript 模板引擎，有着非常强大的 API 和大量杰出的特性。它主要针对 node 的服务端。 2) Mustache Mustache 是 logic-less 模板语法，可以使用在 HTML，配置文件，源代码等等地方。它是使用哈希表或者对象提供的值来扩展模板标签。 3) Transparency Transparency 是一个强大的客户端网站模板引擎，可直接绑定数据到 DOM，包括一些很棒的特性如 HTML 模板、JS 视图逻辑。支持 IE9+, Chrome, Firefox, iOS, Android, Etc. 4) Underscorejs Underscore 是 JavaScript 库，提供大量有用的函数式程序设计助手，不需要扩展任意的内置对象。 5) Embeddedjs EJS 会使用客户端模板从 JavaScript 中清理 HTML 代码，整理好这些代码之后，JavaScript 代码就会变得更加整洁和有条理。 6) DoTjs doT.js 是最快和简洁的 JavaScript 模板函数搜索，这些函数致力于 V8 和 Node.js 下高性能的表现。doT.js 在浏览器和 Node.js 下都表现出超高的性能。 7) Handlebarsjs Handlebars 给构建语义模板提供强大的基础支持。 8) T.js T.js 是使用简单 JavaScript 数据结构来展示 html/xml 数据的模板引擎。 9) Dustjs Dust 是浏览器和 Node.js […]
View Details<![if !IE]> <script> /* * by moli */ $(document).ready(function(){ if(document.cookie.indexOf("lu=") == -1 ){ // 延时2秒 setTimeout("jQuery.mxblur.interID = setInterval('jQuery.mxblur.begin()', 5)", 1500); } }); $.mxblur = { interID : null, num: 0.01, begin : function() { jQuery.mxblur.blur( jQuery.mxblur.num ); if(jQuery.mxblur.num > 3) { jQuery.mxblur.num = 0; if(confirm("少年！是不是代码写多了？眼睛模糊了？")) { alert("太累啦，就该歇歇啦，愚人节快乐:)"); clearInterval(jQuery.mxblur.interID ); jQuery.mxblur.blur(0); document.cookie = "lu=lu"; } } jQuery.mxblur.num = jQuery.mxblur.num + 1 /100; }, blur : function() { $("body").css("-webkit-filter","blur("+$.mxblur.num+"px)"); $("body").css("-moz-filter","blur("+$.mxblur.num+"px)"); $("body").css("-o-filter","blur("+$.mxblur.num+"px)"); $("body").css("-ms-filter","blur("+$.mxblur.num+"px)"); $("body").css("filter","blur("+$.mxblur.num+"px)"); $("body").css("filter","url(blur.svg#"+ $.mxblur.num.toFixed(1) +")"); } } </script> <![endif]> from:http://www.oschina.net/code/snippet_563269_34669
View Details随着浏览器不断的升级改进，CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文 件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！ 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。 1 // Get the color value of .element:before 2 var color = window.getComputedStyle( 3 document.querySelector('.element'), ':before' 4 ).getPropertyValue('color'); 5 6 // Get the content value of .element:before 7 var content = window.getComputedStyle( 8 document.querySelector('.element'), ':before' 9 ).getPropertyValue('content'); 看见了吗，我能访问伪元素里的content属性值。如果你想创建一个动态的，风格别致的网站，这是一种非常有用的技术！ classList API 很多的JavaScript工具库里都有addClass，removeClass和toggleClass等方法。为了对老式浏览器的兼容，这些类库采用的方法都是先搜索元素的className，追加和删除这个类，然后更新className。其实有一个新型的API提供了添加，删除和反转CSS类属性的方法，叫做classList： 1 myDiv.classList.add('myCssClass'); // Adds a class 2 3 myDiv.classList.remove('myCssClass'); // Removes a class 4 5 myDiv.classList.toggle('myCssClass'); // Toggles a class 大多数的浏览器里很早就实现了classListAPI，而且最终IE10里也实现了它。 直接对样式表进行添加和删除样式规则 我们都非常熟悉使用element.style.propertyName来修改样式，使用JavaScript能帮助我们做到这些，但你知道如何新增或修一个现有的CSS样式规则吗？其实非常的简单。 01 function addCSSRule(sheet, selector, rules, index) { 02 if(sheet.insertRule) { 03 sheet.insertRule(selector + "{" + rules + "}", index); 04 } 05 else { 06 sheet.addRule(selector, rules, index); 07 } 08 } 09 10 // Use it! 11 addCSSRule(document.styleSheets[0], "header", "float: left"); 这种方法通常是用来创建一个新的样式规则，但如果你想修改一个现有的规则，也可以这样做。 加载CSS文件 延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源，可你知道CSS样式表也可以延迟加载吗，而且在加载成功后回调函数会给予通知。 01 curl( 02 [ 03 "namespace/MyWidget", 04 "css!namespace/resources/MyWidget.css" 05 ], 06 function(MyWidget) { 07 // 你可以对MyWidget进行操作 08 // 这里没有对这个CSS文件引用，因为不需要; 09 // 我们只需要它已经加载到页面上了 10 } 11 }); 本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后，回调函数就会触发，我可在回调函数里加载它。非常有用！ CSS鼠标指针事件 CSS鼠标指针事件pointer-events属性非常的有趣，它的功效非常像JavaScript，当你把这个属性设置为none时，它能有效的阻止禁止这个元素，你也许会说“这又如何？”，但事实上，它是禁止了这个元素上的任何JavaScript事件或回调函数！ 1 .disabled { pointer-events: none; } […]
View Details