一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

js数学函数

Math.ceil求最小的整数但不小于本身. Math.round求本身的四舍五入。 Math.floor求最大的整数但不大于本身. js全屏代码:window.open("full_window.htm","","fullscreen,scrollbars") Math.E 自然对数的底(为常数) 2.718 Math.LN10 10的自然对数 2.302 Math.LN2 2的自然对数 0.693 Math.PI 圆周率 3.1415 Math.SQRT1_2 1/2的平方根 0.707 Math.SQRT2 2的平方根 1.414 Math.sqrt(x) X的平方根 更X的值有关 Math.pow(x, n) 返回x的n次方的数值 参数为x和n Math.log(n) 返回n的自然对数 参数为n Math.exp(n) 返回e的n次方的数值 参数为n 三角函数 Math.cos(x) X的余弦函数 Math.sin(x) X的正弦函数 Math.tan(x) X的正切函数 Math.acos(y) X的反余弦函数 Math.asin(y) X的反正弦函数 Math.atan(y) X的反正切函数 这里注意:参数x和以及反函数的返回数值的单位都为弧度(比如 PI弧度=180度) 舍入函数和随机数字 Math.random() 产生从0到1的随机数 Math.round(x) 取最接近整数x的数值 Math.floor(x) 取最接近整数x并且比x小的数值 Math.ceil(x) 取最接近整数x并且比x大的数值 Math.min(a, b, c) 返回参数列表中最小的数值 Math.max(a, b, c) 返回参数列表中最大的数值

龙生   26 Dec 2013
View Details

用于构建交互式图表的最佳 jQuery 图表库

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图表库,已经越来越流行了,因为它们有着相当吸引人的组件,囊括了我们已知的包括线状图,柱状图和饼图等7种图表类型。另外,这些js图表库提供一些有用的组件作为它们的可选项,比如说放大,缩小,这些工具能提供关于数据的更多信息,同时也提供一些选项对其进行定制。 tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 用户通常遇到某些使用了兼容现代浏览器的HTML5的canvas特性的jQuery图表,并不能很好的与IE兼容。整体上,这些库集成了六种图表类型,比如散点图,饼图,柱状图,带点的折线图以及区域图。这些图表能够通过简单的配置就能展示多种图例,这将帮助人们清楚的分辨各图表项。 在这篇文章中,我们分享给读者的是15个图表库——各种从简单到复杂的高级图表,它们都能胜任。希望你们喜欢! tnjin 翻译于 2天前 1人顶 顶 翻译的不错哦! 1. Chart.js : 使用HTML5 canvas的图表库 Chart.js是一个令人印象深刻的基于HTML5的canvas特性构建的javascript图表库。目前支持六种图表类型(折线图,柱状图,雷达图,饼图,柱状区域图和极坐标区域图),而且这些通过一个独立的,不足5Kb的包来提供的。颜色,字体,加粗以及图表大小都是可以定制的。同时,图表也可以选择在加载的时候添加动画效果。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 2. xCharts : 基于数据驱动的图表 xCharts是一个用于给网站创建具有漂亮的视觉效果和自定义数据驱动的图表的javascript库,它依赖于D3.js。基于HTML,CSS和SVG技术,xChart被设计成能够被动态,流式和开放的集成和定制。 由于xChart使用SVG技术,我们能够直接通过CSS生成大部分的我们定义的xChart图表。这意味着如果你愿意,你只需要做很少的控制就可以处理这些可视化的图表。定义图表风格的最好的方式是从包含的样式表开始,或者使用你的浏览器的元素监视器来查看每一个元素可用的CSS选择器。  Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 3. Sigma.js : 使用HTML5的canvas对象作图 Sigma.js 是一个使用HTML5 Canvas元素作图的免费开源的javascript图表库。它被特别设计成适合分享页面上交互的网络地图和浏览动态的网络数据库。这个js库以MIT协议分发。 Source 4. HighCharts Highcharts 是一个纯粹使用HTML5/Javascript写的图表库,能向你的网站或者网络应用提供直观交互的图表。目前,Highcharts支持折线图,曲线图,面积图,面积拟合图,条状图,柱状图,饼图,散点图,仪表图,面积范围图,面积曲线图,条状范围图,气泡图,箱型图,误差线,漏斗图,瀑布流和极坐标图表类型。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 5.Fusion Charts jQuery 的FusionCharts插件帮助你增加交互式的JavaScript图表,在你的网站,移动端和企业级应用中绘图。它将FusionCharts套件XT的灵动和全面的特点与jQuery简易的语法融合在了一起 Source 6. Flot :  jQuery中引人注目的JavaScript绘图插件 Flot 为jQuery准备的一个纯JavaScript绘图库, 重点在于使用简单,引人注目的界面和良好的交互特性。图的一些关键特性是通过开关,放大缩小和与数据点交互来控制的,此外还有它加入了简单工具提醒的功能 Source Mitisky 翻译于 2天前 0人顶 顶 翻译的不错哦! 7. JS Charts : 免费的JavaScript图表 JS Charts是一个基于JavaScript的图生成器,它只需要很少或不需要编码。使用JS Charts来绘制图表是一个简单且容易的工作,因为你只需要使用客户端脚本(即通过Web浏览器操作)。不需要额外的插件或服务器模块。只引用这个脚本,准备好图表数据的XML、JSON或JavaScript数组,OK,你的图表已经就绪了! 源码 8. jQuery Sparklines 这个jQuery插件直接在浏览器中生成波形图(小的内联图表),使用的数据可以是内嵌在HTML中或通过JavaScript提供。这个插件与大多数现代浏览器兼容,已经使用Firefox 2+、Safari […]

龙生   10 Dec 2013
View Details

15 个最佳的 jQuery 表格插件

现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点。 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容。网格设计常见于报纸和杂志中的文字图像排版设计。   可以创建网格布局的数量几乎是无限的,并且能够用无数种方式排布。比如:在等间距的两列,三列或者四列网格顶端有一个横跨的header,或者一整页的有着同样外观和感觉的方格。 有一些很好的JQuery网格布局插件能够大幅的缩短开发时间,如果你在你下一个项目中使用的话。这些网格插件能够优化瀑布流,使列的大小可调,滚动数据以匹配header,同样也可以添加数据网格,以及针对网格的一些动作比如:重新调整列的大小,分页,排序,行和列的样式等等。 下面是15款jQuery网格布局插件,能够让开发者和设计师在创建响应式布的网格布局时,同时拥有迷人的视觉效果,以及一个兼容所有浏览器和手持设备的响应式的外观。希望你们能够喜欢!   1.自由墙 自由墙是一个跨浏览器的响应式jQuery插件,它可以帮助你创建很多不同的网格布局:灵活布局,图片布局,网格,流体网格,metro风格布局还有用CSS3实现的动画效果和回调事件的瀑布流布局。自由墙是一站式的解决方案来在桌面,移动和平板上动态创建网格布局。 它是基于容器的宽(或高)以及单元的宽(或高),同时它会创建一个虚拟的矩阵。扫描矩阵的每一个单元,找到空闲单元并让其为空白区域,之后将一个块元素插入。若果没有块可以匹配的话,它将缩放块来适应(这是选项之一) 出处   2. S Gallery S Gallery 是一款 jQuery 图片画廊插件 ,将图片显示在响应式网格。它的灵感来自于Sony’s产品页画廊 (Flash实现) 并完全实现了它的功能。当一个项目获得焦点或被点击时, 可以使用 prev-next 按钮 或使用键盘来浏览其他操作。 单击后会返回网格视图并有一个全屏选项(使用HTML5全屏API). 查看代码   3. Mason.js 创建一个动态列的网格布局(比如Pinterest)有许多javascript方案。虽然大多数都很棒,但有时,这些网格会含有缝隙或者锯齿边缘。Mason.js是一款致力于通过智能填充空隙,力图表现完美网格的jQuery插件。一个网格被创建出来,这款插件会计算空隙的位置并使用预定义的元素或者重复内容填充空隙。元素的大小,列/行的大小,断点以及布局是流式还是固定都是可以被重新定义的。 Source   4.jQuery.Shapeshift 有许多jQuery的插件可以创建一个照片分享样式的动态网格布局。jQuery.Shapeshift是一个正是这类插件的强大替代品,通过一个触摸动作,这些图片可以拖曳(需要使用jQuery UI)。拖曳可以影响网格布局,就像网格在需要的时候,会自动去填充空隙一样。这同样在触摸设备和响应式布局上有效。这个插件有许多灵活可变的参数,比如设置margin,启用/禁用拖曳,自定义动画等等。 Source   5. jQuery Nested Nested是一款可以生成多列没有空隙的网格布局的jQuery插件。这个插件为所有的元素创建一个矩阵,建立一个多列的网格,并尝试用记录的元素来填充所有空隙。其实有很多解决方案能够达到同样的效果。但是,Nested提供了一个小的动作:它能够重新调整网格底部的任何元素,以确保没有缝隙。它的用法也很简单,只需要给一个jQuery的函数指定容器元素就行。并且,提供了多种可选参数方便用户定制,比如启用/禁用动画,最少列数等 Source   6. Wookmark jQuery Plugin 拥有动态列的网格布局如此流行,并不仅仅是因为它们被用于图片分享的网站,更是因为对于不同大小的内容显示来说,这是一个非常棒的方式。Wookmark,Pinterest的替代品,发布了一个可以创建那样布局的jQuery插件,兼容所有的浏览器。目前,这个插件只提供了少量的可选项:容器元素,offset(垂直/竖直距离)和元素的宽度——就这些。在初始化时,它会自己获取窗口的大小并自动排布网格(当然,它也是响应式的布局)。 Source   Grid-A-Licious是一个jQuery插件,可以让你很容易的创建类似Pinterest的浮动表格布局。当然也有其他的插件能够完成这个功能,但Grid-A-Licious提供了更完善的响应式解决方案。不管什么尺寸的屏幕,还是什么设备,表格表现得都很完美,它都能实现浮动而不使用绝对定位。插件提供了自定义宽度、间隔和动画(速度,过渡时间,效果等等)的选项,并且它支持在表格前或后插入新项目,这对于动态布局来说是非常有用的。 Source   8. jPhotoGrid jPhotoGrid只需要图像和字幕的简单列表,就可以将其变成了可以浏览和放大照片的网格。这个插件几乎所有的样式都是靠CSS完成的。诀窍是通过浮动的列表项来对网格进行布局。而插件会做的第一件事,就是将这些都转换成绝对定位。这就是为什么这个插件可以放大单个图像,然后将其返回到原来的地方。 来源   9. Gridster Gridster是一个令人印象深刻的jQuery插件,是为了开发出一个类iGoogle的多列网格,可以拖动n行删除并重新排序。该插件只需要jQuery(不用jQuery UI),可以将任何给定的HTML构造成网格的部件。而且,不局限于最初加载的元素,它还可以动态的添加新元素和删除现有的元素。 来源   10. Photoset Grid PhotosetGrid是一个简单的jQuery插件,用来将图片基于Tumblr的图片集功能,整理成一个灵活的网格。插件最初用于Style Hatch Tumblr主题,以此来在一个响应式的布局中显示图片集,但他们后来扩展了它,并为我们发布了一个jQuery插件。 来源 11. Flex Flex是一个流式非对称的网格动画jQuery插件。你可以将鼠标放在瓦片上,就能看到它们渐渐扩大。 Flex是一个想法,灵感来自于Adidas.com的flash主页。 来源   12. Freetile […]

龙生   03 Dec 2013
View Details

纯css制作面包屑,兼容IE6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯css制作面包屑,兼容IE6</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* demo */ .demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;} .demo ul{height:32px;overflow:hidden;} .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;} .demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;} .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;} .demo li.current{background:#f60;color:#fff;z-index:1;} .demo li.current i{border-color:transparent transparent transparent #f60;} </style> </head> <body> <div class="demo"> <ul class="clearfix"> <li>面包屑一<em></em><i></i></li> <li class="current">面包屑二<em></em><i></i></li> <li>面包屑二<em></em><i></i></li> </ul> </div> </body> </html>

龙生   23 Nov 2013
View Details

网页导航特效代码:纯CSS3制作的面包屑导航代码

<!DOCTYPE html> <html> <head> <title>CSS3 breadcrumbs – demo</title> <style> html{ background: #333; } body{ font: normal 14px Arial, Helvetica; width: 920px; margin: 100px auto; color: #444; background: #fff; padding: 40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } a{ color: #777; } /* ——————————————- */ ul{ margin: 0; padding: 0; list-style: none; } /* ——————————————- */ #breadcrumbs-one{ background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2); box-shadow: 0 0 2px rgba(0,0,0,.2); /* […]

龙生   23 Nov 2013
View Details

10 个新鲜奇妙的 jQuery 插件

每个月都有很多新的 jQuery 插件推出,虽然大多数都很基础,了无新意。但也的确有不少是非常有意思的。我们这里列出 10 个新的奇妙的 jQuery 插件: jqtimeline Download: http://goto.io/jqtimeline/ Any List Scroller Download: http://als.musings.it/ Custom Scrollbar Download: http://manos.malihu.gr/tuts/custom-scrollbar… Social Count Download: http://fgte.st/SocialCount/examples/ Facebook wall Download: http://www.neosmart.de/social-media/facebook-wall/ Supersized! Download: http://buildinternet.com/project/supersized/ Sidr Download: http://www.berriart.com/sidr/ Flexisel Download: http://9bitstudios.github.io/flexisel/ iCheck Download: http://damirfoy.com/iCheck/ Textillate Download: http://jschr.github.io/textillate/ 转自:http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins

龙生   23 Nov 2013
View Details

JS版的个税计算器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>个税计算器</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <style> .descBlock { margin: 0 auto; width: 550px; display: none; } .descBlock_on { margin: 0 auto; width: 550px; } .descTitle { color: #FF0000; font-size: 18px; text-align: center; line-height: 120%; } .descContent { line-height: 150%; } </style> <script language="javascript"> //工资、薪金所得 OK 2000 function calcTax1(income) { var tax; var diff = (income – 2000); if (diff <= 0) { tax = 0; } if (diff > 0 && diff <= 500) { […]

龙生   22 Nov 2013
View Details

为 Web 设计师准备的 25+ 款扁平 UI 工具包

Flat UI Kit by Riki Tanone (free)   Flat UI Kit (PSD) by Devin Schulz (free)   Eerste UI Kit (free)   Metro UI kit (free)   Ui Kit by Abhimanyu Rana (free)   Flat Ui Kit by Zachary VanDeHey (free)   FREE flat UI kit by Visualcreative.cz (free)   UI Kit (PSD) by Piotr Kwiatkowski (free)   Vertical Infinity (free)   Flat/UI Kit by Sebastiaan Scheer (free)   Flat UI Kit by Jan Dvorak (free)   Flat Design UI Concepts (free)   UI/UX Kit (free)   Flat Bold UI Kit by Simon Eramo (free)   UI Kit by Huseyin Yilmaz (free) […]

龙生   20 Nov 2013
View Details

使用 WebSockets 的 9 个应用场景

WebSockets支持及时数据交换,并被所有现代浏览器支持。请直接在你的web apps上使用它吧。 至所有我的读者:幸运的是我目前在巴西进行Scaling systems项目,享受32度的气温,吃着咸八宝饭还有凯匹林纳鸡尾酒。同时根据你们的要求更新着博客,我邀请了我主要的成员侨纳琛弗里曼在我离开的时间指导你们。 没有其他技术能够像WebSocket一样提供真正的双向通信,许多web开发者仍然是依赖于ajax的长轮询来实现。(注:我认为长轮询是富于创造性和多功能性的,虽然这只是一个不太完美的解决办法(hack))对Websocket缺少热情,也许是因为多年前他的安全性的脆弱,抑或者是缺少浏览器的支持,不管怎样,这两个问题都已经被解决了。 决定手头的工作是否需要使用WebSocket技术的方法很简单: 你的应用提供多个用户相互交流吗? 你的应用是展示服务器端经常变动的数据吗? 如果你的回答是肯定的,那么请考虑使用WebSocket。如果你仍然不确定,并想要更多的灵感,这有一些杀手锏的案例。 1.社交订阅 对社交类的应用的一个裨益之处就是能够即时的知道你的朋友正在做什么。虽然听起来有点可怕,但是我们都喜欢这样做。你不会想要在数分钟之后才能知道一个家庭成员在馅饼制作大赛获胜或者一个朋友订婚的消息。你是在线的,所以你的订阅的更新应该是实时的。 2.多玩家游戏 网络正在迅速转变为游戏平台。在不使用插件(我指的是Flash)的情况下,网络开发者现在可以在浏览器中实现和体验高性能的游戏。无论你是在处理DOM元素、CSS动画,HTML5的canvas或者尝试使用WebGL,玩家之间的互动效率是至关重要的。我不想在我扣动扳机之后,我的对手却已经移动位置。 3.协同编辑/编程 我们生活在分布式开发团队的时代。平时使用一个文档的副本就满足工作需求了,但是你最终需要有一个方式来合并所有的编辑副本。版本控制系统,比如Git能够帮助处理某些文件,但是当Git发现一个它不能解决的冲突时,你仍然需要去跟踪人们的修改历史。通过一个协同解决方案,比如WebSocket,我们能够工作在同一个文档,从而省去所有的合并版本。这样会很容易看出谁在编辑什么或者你在和谁同时在修改文档的同一部分。 4.点击流数据 分析用户与你网站的互动是提升你的网站的关键。HTTP的开销让我们只能优先考虑和收集最重要的数据部分。然后,经过六个月的线下分析,我们意识到我们应该收集一个不同的判断标准——一个看起来不是那么重要但是现在却影响了一个关键的决定。与HTTP请求的开销方式相比,使用Websocket,你可以由客户端发送不受限制的数据。想要在除页面加载之外跟踪鼠标的移动?只需要通过WebSocket连接发送这些数据到服务器,并存储在你喜欢的NoSQL数据库中就可以了(MongoDB是适合记录这样的事件的)。现在你可以通过回放用户在页面的动作来清楚的知道发生了什么。 5.股票基金报价 金融界瞬息万变——几乎是每毫秒都在变化。我们人类的大脑不能持续以那样的速度处理那么多的数据,所以我们写了一些算法来帮我们处理这些事情。虽然你不一定是在处理高频的交易,但是,过时的信息也只能导致损失。当你有一个显示盘来跟踪你感兴趣的公司时,你肯定想要随时知道他们的价值,而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。 6.体育实况更新 现在我们开始讨论一个让人们激情澎湃的愚蠢的东西——体育。我不是运动爱好者,但是我知道运动迷们想要什么。当爱国者在打比赛的时候,我的妹夫将会沉浸于这场比赛中而不能自拔。那是一种疯狂痴迷的状态,完全发自内心的。我虽然不理解这个,但是我敬佩他们与运动之间的这种强烈的联系,所以,最后我能做的就是给他的体验中降低延迟。如果你在你的网站应用中包含了体育新闻,WebSocket能够助力你的用户获得实时的更新。 7.多媒体聊天视频会议并不能代替和真人相见,但当你不能在同一个屋子里见到你谈话的对象时,视频会议是个不错的选择。尽管视频会议私有化做的“不错”,但其使用还是很繁琐。我可是开放式网络的粉丝,所以用WebSockets getUserMedia API和HTML5音视频元素明显是个不错的选择。WebRTC的出现顺理成章的成为我刚才概括的组合体,它看起来很有希望,但其缺乏目前浏览器的支持,所以就取消了它成为候选人的资格。 8.基于位置的应用越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的网络应用。如果你一直记录用户的位置(比如运行应用来记录运动轨迹),你可以收集到更加细致化的数据。如果你想实时的更新网络数据仪表盘(可以说是一个监视运动员的教练),HTTP协议显得有些笨拙。借用WebSocket TCP链接可以让数据飞起来。 9.在线教育上学花费越来越贵了,但互联网变得更快和更便宜。在线教育是学习的不错方式,尤其是你可以和老师以及其他同学一起交流。很自然,WebSockets是个不错的选择,可以多媒体聊天、文字聊天以及其它优势如与别人合作一起在公共数字黑板上画画… 转自:http://www.oschina.net/translate/9-killer-uses-for-websockets

龙生   20 Nov 2013
View Details

20 个用于处理页面滚动效果的 jQuery 插件

对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性。如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可供他们使用,有了这些插件,他们可以根据页面滚动的位置做出很多吸引眼球的效果,像背景变换、动画等等。 本文中我收集了20款可以帮你实现很绚效果的Jquery滚动插件。 有了下面的这些jQuery滚动插件,你可以随意的让网站中的任何元素滚动, 使网站变得更加绚丽、吸引眼球。 1. One Page scroll One Page Scroll,一个jQuery插件,简化了类似网站的创建。它需要很少的设置,只需要创建HTML结构,调用函数就可以了。 可选的,easing功能,它的速度和循环行为也可以设置。而且,它已经支持对每个页面SEO友好的URL。 2. Scrolld Scrolld.js是一个jQuery的独特开源插件。Scrolld.js提供了一种完美的高精度的布局方法,且使用实时更新的数据值生成导航。使用Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。Scrolld.js是专门为支持响应式布局而设计的,可以将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用,并能够在几分钟内快速部署。 3. Animate Scroll AnimateScroll 是一个简单的jQuery插件,它用来为滚动增加延迟效果. 可以自定义滚动样式(30多种滚动效果)和滚动速度. 还有一个可以操纵"滚动结束位置"的"padding"选项. 这个插件不局限于整个页面,某个特定的包裹元素也可以作为其目标. 4. JInvertScroll jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它通过onScroll回调函数简化了视察效果的创建,我们可以在onScroll回调函数中为任意元素增加动画效果.该插件很小,只有不到1KB大小,而且几乎不需要任何配置就可以工作. 为某个包裹元素添加一个特定的样式类然后调用一个JS方法就足够了. 5. Smint Smint 是一个帮助开发者在单页面风格的网站中创建导航. 它有两个主要的元素, 一个是不动的导航条,当你向下滚动页面的时候它会停留在页面的顶部,另一个是菜单按钮,当你点击的时候会自动将页面滚动到相应的区域. SMINT插件很简单,所以只有一个控制页面滚动速度的选项. 默认的速度是500毫秒 (半秒钟),但你可以将它设置为任意你喜欢的值. 下载的文件中包含一个demo,所以你可以轻松地将它作为你自己单页面网站的模板. 6. jQuery Arbitrary Anchor Plugin jQuery Arbitrary Anchor Plugin 允许页面滚动到页面中任意的基于jQuery/CSS选择器的对象上. 你可以通过在页面URL的#后面添加一个jQuery/CSS选择器来创建一个有用并且整洁的动态锚点滚动效果. 该插件继承了普通锚点的功能,也就是说,一个拥有名值属性的锚点标签仍然可以被正常地滚动到. 一个具有与锚点相同值的ID属性的元素也具有同样的效果. 这个小小的插件可以被应用到任何元素上.   7. ScrollUp ScrollUp 是一个轻量级的jQuery插件,它用来轻松实现自定义可以在任意网站使用的"滚动到顶部"效果.如果想创建一个可见的线条来帮助确定距离顶端的理想滚动距离,你需要为activeOverlay设置项制定一个有效的CSS颜色.ScrollUp可以通过CSS实现完全可定制,这使得它可以被很容易的应用到你的项目中. 只需要在你的CSS文件中scrollUp生成的ID设置你的样式即可. 它是基于MIT协议发布的. 8. jQuery Stick ‘em jQuery Stick ‘em 可以使内容在滚动的时候固定在某个点上.有时候,我们有一些很高的图片. 所以当你滚动到图片的底部之后,你将不得不滚回到描述你刚才看的图片的文字处. 解决办法就是当你滚动页面的时候把内容固定. 坑爹的是,我们不能仅仅把文字的位置设置为:fixed,一旦滚动到页面底部就玩完了.由于有时候页面上会有很多部分,我们不得不在某个点将内容"取消固定". 那么让我们来解决这个问题,jQuery Stick’em就能够实现该功能. 9. Infinity.js Infinity.js是用于web的表格视图UI库:它能够加速长列表的滚动并且保证你的无限的数据流畅和稳定。它体积小,久经测试而且性能很好。这是Github上最火的代码,并且以BSD协议分发。被注释的源代码作为演示Infinity关闭与开启是可用的。 Infinity.js是Airbnd公司开发的,除了流行许愿列表和朋友订阅部门,现在已经子啊日常的生产中使用。它只依赖于jQuery。 11. Mobiscroll Mobiscroll 是一个为移动设备(Android手机,iPhone,iPad,Galaxy Tab)准备的轮式滚动日期和时间的选择器.它可以被自定义来支持任意自定义的数值,也可以被用作对于本土选择控制的一个直观的替换. 它的样式是可以改变的. 12. Page Scroller Page Scroller 是一个基于JavaScript的强大的流畅滚动导航系统,它使用强大的jQuery库. 该插件可以在任何网站上轻松创建.你可以选择导航菜单的位置,也可以轻松地改变滚动速度.滚动插件需要依赖jQuery1.3以上的版本. 13. WayPoints Waypoints是一个比较小的jQuery框架,通过它可以轻松的在任何滚动元素滚动情况下执行函数。Waypoints可根据用户在页面滚动的位置生成一个比较稳定的流行UI模式。Waypoints遵循MIT和GPL双重协议。 据测试,在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 […]

龙生   05 Nov 2013
View Details
1 45 46 47 60