欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  资讯频道

70个新鲜实用的JavaScript和Ajax技术(上)

程序员文章站 2022-05-17 11:08:51
...

随着互联网的不断发展,网页的制作也充满了活力,开发者使用各种各样的技术使网页变得更加丰富,我们将为你推荐70个新鲜实用的JavaScript和Ajax技术。

 

1. 日历与时间:实例和演示

 

“可拖曳的,可选择的,更佳的日历”,点击查看演示:here
70个新鲜实用的JavaScript和Ajax技术(上)

 

  类似于iPhone的日历程序,鼠标触碰时显示事件的描述。
70个新鲜实用的JavaScript和Ajax技术(上)

 

这个元素可以让您使用简单的滑动条选择日期。
70个新鲜实用的JavaScript和Ajax技术(上)

 

设定一个明智的每周时间表,提醒你每天需要做的事情
70个新鲜实用的JavaScript和Ajax技术(上)


这个unobtrusive datePicker可以使用键盘,不需要嵌入JavaScript的模块,不使用弹出式窗口。
70个新鲜实用的JavaScript和Ajax技术(上)
 

它是一个日期选择空间,支持多种日期格式,可以通过CSS自定义外观,让一星期中的某些天失效,让预约的日期加亮显示
70个新鲜实用的JavaScript和Ajax技术(上)
 

2.导航的实例和演示

如何使用script.aculo.us 创建一个自动滚动的页面导航。
70个新鲜实用的JavaScript和Ajax技术(上)

本指南将告诉你,如何使“按类别过滤”变的更有缺,只需要使用一点jQuery。
70个新鲜实用的JavaScript和Ajax技术(上)
 

了解如何使用MooTools JavaScript框架,创建一个灵活的工具,突出你网站的产品和服务。
70个新鲜实用的JavaScript和Ajax技术(上)

一个Accordion小工具,InfoPanel使用Ext JS Library。它可以用于网页导航,工具窗口,隐藏详细信息,log-in forms,选择对话,即使提示等…
70个新鲜实用的JavaScript和Ajax技术(上)

ListNav,是一个jQuery插件,它提供一种简单的方法 用来创建基于字母的导航。创建后,可以使用CSS来进行样式定义,放置到列表上方,显示字母A到Z在列表的上方,点击某个字母后,则过滤显示以该字母开头的条目。这个插件比较适合用来优化那种比较长的列表,支持UL或OL列表。
70个新鲜实用的JavaScript和Ajax技术(上)

3.Tool Tip实例和演示

jQuery主页的tool tip效果很漂亮,这里我们将告诉你如何使用MooTools来创造相同的效果。
70个新鲜实用的JavaScript和Ajax技术(上)

可以让你轻松的建立即简单又复杂的tool tips,基于Prototype JavaScript框架。你可以轻松的进行自定义,控制tool tip的位置并获取配置的圆角。与Scriptaculous搭配使用,还可为其加入些漂亮的动画效果。
70个新鲜实用的JavaScript和Ajax技术(上)

一个轻巧(只有3.4Kb便携)jQuery插件创造好的提示 。它允许你轻松创建工具提示的任何内容网页上使用的力量, jQuery的选择器和事件管理。 该工具提示可以静态,动态,甚至通过加载的AJAX与多种不同的视觉效果。

 

当你的鼠标放在一个可下载的图片上时,如何重新创造出puff popup bubble,如下图所示。
70个新鲜实用的JavaScript和Ajax技术(上)

4.Menu:实例和演示

漂亮的jQuery菜单,使用平滑动态的效果。
70个新鲜实用的JavaScript和Ajax技术(上)

点按钮后其他按钮变暗
70个新鲜实用的JavaScript和Ajax技术(上)

用来显示上下文菜单(响应鼠标右键)的插件
70个新鲜实用的JavaScript和Ajax技术(上)
 

它是script.aculo.us的扩展,用于生成Ajax下拉Tab菜单。可以将菜单平稳的展开与收缩。
70个新鲜实用的JavaScript和Ajax技术(上)

5.Slider:实例和演示

这个MooTools的滑块有两个旋钮(最大值和最小值旋钮),有刻度值
70个新鲜实用的JavaScript和Ajax技术(上)

70个新鲜实用的JavaScript和Ajax技术(上)
 

有一个简单的教程,使用MooTools,一步一步的教您实现超多功能的滑块和水平滚动的动画效果。
70个新鲜实用的JavaScript和Ajax技术(上)
 

一个小脚本,可以将页码数字变得更美观。
70个新鲜实用的JavaScript和Ajax技术(上)


6.幻灯片:实例和演示

noobSlide是一款基于mootools的幻灯片画廊脚本, 包含七种不同风格的幻灯片展示特效,运行流畅。
70个新鲜实用的JavaScript和Ajax技术(上)

Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。
70个新鲜实用的JavaScript和Ajax技术(上)
 


Supersized 是一个jQuery插件 ,可以自动调整背景图像的大小在浏览器窗口并运行它们作为一个幻灯片 ,没有额外的空白,没有滚动条-整个浏览器窗口总是填补。
70个新鲜实用的JavaScript和Ajax技术(上)

这个轻量级的JavaScript动画幻灯片脚本 包含一系列很酷的功能来样式化你的内容: 描述支持,链接支持,没有命名限制,肖像图片支持,缩略图状态等等。
70个新鲜实用的JavaScript和Ajax技术(上)

一个带按钮的jQuery滑块,可更换模板或调整面板的大小。
70个新鲜实用的JavaScript和Ajax技术(上)

 

可快速的浏览项目,可以纵向,横向或分组。
70个新鲜实用的JavaScript和Ajax技术(上)
 

7.图像裁剪:实例和演示

UvumiTools是一个功能强大的图片剪裁控件,基于Mootools框架开发。可以配置图片剪裁最小尺寸,保持剪裁区域长宽比例,实时预览剪裁图片等功能。
70个新鲜实用的JavaScript和Ajax技术(上)

图像实时旋转和缩放

70个新鲜实用的JavaScript和Ajax技术(上)

Jcrop是一个跨浏览器的jQuery图片剪切插件(jQuery image crop plugin)。支持对剪切框加CSS样式,当选取或拖动时添加回调事件(Callbacks),剪切时能够约束宽度与高度。
70个新鲜实用的JavaScript和Ajax技术(上)

 

未完待续……