15个效果非常炫的jQuery插件

Web前端3125.6K阅读模式

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 by John Resig. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery framework allows the creation of powerful and dynamic web pages and web applications (source: Wikipedia).

jQuery is a “write less, do more” JavaScript library, developers can trust jQuery blindly to produce awesome inspiring effects to get the best results. Here are 15 useful and new  jQuery Plugins which I have handpicked from jQuery articles or plugins published in last couple of months on the blogosphere, I hope you’ll like the latest on jQuery Plugins ..

Super Simple Lightbox with CSS and jQuery

Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!

15个效果非常炫的jQuery插件-图片1

Demo | Tutorial | Download

Animated Scroll to Top

A detailed tutorial on how to create an animated scroll to top, it is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

15个效果非常炫的jQuery插件-图片2

Demo | Tutorial | Download

Creating a Modern Gallery with Raphael

How to create a modern gallery (with cool animation effect) using Raphael library and jQuery. First of all, check out Raphael website and read the documentation. In this tutorial we will use just a little part of this what Raphael offer.

15个效果非常炫的jQuery插件-图片3

Demo | Tutorial | Download

Simple Tooltip w/ jQuery & CSS

There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. The markup is as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into.

15个效果非常炫的jQuery插件-图片4

Demo | Tutorial

Circular Content Carousel with jQuery

The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

15个效果非常炫的jQuery插件-图片5

Demo | Tutorial | Download

Diagonal Fade

This is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away. DiagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2

15个效果非常炫的jQuery插件-图片6

Demo & Download

Parallax Slider with jQuery

Making use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

15个效果非常炫的jQuery插件-图片7

Demo | Tutorial | Download

Dropdown Login Form

A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to. All you have to do is implement and hook it up to your website.

15个效果非常炫的jQuery插件-图片8

Demo | Download

Smart Wizard

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users. Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks.

15个效果非常炫的jQuery插件-图片9

Demo | Download

Animated Skills Diagram with Raphaël

how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.

15个效果非常炫的jQuery插件-图片10

Demo | Tutorial | Download

Expanding Fullscreen Grid Portfolio

A neat experimental portfolio template. The main idea is to have a grid layout that is created with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”.

15个效果非常炫的jQuery插件-图片11

Demo | Tutorial | Download

Simple Vote Using JQuery Animate

Simple idea to use JQuery animate function in voting system, the idea is just expanding the div element (css width property) using the animate function, we just need to add the same value on the width element.

15个效果非常炫的jQuery插件-图片12

Demo | Tutorial

Ezoverlay

A self-contained jQuery plugin that enables element and fullscreen overlays, with optional static and dynamic modal content – that virtually eliminates the need for additional html or css code.

15个效果非常炫的jQuery插件-图片13

Demo | Download

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in this css) that essentially acts as a window where two other items of your choosing “peek” through.

15个效果非常炫的jQuery插件-图片14

Demo | Tutorial | Download

Triggered Infinite Scroll

This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.(Custom trigger, non-automatic. Twitter-style)

15个效果非常炫的jQuery插件-图片15

Demo | Tutorial

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • JQuery
  • Web前端
评论  31  访客  28  作者  2
    • 火星人
      火星人 1

      鄙视下,E文看不懂

      • neverno
        neverno 2

        如果是引用的是不是带上原文地址比较好?

          • 知更鸟
            知更鸟

            @ neverno 是的,转载文章我都会在明显示的位置加上原文链接
            比如标题下的 转载:原文链接

          • Win7en乐园
            Win7en乐园 8

            嗯,鸟哥的主题支持转载地址

            • Cyan
              Cyan 1

              请问,如何实现像您主题一样,滚动到当前图片时才开始载入显示?谢谢~

                • 知更鸟
                  知更鸟

                  @ Cyan 参考这篇
                  http://zmingcx.com/jquery-lazy-to-achieve-picture.html

                • 哈哈
                  哈哈 1

                  超赞

                  • 屈臣氏官网
                    屈臣氏官网 5

                    这功能太炫了

                    • 电脑租赁
                      电脑租赁 3

                      wa 真不错
                      不会是 html5 吧

                      • 流水线
                        流水线 3

                        很不错,http://www.yuyin.sh.cn/

                        • 移动电源
                          移动电源 1

                          网站不错,学习了。

                          移动电源,便携式移动电源,移动充电宝,ipad充电

                          • iphone4手机套
                            iphone4手机套 1

                            iphone4手机套,苹果配件网www.feyaa.com

                            • 远翔
                              远翔 0

                              之前用的你的主题,很不错。后因为我空间加载速度慢,我还是换了一个简单的主题。最近对Jquery很感兴趣,这个文章很给力,好多超炫的特效。下载下来好好研究一下。
                              谢谢分享。

                              • 横坐标
                                横坐标 1

                                圣诞节快乐

                                • 一堵墙
                                  一堵墙 4

                                  全部都是英文的啊,加载速度如何?

                                  • 童佳倩
                                    童佳倩 3

                                    一如即往的强大,可都是E文,看不懂啊。。。。问鸟哥一个问题,你知道如何控制特色图像的大小吗?网上没找到任何教程,我有一个主题会自动调用日志中的第一张图像,但由于图像大小的问题在首页中调用出来经常看到都是变型的,于是我想到用特色图片来实现,但特色图像尺寸又不适合,所以想通过修改特色图像大小来适应主题,如果有空请回复下,谢谢!!!!

                                    • www.jiejiucha.org
                                      www.jiejiucha.org 1

                                      那个内容滚动找了好久!市面上好像最多的就是图片滚动!这下赶紧收藏!嘿嘿!有些效果在ie下显示有一定差异!!

                                      • www.mengjun99.com
                                        www.mengjun99.com 1

                                        解酒不错的产品

                                        • 安卓游戏安卓应用
                                          安卓游戏安卓应用 1

                                          很耗资源啊·

                                          • 诺
                                            1

                                            咱还属于学习阶段…

                                            • 前端组
                                              前端组 0

                                              麻烦翻译一下呗

                                              • jacy
                                                jacy 0

                                                支持个。这些插件会在header里面加上css和js的链接吧?对我这种国外空间来说无疑会增加加载速度。

                                                • 微寸
                                                  微寸 0

                                                  的确很不错啊,值得学习

                                                  • 君说
                                                    君说 2

                                                    额,说一下,英文真心看不懂。。。

                                                    • 解酒茶
                                                      解酒茶 0

                                                      真的很不错,尤其喜欢scroll to top,解酒茶网站就在用,很不错的呢!大家可以到解酒茶网站看下效果!!

                                                      • 苏州肿瘤医院
                                                        苏州肿瘤医院 3

                                                        好长啊,弄的我还以为是好几篇文章呢

                                                        • 九块邮
                                                          九块邮 1

                                                          呵呵,要是中文的就更好了!慢慢研究!

                                                          • 悠悠我3
                                                            悠悠我3 2

                                                            真的不错,但是就是在实验阶段
                                                            恒泽堂扮点祛斑http://www.38hzt.com

                                                            • Crystal Pendant
                                                              Crystal Pendant 2

                                                              鸟哥,怎么直接全英文就转过来了,幸好还有图可以猜内容。

                                                            匿名

                                                            发表评论

                                                            匿名网友
                                                            :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                            拖动滑块以完成验证