随笔分类 - [10]JS
-
粒子系统
摘要:[译] THREE.JS入门教程-4.创建粒子系统译序Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。国外网站aerotwist.com有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享。0.简介嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你 阅读全文
-
开始使用THREE.JS
摘要:[译] THREE.JS入门教程-1.开始使用THREE.JS译序Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。国外网站aerotwist.com有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享。我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助。通过Three.js,你不仅可以创建相机、物体、光线、材质等等,还可以选择着色器,可以决定使用何种技术(WebGL、 阅读全文
-
jQuery Callbacks
摘要:jQuery.Callbacks是jQuery的多用途核心组件,专职负责回调函数列队管理,其在jQuery的$.ajax()和$.Deferred()提供了一些基础功能。其主要提供了易于管理的批量回调函数处理的功能。说到批处理,在Javascript库中屡见不鲜:Baidu七巧板有baidu.each()Prototype有Enumerable#eachjQuery有.each()等等…………为了理解Callbacks函数的实现,我们先来了解下jQuery.each()。each()我们可以在jQuery的源文件core.js找到其完整实现:/********************* * . 阅读全文
-
自定义jQuery翻页插件
摘要:自定义jQuery翻页插件第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东jQuery.fn,例如jQuery.fn.pluginName=function(){};这个是我写的分页插件的样子插件通过一个外放的函数来进行翻页操作,无论是点击前进、后退、还是改变页面大小,都会调用该函数。先看看插件的代码结构 1 (function ($) { 2 3 //存放插件所需的属性字段 4 var PagerFields = { 5 }; 6 7 //插件的私有函数 ... 阅读全文
-
高并发下的Node.js与负载均衡
摘要:新兴的Node.js已经吸引了很多开发人员的眼光,它提供给我们一个快速构建高性能的网络应用的平台。我也开始逐步投入node.js的怀抱,在学习和使用的过程中,遇到了一些问题,也有一些经验,我觉得有必要写出来,作为总结,也用作分享。众所周知,node.js基于v8引擎,所以它本身并不支持多线程(有多线程的Module哦),那么为了充分利用server的Multi-core,就必须使用多进程的方式。那么进程之间如何负载均衡就会是一个关键所在。多进程共享监听socketNode.js与进程相关的模块有process,child_process,cluster,这其中cluster用于方便的创建共享端 阅读全文
-
拙计的经历
摘要:这样一道题目:JavaScript中,有A、B两个类,让B类继承A类的所有属性。听完描述,认为很简单,于是直接就在firebug中敲代码了,正敲着的时间,那哥们儿对我说:console.log出来就行了,于是我果断console.dir了,结果就发现如图1-1,调了一下,加上参数,换apply…都没出来,当场就拙计了…..图1-1更为拙计的是,当时就怀疑自己了,没有换console.log,alert,哪怕是document.write试一下。回来想想感觉不对,于是就测试了一下,还真发现了问题,接着上图1-2:图1-2发现问题没有,直接console.dir(obj),该对象的属性就出来了,可 阅读全文
-
Koch曲线
摘要:图1-1 雪花图形前两天在一个网页上看到了雪花,感觉很漂亮,就搜索了下,发现了这个Koch曲线(大概很多人都早就知道(︸_︸)),看上去很漂亮,简单的分形,简洁的递归,就是美丽的图案。图1-2 维基百科分形条目中的koch(科赫)曲线图例,非常明了。HTML5中加入了canvas标签,可以方便的绘制简单或复杂的图形。canvas的使用比较简单,这次只用到它的画线功能。简单介绍下canvas的使用:varcanvas=document.getElementById("cantest"); //获取canvas对象if(canvas.getContext){ //可以通过这种方 阅读全文
-
mass Framework event模块 v9
摘要:本次升级借鉴了jQuery事件模块的许多代码,可谓是jQuery事件模块的改良版。与原先一样,拆分为两块,event模块是支持新一代的浏览器的,如IE9,chrome5+, opera10+,safari5+;event_fix是对付IE678。拆分后的好处,在标准浏览器中,我们就不要加载这么多代码,跑这么多注定要跳过的分支,有效地提升性能。拆分后就有利于我对标准浏览器有一个新的了解,发现firefox成为最拖后腿的一位。它在滚轮事件,focusin, focusout的迟迟不合作,让我们不得不奠出eventSupport等利器。webkit系还需要模拟mouseenter, mouselea 阅读全文
-
图片轮播
摘要:电子商店的图片轮播功能,有以下特点1.高性能2.美观大方3.兼容IE 6、IE 8+和Firefox 3+等浏览器4.总体积要小(除图片外)3k5.js简单易懂(40行)首先让我们看一下效果:高性能是我们首先需要考虑的图片轮播的功能实现思路:客户首先看到第一张图片,这样就需要首先加载第一张图片,背后的第二张和第三张在背后隐藏,但是最后还是要用到,这样,就可以在页面完全加载成功后(window.onload),使用延迟加载图片的功能实现。图片由二级域名提供,这样就可以并行加载图片。View Code美观大方就需要使用CSS来优化了CSS静态滤镜样式 filter和不透明度opacity ,将轮播 阅读全文
-
MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel
摘要:对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的“绑定”机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源。MVVM最早被微软应用于WPF/SL的开发,所以针对Web的MVVP框架来说,Knockout.js(以下简称KO)无疑是“根正苗红”。在进行基于KO的Web应用开发时,我们一般会为具体的Web页面定义针对性的ViewModel,但是在很多情况下很多页面具有相同的UI结构和操作行为,考虑到重用和封装,我们是否为它们创建一个共享的ViewModel呢。最近在一个小项目中,我们对这种方式进行了尝试,觉得是可行的,但同时也发现的一些问题。这篇文 阅读全文
-
网站首页图片滚动显示
摘要:1 <div id="demo"> 2 <div id="indemo"> 3 <div id="demo1"> 4 <asp:Repeater ID="Pro_List" runat="server"> 5 <ItemTemplate> 6 <a href="/Product/html/<%#Eval("id") %>/" title="<%#Eval(&quo 阅读全文
-
【自然框架】js版的QuickPager分页控件 V2.0
摘要:优点:1、 通过更换模板可以控制各个分页元素(比如首页、末页,页号导航等)的位置和是否显示。2、 通过更换css可以实现各种UI风格和效果。(附带24套css效果)3、 Js的方式创建分页UI,不占用服务器资源。4、 可以通过插件的方式更换各部分js代码。如果自带的js代码不能满足您的需求,那么您自己写的插件实现需要的效果。5、 Ajax的方式获取记录集,减轻网络负担。6、 多种调用方式,让“偷懒”和灵活共存。缺点:1、 不支持SEO。因为用js和ajax,所以不支持搜索引擎的收录。2、 不支持服务器端控件,比如GridView。内容介绍:1、 模板 设置一个htm页面,存放分页用的模板,这. 阅读全文
-
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
摘要:网站项目必备——12款经典的白富美型 jQuery 图片轮播插件 图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的jQuery图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的jQuery插件和WordPress插件两个版本。目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:✓ 16个独特的过渡效果✓ 简洁和有效的标记✓ 加载参数设置✓ 内置方向和导航. 阅读全文
-
mass Framework spec模块v5
摘要:这是我的测试框架的第8代,前三代是前一个体系,名为abut。spec混杂了Qunit与BDD的一种语法,但更简巧。主要改进是用户界面,更方便地定位出错的断言。为了防止某一个断言抛错而影响整个测试,这次还引用window.onerror来吞掉所有错误。使用ol列表直接列举要测试逻辑,代替直接显示源码,不对不怎么会编码的测试人员更为友好。引入\u2714与\u2716这两个字符让断言结果更醒目。下面就是显示图:用法:define(["$spec,mass"], function() {$.log("已加载test/mass模块", 7)describe( 阅读全文
-
工作中碰到的一些东西【弹出窗口】【拖放】【异步文件上传】
摘要:久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了。弹出窗口 我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层:这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了主要代码如下:?//弹出层剧中functionpopup(popupName) {var_scrollHeight = $(document).scrollTop(); //获取当前窗口距离页面顶部高度_windowHeight = $(window).height(); //获取当前窗口高度_. 阅读全文
-
飘雪花
摘要:使你的博客飘雪花(优化版)前些天,在园子里看到了使你的博客飘雪花的文章,就赶紧弄到自己的博客里来看看效果,别说,还真是漂亮啊。可是看了一会,就发现页面变得特别卡。看了下代码后发现,原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除。但是,实际上,超出屏幕的页面我们又看不见,就算有雪花在飘又有什么意义呢。于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位。将页面刷新下,果然好多了。现把修改代码贴出来与大家分享。PS.原作者链接我没找到,版权归原作者所有:)(functio 阅读全文
-
Ajax请求过程中显示“进度”的简单实现
摘要:Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求);调用完成后,图片消失,当前页面运行重新编辑。以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左)。当用户点击该链接之后,Ajax请求开始,GIF图片显示“Loading“状态,同时当前页面被“罩住”防止用户继续点击Load按钮(中);Ajax请求完成被返回响应的结果,结果被呈现出来的同时,GIF图片和“遮罩”同时消失(右)。[源代码从这里下载] 阅读全文
-
Fine Uploader文件上传组件
摘要:Fine Uploader文件上传组件2013-01-04 19:16 by chenkai, 300 阅读,0评论,收藏,编辑最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要求类似IE版本必须是9或是更高的IE10].在不同浏览器中提供统一用户体验.该组件基本覆盖目前所有主流浏览器.同时没有任何第三方组件依赖.相当Clear.在服务器端已经覆盖支持了ASP.NET/ColdFusion/Java/Node.js/Perl/PHP/Python 阅读全文
-
mass Framework data模块 v3
摘要:mass Framework data模块 v3这是吸收jquery2.0的新技术,通过节点在数组中的索引值来关联目标与缓存体。这就有效避开了IE下某些节点不能添加自定义属性的问题,也在es5中新增的Object.preventExtensions方法下得以生存。View Code//==================================================// 数据缓存模块//==================================================define("data", ["$lang"], 阅读全文
-
分享微博@功能jquery代码及全面解析
摘要:先上图演示下:看完图就直接上代码吧,其中有几处写死的地方,我有提示,你们自己改下就是了。//@显示用户列表(function($) { //判断是否为子元素 function isParent(obj,pobj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ if (obj == pobj){ return true; } obj = obj.parentNode; } return false; } ... 阅读全文