10個jQuery的圖像比較滑塊插件

jopen 8年前發布 | 9K 次閱讀

jQuery image comparison sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. Such sliders give you more features and functions to manipulate and show less of the before image and more of the after image, and vice versa to the users.

In this article we have compiled a list of 10 jQuery Image Comparison sliders which will help designers to know more about image changes and it is also a great way to reflect on the amount of change a technique or approach has on an original image.

Let’s check out the list. 

        1. Twenty Twenty
    </h2>
    <p>
        <a href="/misc/goto?guid=4958537862665070200" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/1dfd5e4c94d37c6e89d0ac1dc18b9c60.jpg" width="625" height="309" /></a><br />

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them. It works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container. </p> 

        2. jQuery Sequency
    </h2>
    <p>
        <img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/9a460820a5b42c6139d6a9751a3bd7b8.jpg" width="625" height="347" /><br />

jQuery plugin which enables you to compare the differences between a set of images in sequence as your scroll down and up. </p> 

        3. Before-after.js
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325178570311" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/da54c622fcbe9fc573eaedf17b708082.jpg" width="625" height="352" /></a><br />

before-after.js is a simple and responsive image comparison slider. </p> 

        4. Juxtapose
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325272809110" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/a2a89c5d73ab51ac3d158f0f01bcfdea.jpg" width="625" height="309" /></a><br />

JuxtaposeJS helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.). It is free, easy to use, and works on all devices. All you need to get started are links to the images you’d like to compare. </p> 

        5. ImgSlider
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325368404960" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/fae94106bb56d671c1556ebf744632cf.jpg" width="625" height="377" /></a><br />

imgSlider is a simple jQuery plugin to make image comparison slider. The use is simple and easy: after including its JS and CSS, wrap the images in div with theleft class for the before image, and right class for the after image, then activate it by calling .slider(); </p> 

        6. Image Comparison Slider
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325469239863" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/13c9e58a3313d94b1080c0bd428ae916.jpg" width="625" height="309" /></a><br />

Image Comparison Slider is a handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. When you create a product page, there are some effective UX solutions that can be used to make the user ‘feel’ the product. A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display resolution and a standard one. Google uses it to show how cool is a Google+ Photos filter. </p> 

        7. Cocoen
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325549312834" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/5b21703fcb42e864f4d23874ec68099c.jpg" width="625" height="492" /></a><br />

Cocoen enables touch with the use of the jQuery-Touch Event. It’s easy to apply due to an HTML structure similar to the Twentytwenty plugin. On the script stack, besides jQuery you need to include the jQuery Touch Event library, alongside this plugin. </p> 

        8. HTML5 Video Before and After Comparison Slider
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325648193063" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/4b18888e9c96d32a06000d45d7b73340.jpg" width="625" height="309" /></a><br />

When another developers try to make comparison slider for images, then Dudley Storey apply the slider to video. To make work, he utilize the jQuery and just a few lines of code. See the demo onCodepen to see the action. </p> 

        9. Double Viewer jQuery Plugin
    </h2>
    <p>
        <a href="/misc/goto?guid=4958977325733561907" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/bcb9c8d58aba3f57a1d0db21389f70dd.jpg" width="625" height="479" /></a><br />

Double Viewer jQuery Plugin is an easy-driven and comfy app which allow you to compare two different images in one slider. Double Viewer jQuery Plugin works in all of main browsers and mobile devices. Using Double Viewer jQuery Plugin you will be able to set any colors for cursor and line and to change the size of cursor and line. Also this Double Viewer has several types of mouse controlling. I hope this Double Viewer jQuery Plugin will be useful for you and your site. </p> 

        10. jQuery Responsive oneByone Slider Plugin
    </h2>
    <p>
        <a href="/misc/goto?guid=4958857986007956028" target="_blank"><img alt="10 jQuery Image Comparison Sliders | Code Geekz" src="https://simg.open-open.com/show/835bf90faa42f91edbbffac20b7bc8c6.jpg" width="625" height="317" /></a><br />

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven byAnimate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make 推ter Bootstrap Carousel support the one by one animation. </p>

  • Readers Rating

  • Rated 0 stars
    / 5( Reviewers)