zoukankan      html  css  js  c++  java
  • 【jquery】图片前后对比效果——beforeAfter

    今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下:

    使用方法:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>图片前后对比</title>
    </head>
    <body>
        <div class="beforeafter">
            <img src="images/before.jpg" alt="before" height="420" width="748"/>
            <img src="images/after.jpg" alt="after" height="420" width="748"/>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.beforeafter').beforeAfter({
            imagePath: 'images/'
        });
    });
    </script>

    参数说明(部分):

    showFullLinks:是否显示下面的链接,点击链接,将自动显示完整的前或后的图片,默认值:true

    imagePath:导航图片的路径(绝对路径或相对路径),导航图片指的是中间绿色条以及左右三角,默认值:/js/beforeAfter/

    beforeLinkText:设置前图片下面链接的文字,默认值:Show only before

    afterLinkText:设置后图片下面链接的文字,默认值:Show only after

    注意:

    前后两张图片大小必须一致。

    demo:点此下载

    官网地址:http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/

  • 相关阅读:
    第十六周学习进度报告
    个人课程总结
    第一阶段意见评论
    用户评价
    第二阶段10
    第二阶段9
    第二阶段8
    第十五周学习进度报告
    第二阶段7
    第二阶段6
  • 原文地址:https://www.cnblogs.com/yjzhu/p/3792491.html
Copyright © 2011-2022 走看看