阅读更多

83顶
2踩

Web前端

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

 

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

 

“可拖曳的,可选择的,更佳的日历”,点击查看演示:here

 

  类似于iPhone的日历程序,鼠标触碰时显示事件的描述。

 

这个元素可以让您使用简单的滑动条选择日期。

 

设定一个明智的每周时间表,提醒你每天需要做的事情


这个unobtrusive datePicker可以使用键盘,不需要嵌入JavaScript的模块,不使用弹出式窗口。

 

它是一个日期选择空间,支持多种日期格式,可以通过CSS自定义外观,让一星期中的某些天失效,让预约的日期加亮显示

 

2.导航的实例和演示

如何使用script.aculo.us 创建一个自动滚动的页面导航。

本指南将告诉你,如何使“按类别过滤”变的更有缺,只需要使用一点jQuery。

 

了解如何使用MooTools JavaScript框架,创建一个灵活的工具,突出你网站的产品和服务。

一个Accordion小工具,InfoPanel使用Ext JS Library。它可以用于网页导航,工具窗口,隐藏详细信息,log-in forms,选择对话,即使提示等…

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

3.Tool Tip实例和演示

jQuery主页的tool tip效果很漂亮,这里我们将告诉你如何使用MooTools来创造相同的效果。

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

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

 

当你的鼠标放在一个可下载的图片上时,如何重新创造出puff popup bubble,如下图所示。

4.Menu:实例和演示

漂亮的jQuery菜单,使用平滑动态的效果。

点按钮后其他按钮变暗

用来显示上下文菜单(响应鼠标右键)的插件

 

它是script.aculo.us的扩展,用于生成Ajax下拉Tab菜单。可以将菜单平稳的展开与收缩。

5.Slider:实例和演示

这个MooTools的滑块有两个旋钮(最大值和最小值旋钮),有刻度值


 

有一个简单的教程,使用MooTools,一步一步的教您实现超多功能的滑块和水平滚动的动画效果。

 

一个小脚本,可以将页码数字变得更美观。


6.幻灯片:实例和演示

noobSlide是一款基于mootools的幻灯片画廊脚本, 包含七种不同风格的幻灯片展示特效,运行流畅。

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

 


Supersized 是一个jQuery插件 ,可以自动调整背景图像的大小在浏览器窗口并运行它们作为一个幻灯片 ,没有额外的空白,没有滚动条-整个浏览器窗口总是填补。

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

一个带按钮的jQuery滑块,可更换模板或调整面板的大小。

 

可快速的浏览项目,可以纵向,横向或分组。

 

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

UvumiTools是一个功能强大的图片剪裁控件,基于Mootools框架开发。可以配置图片剪裁最小尺寸,保持剪裁区域长宽比例,实时预览剪裁图片等功能。

图像实时旋转和缩放

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

 

未完待续……

 

  • 大小: 31.7 KB
  • 大小: 18.5 KB
  • 大小: 12.7 KB
  • 大小: 15.1 KB
  • 大小: 32.7 KB
  • 大小: 26 KB
  • 大小: 14.4 KB
  • 大小: 10.2 KB
  • 大小: 20.6 KB
  • 大小: 46.4 KB
  • 大小: 20.4 KB
  • 大小: 30.2 KB
  • 大小: 27 KB
  • 大小: 14.2 KB
  • 大小: 8.6 KB
  • 大小: 16 KB
  • 大小: 16 KB
  • 大小: 19.8 KB
  • 大小: 11.6 KB
  • 大小: 17.5 KB
  • 大小: 7 KB
  • 大小: 8.6 KB
  • 大小: 39.1 KB
  • 大小: 18.7 KB
  • 大小: 17.5 KB
  • 大小: 28.5 KB
  • 大小: 25.3 KB
  • 大小: 18.9 KB
  • 大小: 28.1 KB
  • 大小: 26.5 KB
  • 大小: 21 KB
来自: smashingmagazin
83
2
评论 共 26 条 请登录后发表评论
6 楼 javagui 2009-03-17 08:56
不错,用swing达到这类效果都要先精心设计一下,JS的进步真是今非昔比了。
5 楼 tkl211 2009-03-17 08:38
谢谢分享!!!
4 楼 langhua9527 2009-03-17 00:14
收藏了。。。
3 楼 flyfan 2009-03-16 22:54
真佩服这些牛人呀
2 楼 wise007 2009-03-16 22:44
这效果做得真是牛啊
1 楼 brofe 2009-03-16 19:46
很实用, 收藏了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Win7、Win8开始菜单完美屏蔽

    在Win7和Win8下完美屏蔽开始菜单按钮

  • 屏蔽WIN键盘键

    一,我们完全可以通过注册表来屏蔽的 二、点击开始—运行——输入regedit.exe,然后确定,调出注册表编辑器  三、,在注册表编辑器左侧的树形目录中,找到如下位置:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout 四、将目录保持在Keyboard Layout,然后在右边的窗口进行操作 五、在右侧的窗

  • win api 隐藏任务栏和开始按钮/屏蔽系统组合按键

    if(checked) { //隐藏任务栏 HWND hWnd = ::FindWindow(TEXT("Shell_traywnd"),TEXT("")); ::SetWindowPos(hWnd,0,0,0,0,0,SWP_HIDEWINDOW); // 获取开始按钮句柄,并显示 HWND hWnd2...

  • 如何屏蔽开始菜单

    如何屏蔽开始菜单 在注册表的“HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer”子键下通过建立新的项及设置不同的键值可以禁用“我的电脑”中的驱动器,禁用“查找”、“运行”等功能,其实在这个子键下还可以通过新建其它一些键值来禁用更多的功能,下面将部分禁用的项目简介如下,供有兴趣的朋友参考。  1

  • 隐藏、显示、禁止、允许 开始按钮

    程序功能:隐藏、显示、禁止、允许 开始按钮能使编程变得更具趣味性,比起单纯说教那好多了;******************************************************************************.386.model flat,stdcalloption casemap:none;***********************

  • 屏蔽关闭按钮

    屏蔽关闭按钮 源代码

  • 屏蔽部分按键

    一 介绍 在某些购物网站上进行提交商品表单时,通常情况下不允许用户刷新屏幕、后退或新建文档,否则可能造成不可估计的损失。 为避免这种情况出现,可以通过屏蔽键盘的回车键、退格键、<F5>键、<Ctrl+N>组合键和<Shift+F10>组合键来实现。 本示例主要应用JavaScript脚本中的event对象的相关属性实现。 其中KeyCode属性表示按下...

  • javascript按钮禁用和启用的效果

    按钮启用和禁用 function btn1() { document.getElementById("btn1").disabled=true; document.getElementById("btn1").innerHTML="禁用按钮1"; document.getElementById("btn2").disabled=false; document.getElementById

  • js禁用按钮及解除禁用

    html中用disabled属性来控制按钮的可用以及禁用。 //两种方法给id为buttonSelect的按钮设置disabled属性 $('#buttonSelect').attr("disabled",true); $('#buttonSelect').attr("disabled",disabled); //三种方法移除id为buttonSelect的按钮的disab

  • h5 video标签屏蔽下载按钮和取消右键菜单

    取消下载按钮 video 标签中添加controlslist="nodownload"(video完成渲染之前) <video src="" controls="controls" controlslist="nodownload"></video> 取消右键菜单 <script> $("video").bi

  • 隐藏开始按钮

    以下代码在模块中Option ExplicitPublic Declare Function SetWindowPos Lib "user32" (ByVal hwnd As Long, ByVal hWndInsertAfter As Long, ByVal x As Long, ByVal y As Long, ByVal cx As Long, ByVal cy As Long, ByVal

  • 微信开发如何屏蔽投诉按钮(附代码)

    代码如下: <script type="text/javascript"> var wx= (function(){ return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })(); if(wx){ if...

  • 怎样屏蔽掉开始按钮? (转)

    怎样屏蔽掉开始按钮? (转)[@more@]procedure TForm1.Button1Click(Sender: Tobject); begin {Disable the start button} EnableWindo...

Global site tag (gtag.js) - Google Analytics