Javascript | 帕兰映像

open links in new window 主机合租每年最低50元/博客新手特惠套餐: 每年98元拥有你的独立博客

July 20th, 2008 by paran

10个Javascript/JS图片特效

下面是10个可以实现图片特效的JS脚本, 通过这些Javascript图片特效, 可以实现一些非常漂亮的图片特效功能, 比如JS圆角效果, JS阴影效果, JS倒影或是说JS倒映, 放大镜效果, 菲林, 相框等等.
先让我们来看一下这些JS图片特效的安装使用方法：

将下载的JS行效压缩包解压之后上传到网站空间，然后在需要显示效果的head里添加代码，比如JS高光阴影效果Glossy，添加的代码是：
<script type=”text/javascript” src=”glossy.js”></script>
对于Wordpress，可以在header.php里添加。如果只要求文章页里出现效果，也可以考虑在single.php里添加
然后，在想要显示特效的图片的<img>标记里添加：
class=”glossy”

1、高光圆角阴影

这个Javadcript 特效可以用来做图片按钮。
js下载链接
你也可以看一下帕兰之前介绍的一些在线制作圆角效果的站点服务和其它圆角脚本:

roundpic: 在线转换为圆角图片的工具
2款Facebook风格的透明圆角边框模型盒特效(Modal Box)脚本
curvyCorners:让任何DIV层实现圆角效果(不需要图片)

繁體 English 还没有留言 -_-查看全文

分类: Google

May 29th, 2008 by paran

Google的Ajax Libraries API

我个人很少在网页中使用Javascript，怕影响网页载入速度．就算偶尔要用，也绝不使用基于JS框架的脚本．相信也有一部分的站长有这样的问题，Google似乎试图来解决这个问题，让大家在使用Javascript框架的能够更架快速和简单，Google最新提供了一个名为 Ajax Libraries API的东西．
其实Ajax Libraries API的理念很简单：把Javascript运行在Google的服务器上面, 通过Google快速分发服务器, 当有需要的时候进行Gzip压缩, 更重要的是，使用缓存机制来改善多人同时加载的情况.
Ajax Libraries API目前所支持的Javascript框架包括：

繁體 English 4 条留言了 ^_^查看全文

分类: Javascript

May 29th, 2008 by paran

1KB的横向滑动菜单脚本

滑动菜单效果是非常酷的，但很多时候，我们不希望为了酷使用大量脚本，影响到网页的载入速度．现在，如果你想弄一个滑动菜单，那你不用担心这个问题了，Leigeber创建了一个1KB的横向滑动菜单脚本．
别看它小，丝毫不逊色于那些使用jQuery或Mootools框架的滑动菜单脚本，这是一个多用途且独立的横向手风琴脚本，可用于菜单，图片，演示文稿的内容和更多你想使用的地方．它的一个更大的特点是，该脚本可以根据菜单的元素个数来自动调整适应菜单的尺寸。

繁體 English 2 条留言了 ^_^查看全文

分类: Javascript

May 20th, 2008 by paran

基于jQuery仿iPod的明细导航菜单

Scott和Maggie 为我们带来了一个仿iPoad明细导航菜单的特效脚本, 基于 jQuery创建, 这个脚本能够让你生成简便或复和多层次的菜单。

菜单拥有一个固定大小的面积，当一个节点被选中， breadcrumb连结会出现菜单选项，并允许快速访问回到父级节点. 菜单拥有一个iPod式的幻灯片过渡. 当你需要创建浏览深层嵌套层次，尤其是那些超过三个层次深度的菜单, 这个脚本将极其有用。它提供了一个更可用的替代多层次，飞旋出来的菜单.

繁體 English 1条留言了 >_<;查看全文

分类: Javascript

May 15th, 2008 by paran

30个 Ajax/Javscript 滑动门, 滚动栏和滚动条技术

Ajax最主要是为了达到良好的互动效果, 其中滑动和滚动技术的应用是一个重要的设计领域. 在一个有限的空间内, 通过导航或滚动操作查看到全部要展示的内容, 同时, 还要让用户产生觉得操作方便与友好. 下面, 我们收集了30个利用Ajax/Javscript实现的滑动门特效, 滚动栏技术, 滚动条等等滑来滚去的应用示例.
你也可以查看之前发表的一些相关的Ajax和Javascript应用的文章:

30个精挑细致的Ajax和Javascript 技巧
30多个CSS和JS下拉菜单资源
37个Ajax和CSS实现的Tab选项卡切换效果界面
40多个Ajax,DHTML和Javascript应用技术

滑动技术
1) Slider- 垂直或水平的滑块.

Live Demo
Download from Here

2) 简单的图片滑动控制幻灯片展示-一步一步的教你如何创建一个可以利用滑块控制的幻灯片展示.

繁體 English 7 条留言了 ^_^查看全文

分类: Javascript

May 14th, 2008 by paran

30个精挑细致的Ajax和Javascript 技巧

在这篇文章里面, 我们列出了30个精挑细致的Ajax 和 javascript 技巧. 你可以用它们在你的下一次设计中达到一些视觉特效, 最棒的是, 这份名单里面收集的都是一些新鲜的Ajax和Javascript技朽, 在学习技巧的同时, 你也可以掌握一些最新的科技资讯.
下面的这些示例分别使用了jQuery, Mootools, Prototype 和 script.aculo.us , 每个示例也都有相应的DEMO演示.在浏览它们之前, 你也可以回顾一下帕兰之前发表的一些相关文章:

51+最佳jQuery教程和示例
37个更加出色的jQuery插件
45个新鲜出炉的jQuery插件
50多个强大的jQuery插件应用实例

1) Growl 2.0 with Mootools- Daniel Mota使用 Mootools创建了Growl 2.0 , 让我们可以轻松的集成我们的Web应用程序.

繁體 English 5 条留言了 ^_^查看全文

分类: CSS, Javascript

April 20th, 2008 by paran

30多个CSS和JS下拉菜单资源

导航菜单是网站设计中最重要的因素之一。网络开发人员可以使用CSS创建方便用户的横向或纵向导航菜单, 而JavaScript则使人们有可能创造更多的互动，更多的响应和更灵活的导航到任何网站。Noupe在这篇文章里面提出了25个以上（横向和纵向）多层次的下拉菜单，包括使用了JavaScript和CSS ，你可以将这些示例和教程用你的未来网站设计计划。帕兰照常为你翻译, 你也可以查看帕兰映像之前发表的一些关于菜单应用的文章:

IzzyMenu: 在线创建DHTML/CSS菜单
9款CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件
50多套CSS导航菜单免费资源
ADxMenu:基于Javascript和CSS的下拉菜单
Flickr的横向下拉菜单效果实现教程
Likno AllWebMenus™:强大的导航菜单生成软件
创建Wordpress主题的悬浮菜单
60多个网页导航菜单设计实例欣赏

横向和纵向的下拉菜单
1) Drop Down Tabs (5 styles)- Drop Down Tabs是一个横向的CSS 选项卡菜单, 每个选项卡都支持二级下拉菜单.

2) Professional Dropdown

3) Multi-level effect menu- 这是一个高度可配置的 javascript/css下拉菜单, 可以让你轻松生成多级层联的横向或纵向下拉菜单.

30多个CSS和JS下拉菜单资源/帕兰映像
4) FastFind Menu- 一个基于 jQuery的菜单, AJAX的响应效果, 这个菜单可以进行拖拽操作.

5) jQuery SuckerFish

6) Fancy Sliding Tab Menu using script.aculo.us

7) List Based Menu with Images- 使用<UL><LI>元素生成的菜单, 它使用简单, [...]

繁體 English 3 条留言了 ^_^查看全文

分类: Javascript

April 16th, 2008 by paran

JS-Kit:小小脚本让你的站点全面社会化

什么是社会化网站? 就是具有社会化功能的网站.
什么是社会化功能? 留言, 评论, 评级, 投票,等等. 总之, 就是为网站的访客提供一个良好的在线互动体验, 让访客在你的网站里面, 点完这个还想点那个, 点完那个再点那那个, 死赖着不肯走.

这有一个非常强大且非常小巧的脚本, 它叫JS-KIT.可以让你实现轻松实现上述的这些社会化功能. 即使你是一个蠢货, 它只需要你复制粘贴所提供给你的代码到网页的相应位置即可. 甚至不需要你下载存储这个JS脚本. 所以说, 它真的很小巧. 并且, 结合它所提供的留言, 评论, 评级, 投票等脚本后, 你还可以再使用他们的导航脚本, 实现热门投票, 热门评论, 热门留言之类的列表.
很棒, 不是吗? 如果你正在寻找类似功能的脚本. 强烈推荐JS-KIT.

繁體 English 1条留言了 >_<;查看全文

分类: Javascript

April 14th, 2008 by paran

仿网上银行虚拟键盘脚本- keyboard.js

虚拟键盘接口，通常用于网站最高级别的安全性, 比如网上银行的申请和登录。因为虚拟键盘能够帮助我们防止任何键盘记录活动, 或者为用户提供一个特殊键盘，因为的系统是并不拥有某种语言的键盘输入 .

这里有一个Javascript脚本, 就是用来实现这种虚拟键盘的效果. 要使用它, 非常的简单 ,你只需要用下面用类似下面的代码在你的<head>头部调用:
<script type=”text/javascript” src=”keyboard.js” charset=”UTF-8″></script>
<link rel=”stylesheet” type=”text/css” href=”keyboard.css”>
然后,在你想使用虚拟键盘的input输入框里面加入一个class属性, 例:
<input class=”keyboardInput” type=”text” />
要下载和查看具体应用, 请进入该脚本网址

繁體 English 还没有留言 -_-查看全文

分类: Javascript

April 10th, 2008 by paran

37个更加出色的jQuery插件

作为开发人员来说，永远不会停止创建更加好用的Web交互应用脚本或程序，随着jQuery的流行，基于jQuery框架开发的插件几乎是数不胜数．关于jQuery插件，帕兰之前已经发过两篇文章介绍过很多强大的插件:

45个新鲜出炉的jQuery插件
50多个强大的jQuery插件应用实例

但开发之路是永远不会停止的，Noupe又为我们收集整理了近期出现的37个出色的jQuery插件，帕兰映像翻译．
jQuery滑动门
1) Slider Gallery- 这是一个模仿Apple网站的jQuery滑动门产品展示．这个‘产品展示滑动门’就是一个直线前进的画廊，在有限的空间里面显示产品图片，支持Tab标签的滑动和前进后退按钮的滑动．

Live Demo: Here

2) Accessible slider- Illustrations和代码显示如何最简单的制作一个滑动门UI控制条，而不需要任何Javascript或CSS知识．

Live Demo: Here

jQuery图像处理
3) crop, labelOver and pluck-这个jQuery脚本可以让你的访客控制图像，实现截剪图片等操作．

Live Demo Of Crop: Here
Live Demo of LabelOver: Here

4) Semitransparent rollovers -一个简单的脚本，让图像实现半透明效果

Live Demo Of Crop: Here

5) Creating A Sliding Image Puzzle Plug-In- 创建出一个基于总容器的拼图效果，非常的特别．

Live Demo: Here

jQuery 导航菜单
6) Digg Header- 这是一个仿Digg的导航菜单，宽度可变，下拉菜单，精美的搜索框,简单的颜色更改，总之是有很多可取之处，很强大的一个导航菜单．

Live Demo: Here
Download Code: From Here

7) IconDock- [...]

繁體 English 7 条留言了 ^_^查看全文

分类: Javascript

April 5th, 2008 by paran

Growl: 淡入淡出效果的提示信息脚本

Growl是一个非常小巧的JavaScript脚本，基于mootools，它可以让你创建有点类似于Lightbox的特效, 但不是用于图片展示，而是淡入淡出的提示信息效果。也就是说提示信息本身是隐藏的，点击相应的链接时，弹出含特效的提示信息，主要包括两种效果: Smoke (弹出然后缓慢褪色退出)和Bezel (弹出然后褪色滑落)。你可以通过这里查看演示和下载Growl。

繁體 English 还没有留言 -_-查看全文