Web development of the most useful 50 jQuery plug-in collection -- "effects".

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

   Web development of the most useful 50 jQuery plug-in collection "series of articles to share the most innovative 50 jQuery plug-in, the plug-in is divided into the following categories: webpage layout plug-in plug-in, navigation, form plugin, slider and disk plug-in plug-in, charts, pictures effects plug-ins, video card and so on, will continue to share with you, remember attention and collection.

Article may be of interest to you


tiltShift.js

  TiltShift.js is a great plugin for jQuery, use the CSS3 image filter to realize shift lens effect.

  Very simple to use, use the data property to configuration parameters, the HTML sample:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

  JavaScript call example:

$(function() {
     $('.tiltshift').tiltShift();
});

   The plug-in download

The effect of presentation


jQuery Picture

  JQuery Picture is a used to add response pictures in the webpage of plug-in, show different images in different equipment size.

  The HTML code examples:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

  The JavaScript sample:

$(function(){
    $('figure.responsive').picture();
});

   The plug-in download

The effect of presentation


3D Image Slider

  3D the picture sliding effect is very cool, a demonstration effect of five kinds of gorgeous. Use the sample as follows:

  HTML code:

<ul id="sb-slider" class="sb-slider">
    <li>
        <a href="#" target="_blank">
            <img src="images/1.jpg" alt="image1"/>
        </a>
        <div class="sb-description">
            <h3>Creative Lifesaver</h3>
        </div>
    </li>
    <li>
        <img src="images/2.jpg" alt="image2"/>
        <div class="sb-description">
            <h3>...</h3>
        </div>
    </li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

  Provides many configuration options, and can be adjusted according to needs, the following is the default option:

$.Slicebox.defaults = {
    orientation : 'v',
    perspective : 1200,
    cuboidsCount : 5,
    cuboidsRandom : false,
    maxCuboidsCount : 5,
    disperseFactor : 0,
    colorHiddenSides : '#222',
    sequentialFactor : 150,
    speed : 600,
    easing : 'ease',
    autoplay : false,
    interval: 3000,
    fallbackFadeSpeed : 300,
    onBeforeChange : function( position ) { return false; },
    onAfterChange : function( position ) { return false; }
};

   The plug-in download

The effect of presentation


Image Transitions

60+ Impressive Jquery Image Gallery, Lightbox, Tabs, Menu, Text Effects

  Picture switching effects, let a person be struck dumb with Flip, Multi-flip, Rotation, Cube, Unfold and other special effects.

  1. Demo 1: Flip
  2. Demo 2: Rotate
  3. Demo 3: Multi-Flip
  4. Demo 4: Cube
  5. Demo 5: Unfold
  6. Demo 6: Others

   The plug-in download

The effect of presentation


Responsive Img

  The SRC attribute Responsive Img this jQuery plugin can automatically replace the picture according to the size of the container, so as to realize the response type picture display.

  The HTML sample code:

<img id="img2" src="images/image.png" style="width:49%;" />
<img id="img3" src="images/image.png" style="max-width:49%;" />

  The JavaScript sample code:

$("#img2,#img3").responsiveImg({
    breakpoints:{
        "_four":400,
        "_two":200,
        "_eight":800
    }
});

   The plug-in download

The effect of presentation


Portfolio Image Navigator

  Image navigation effect of exquisite, the arrow control through four directions, applications for works of.

  The default parameter configuration example code is as follows:

$('#portfolio').portfolio({
    image: {
        width: 600,
        height: 400,
        margin: 20
    },
    path: {
        width: 10,
        height: 10,
        marginTop: 5,
        marginLeft: 5
    },
    animationSpeed: 400
});

  The plug-in download

The effect of presentation


Article may be of interest to you


This link: web development is the most useful of the 50 jQuery plugin for — — image effects

Compiler source: dream sky concern front-end development technologies on webpage design resources sharing

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Ronald at November 26, 2013 - 7:26 PM