Archive for 七月, 2009

2009. 07. 31

30非常棒的下拉滚动菜单

    介绍30个http://spyrestudios.com推荐的水平下拉、滚动菜单,这些菜单设计出来的效果基本上很不错,值得研究,但是并没有提供怎么实现,因为做一个下拉菜单对大多数人来说不是难题,关键是创意。
Carreras Con Futuro ↓

Apple Reviews ↓

Archer Group ↓

Energy Cell ↓

Artkasa ↓

Bnet ↓

BuySellAds ↓

Ink’d ↓

Daily RT ↓

Designers Couch ↓

Design Slurp ↓

Behance Network ↓

EctoMachine ↓

Exposition Universelle Des Vins & Spiritueux ↓

Explovent ↓

Hungry For Change – Food Inc. Movie ↓

Fuel Your Creativity ↓

Freelance Switch ↓

Ipix Solutions ↓

Koodoz Design ↓

Monash Carpet Services ↓

Mac Appstorm ↓

Media Temple ↓

Website Temple [...]

2009. 07. 30

jQuery放大镜插件

今天在css-tricks上看到一个基于jQuery实现的放大镜插件,可以实现图片、文本、日历控件元素的局部放大,主要是通过CSS结合jQuery来控制放大效果。不足的是IE6下放大框会有一点小bug,但是这个创意真是相当不错。

 
猛点这里查看DEMO
查看更多的介绍点这里:http://css-tricks.com/anythingzoomer-jquery-plugin/

本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:jQuery放大镜插件| 路可

2009. 07. 29

10个提升网站体验效果的jQuery插件

这面介绍的这些网站都提供了各种效果极佳的jQuery插件,这些插件可以为你的网站添加更富表现力的效果。我将会逐一介绍这些效果的使用说明、相关的主页和下载链接。
AJAX Fancy Captcha
极富创意的验证程序,可通过直接拖放正确的图标到目标位置来达到验证的目的。

Note:根据开发者的介绍,这种验证方式的安全级别仅为中级。
jQuery Cycle –
以前只有在flash才能实现的很酷的图片过度动画,这个强大的插件可以让你自定义缩放、调动的速度。

Cool jQuery Sliding Panel
真的很喜欢这个下拉框下效果。

jQuery Scrollable
一个非常不错、很平滑的滚动插件。

它可以用在:

图片展示
产片介绍
导航
其他你可能想到的用处

还有诸多优点:

轻易实现水平和垂直对齐。
支持按钮、方向键、鼠标滚轮导航,API式调用。
支持自定义效果。
更多的介绍可以去主页看看。

jQuery Filterable Portfolio
强大的文件夹式展示插件。

你从上面的分类tab项中选择,就可以看到效果。
Animated Portfolio
同样不错的展示效果,不过该网站的带宽目前用尽了无法访问(8月1号之后即可访问),可想而知流量多大。
Password Strength Meter

密码强度显示器。
图片可更换。
jQuery Slide-In Tab
跟上面两个类似,内tab水平切换的插件。

JQuery Dashboard
类似mac机上的效果。

Smooth Tabbed Menu
相当平滑的tab效果。

jQuery Tetris
jQuery俄罗斯方块。

本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:10个jQuery提升你网站档次| 路可

2009. 07. 26

30个极尽简约的网站

web应用类

1. DownForEveryoneOrJustMe
这个网站可以帮你检查某个网站是否挂了。

2. DingItsUp
然后这个网站会在某个网站跑起来后发邮件通知你。

3. IndexedByGoogle
检查网站是否已经被google收录。

4. Fizy
歌曲和MV的搜索引擎,可以把它当做你的在线音乐盒,然后通过wtitter、Facebook等等和他人分享。

5. SimpleCountryCodes
查询国家号码。我至今没想到有什么用。

6. ThyNews
搜索新闻和博客然后把内容添加到自定义主页。

7. Tasck
为你显示一个任务列表。很有意思。

8. QuieTube
让你静静地享受youtube。

9. Postcard.fm
发送音频明信片。

10. CopyPasteCharacter
在线特殊符号集。

在线文件夹

11. CraigWilson
Craig Wilson的在线文件夹。

12. ethicka
 William Donahoe。

13. hakki
 Hakki Yemeniciler。

14. joelirw
Joel Irwin。

15. johnstewartsutherland
John S. Sutherland

16. jonwardweb
Jon Ward

17. keeno
Kenno

18. LoveBlank
Francesco Prosperi

19. Pomade
纽约的一个设计室。

20. Yalamber
Yalamber Subba

只有一个答案的网站

21. is Twitter down?
告诉你Twitter 是不是挂了。

22. is IsTwitterDown down?
告诉你上面那个网站是不是挂了。

23. is it Christmas?
今天是不是圣诞节。

24. is it a leap year?
今年是不是闰年。

25. is Obama president?
奥巴马是不是总统?

各种其他

26. D-E-F-I-N-I-T-E-L-Y
这个网站坚持要告诉你那个单词该怎么拼。

27. DocaPet
eCommerce 也可以这么简单。

28. TelescopicText
非常个性。

29. RandomBuddha
Random Buddha quotes

30. [...]

2009. 07. 23

12个非常不错的在线工具

设计网页的工作相当的繁杂,常常为了达到更好的效果需要各种设计元素,现在有很多网页在线工具可以帮我们完成这些工作。
部分站点访问不到,翻墙即可,原文:http://cssorgy.com/12-great-online-generators-1907。
1. Favicon.cc
在线制作ico图标网站,可以上传图片制作业,也可以利用网站提供的默认图片。
2. Pattern Cooler
制作带漂亮的花纹的背景图片,选择样式后马上可以看到效果。

3. Tartan Maker
又一个背景图片制作站。

4. BgPatterns
还是背景图片制作站,极好的支持自定义背景图片。

5. StripeMania
最后一个背景图片制作站,但并非最好的,带花纹、支持自定义的背景。
6. Color Palette Generator
在线调色板。

7. Color Palette Generator
另一个在线调色版,比上一个美观一点。

8. Rounded Cornr
帮你生成圆角的框的html代码。

9. Ajax Loading generator
loading icon制作,猛点这次http://jsssc.cn/seven-ajax-loading-icon-generator/查看更多的loading icon制作站

10. CSS Menu Generator
css菜单生成器。

11. CSS Tab designer
css Tab生成器。

12. Web Form Factory
在线表单制作器。

本文链接:http://jsssc.cn/12-great-online-generators
本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
   转载自:12个非常不错的在线工具| 路可

2009. 07. 17

11个创意jQuery画廊插件

由kulando.de整理的jQuery图片切换效果插件,可惜有几个网站已经被墙。
可以翻墙的同学可以去看看,都是很不错的插件。
德文原文地址:http://webstandard.kulando.de/post/2009/07/16/creative-image-galleries-by-jquery
FullScreen Image-Gallery

SupersizedGallery

ImageRotator

Galleria

Content-Gallery

Galleriffic

EasySlider
看中文介绍的猛点此处:http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/

ImageScroller

Slider

ImagesSwitch

 
PanoramaView

 
本文地址:http://jsssc.cn/creative-image-galleries-by-jquery
本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:有创意的jQuery画廊插件| 路可

2009. 07. 15

9个小有意思的jQuery插件

Fullsize | Demo

Fullsize的一个目的是下一个HTML标准中fullsize能够成为<IMG >标签的一个属性,它的作用是在图片上提供可以查看图片原始大小的按钮。
Airport – Information Board Text Effect | Demo

Airport是很简单的一个文字效果插件,模仿飞机场或者火车站公告牌显示站点文字效果,跳动显示。
jScrollPane | Demo

jScrollPane 帮你替换浏览器默认的滚动条效果,可以轻松地更换你想要的样式。

jTip | Demo

jTip 把通过AJAX读取的内容放到提示框中,在链接上加一个class“jTip”,你就用这个链接地址获取的内容来做提示框。
TabSorter | Demo

tablesorter可以将包含THEAD、TBODY 标签的表格编程可动态排序。
FCBKcomplete | Demo

Fancy提供自动提示输入,并在输入框显示多个输入结果,类似facebook的风格。
MopTip | Demo

MopTip 很漂亮的提示框插件。
MopBox | Demo

MopBox可拖动的弹出框效果插件,支持div内容, 图片, flash, 视频等等,如果有不只一项内容,会自动显示导航条。
MopSlider | Demo

MopSlider滚动展示框,可自定义高度、宽度,一个页面可显示多个滚动框。
本文链接:http://jsssc.cn/9-rare-and-cool-jquery-plugins

本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:9个小有意思的jQuery插件| 路可

2009. 07. 10

用jQuery实现各种CSS3效果

    css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。
   在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。
1.多重背景

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}
2.文字阴影
b { text-shadow:  5px 5px 5px #666666; }
3.圆角
#rounded-corners-box {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-rightright-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-rightright-radius: 8px;
}
 4.透明效果
.div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }
 下面来看看jQuery插件实现css3效果的插件:
jQuery Corners 0.3
轻松地实现漂亮的圆角,无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。

 jQuery Canvas Rounded Corners
通过canvas 实现圆角的jQuery插件,支持IE7、FF。

How To  Border Image with CSS3 and jQuery
CSS3 draft [...]

2009. 07. 9

9个javascript语法高亮插件

语法高亮效果使用非常频繁,特别是在博客里展示各种代码的时候,可以让代码更易读。我们身边就有很多语法高亮的插件,其中大部分是用javascript写的,也有一些是通过server端语言实现(比如Phyton或Ruby)。
下面介绍的是一些纯javascript实现的语法高亮插件。
英文原文:http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/
1. SyntaxHighlighter
我相信这个插件是我们使用多的,它支持超多的语言,如果遇到不支持的语法还支持自定义。
2. SHJS
SHJS 是js语法高亮插件的代表,它支持很多编程语言,兼容Firefox 2 &3, IE 6 & 7, Opera 9.6, Safari 3.2 &Chrome 1.0。

3. beautyOfCode
beautyOfCode 是一个基于jQuery的语法高亮插件,使用了Alex Gorbatchev的语法高亮脚本使它更贴近 XHTML标准。

4. Chili
Chili is也是基于jQuery的语法高亮插件,支持很多语言并且带很多可配置项。
5. Lighter.js
Lighter.js是基于MooTools的免费语法高亮插件, 简单易用。

6. Highlight.js
highlight.js 同样是简单易用,支持多数语言,它有很多可以跟CMS、论坛和博客整合的插件。
7. DlHighlight
DlHighlight是一款比较简单的高亮插件,仅支持JavaScript, CSS, XML, HTML。
8. Google Code Prettify
Google Code Prettify是谷歌出品的语法高亮插件,可以高亮html页面中的部分代码片段。
9. JUSH
JUSH是另外一个 jQuery语法高亮插件 ,支持HTML, CSS, PHP, PY 和 SQL。

本文链接:http://jsssc.cn/9-useful-javascript-syntax-highlighting-scripts/
本站所有文章,除特别标明外,皆为原创。如需转载,请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:9个javascript语法高亮插件| 路可

2009. 07. 7

12个网站可访问性检测工具

    你设计网站的最重要目标之一就是让网站可以吸引尽可能那多的访客,但是你了解过你网站真正的可访问性(亦称无障碍性)了吗?色盲访客能是否能正常访问?网页上的所有脚本是否能正常运转?你的颜色可能总体上看来不错,但是对比色的差异能否足够以保证网页的易读性?下面这12个工具正好是设计来回答这些文的,可以肯定的是如果你正在考虑网站可访问性这件事情的时候,这些工具都值得你经常使用,虽然他们可能每次都给你同样的答案。
忠告:尽管这些工具都很有用而且可以帮你辨别出很多问题,你永远不能太迷信他们给出的所有建议,更多的是把它们当做开始步入能够建立流畅运行的网站道路的起点。
由Sean P Aune发表于http://www.sitepoint.com/blogs/2009/07/06/site-accessibility-tools/
ACTF aDesigner: 开源Eclipse 开发平台的一个扩展, 它专为视障人士测试可访问性。不过它仅适用于Windows XP及以上版本系统。
Adobe Dreamweaver CS4 accessibility:供使用Adobe’s Dreamweaver CS4的设计师使用, 通过工具授权你就可以选择任何你想测试的,并且可以获得一份错误检测报告。

Contrast Analyser: 为网站选择合适的颜色是一件不简单的事,而且你还必须确保这些颜色搭配得当以确保美观易读。Colour Contrast Analyser让你能区别两种颜色的不同,还可以设置出方便有视觉障碍的访客(比如色盲)易读的网站。  
Cynthia Says: Cynthia Says 是HiSoftware的一个产品,只要输入你的网址你就可以获取一份通过按照 Section 508 和WCAG(Web Content Accessibility Guidelines W3C的网页内容可访问性指引)-Priority 1, 2 and 3标准检测的网站报告。
Firefox Accessibility Extension: 来自iCITA  ,这个Firefox的工具栏包括一个大型一套工具来检测那些视觉障碍者访问时网站的外观,也包括了文字,脚本,样式等等的测试。

 
Functional Accessibility Evaluator:  为你提供网站诸多方面的无障碍评估报告,然后为您提供了一种颜色编码结果页的一个你必须去了解的概述,。 如果您想了解更多信息只需点击的每个类别查看详细的说明。

Fujitsu Web Accessibility Inspector: 它检查的重点是检可能会出现老人和视觉障碍者的网页,你必须下载才能使用,可用于MAX OS X或Windows ,然后你可以点到本地文件或一个网站,它就会生成一个报告,似乎是挺很长的,好含了各方面检测结果的报告文件。 
IBM’s Rational Policy Tester Accessibility Edition: Windows上检测网站可访问性的唯一的解决方案。这是一个付费解决方案,IBM的产品应该不会便宜到那里去。

Truwex [...]