16个SNS网站常用JS组件

1. Facebook jQuery聊天框。

Facebook本身有一个不错的IM软件，这个组件教你怎么模仿faceback的样式实现一个在线聊天框。

Demo    Download
2. 仿Twitter Ajax搜索
帮你建立以个仿Twitter风格的搜索引擎效果。

Demo  Download

3. 仿Facebook Mootools模态弹出框

Facebook中到处可以的模态弹出框组件。

Demo Download
4. 仿Facebook jQuery模态弹出框

同上，不过是jQuery实现。

Demo Download

5. Twitter jQuery下拉注册框

Twitter 的下拉注册框组件。

Demo  Download
6. dZone 投票系统

实现类似dZone 投票系统的组件。

Demo  Download
7. Facebook Prototype输入框

Facebook的输入框设计非常不错，这个教程教你如何实现类似效果。

Demo Download
8. Digg   jQuery “Share” 提示框

这个是Digg上每篇文章后面都有的一个分享提示框，这个教程教你如何实现一个类似效果的组件。

Demo Download
9. Facebook Auto Complete

Facebook的自动提示输入组件。

Download
10. Twitter Load “More” Widget With Mootools

这是另外一个Twitter的ajax应用，在点击“more”链接的时候会载入更多的内容，这个教程教你如何用Mootools实现类似效果。

Demo Download
11. 仿Twitter  jQuery Alert框

很喜欢Twitter的提示框，非常醒目。

Demo Download
12. Digg Header With jQuery

Digg 网页的头部做得很好，虽然不是很惊艳但是效果很不错。

Demo Download
13. Twitter Follow &Unfollow System

Twitter的Follow和Unfollow设计。

Demo Download

14. Facebook 风格Mootools输入框

跟上面提到的类似，这个是用Mootools实现。

Demo  Source

15. Twitter Mootools字符数计算组件

Twitter的时候会有的可输入字符数计算。

DemoSource

16. 重现 Twitter
这个完整的教程会教你如何利用Mootools、PHP、MYSQL等建立一个仿Twitter全新网站。

 

英文原文：http://www.devwords.com/16-javascript-tutorials-inspired-by-social-networking-sites/

Related posts:

1. 30个js画廊组件和教程
2. 23个实用Javascript Tab导航插件
3. 30个实用的ajax灯箱和模态窗口解决方案
4. 14个华丽的javascript图表资源和插件

又一个强大的jQuery滚动插件

 

 

DEMO   Download 

 

    跟之前介绍的一个十分简洁滚动插件EasySilder不一样（猛点此处查看：http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/）,这个组件有诸多优点：

• 可滑动任何HTML内容


• 上下页导航箭头


• 导航tab页支持无限动态创建


• 可对导航文字进行自定义


• 支持可暂停的自动播放


• 每一个滚动项均有#标签方便连接至任意特定项


• 支持无限连续滚动


• 支持同一页面多个滚动效果


• 可选的鼠标滑过暂停滚动效果


• 支持从普通链接直接跳转至相应的滚动项（意思是页面上的文本链接点击后直接滑动至该滚动项）

该插件的英文详细介绍看这里：http://css-tricks.com/anythingslider-jquery-plugin/

使用介绍&参数说明

$(’.anythingSlider’).anythingSlider({
        easing: “swing”,                // Anything other than “linear” or “swing” requires the easing plugin

        autoPlay: true,                 // 是否自动播放
        startStopped: false,            // 如果选择自动播放，这个配置让插件开始时时停止的
        delay: 3000,                    // 自动切换时间

        animationTime: 600,             // 过渡效果持续时间
        hashTags: true,                 // 是否让#标签来变化当前url

        buildNavigation: true,          // 是否添加导航tab
        pauseOnHover: true,             // 是否在鼠标hover时暂停滚动

        startText: “Start”,             // 开始按钮文字
        stopText: “Stop”,               // 结束按钮文字
        navigationFormatter: null       // 自定义的文字格式化函数名，详细使用可参照demo源码
});

 自定义使用

• 添加删除滚动项：仅需添加或删除<div class=”wrapper”>内的<li>标签即可。


• 修改滚动框大小：如果你需要将滚动框的大小从660px改为580px，你需要修改css文件中.anythingSlider ul li 为580px，把.anythingSlider .wrapper 的宽度改为 580px，将.anythingSlider 的width减少100px 为660px。


• 直接连接至滚动框：

  $(”#slide-jump”).click(function(){
      $(’.anythingSlider’).anythingSlider(6);
  });

 

本插件制作者为：http://css-tricks.com, Remy Sharp’s(采用他的部分源码), Doug Neiner（为插件添加更多功能……）。

   这个插件具有很强的自定义功能，稍微修样式即可符合各种使用需要。

  还有，它是jQuery插件。

Related posts:

1. jQuery放大镜插件
2. JQuery高亮插件
3. EasySlider-最简洁的JQuery滚动插件

65个超乎你想象的图片处理艺术

No related posts.