آموزش ساخت مقایسه تصاویر (قبل و بعد) با جاوا اسکریپت

آموزش ساخت مقایسه تصاویر (قبل و بعد) با جاوا اسکریپت

آموزش ساخت مقایسه تصاویر جاوا اسکریپت – حتما در خیلی از پست ها دیده اید که 2 تصویر را گذاشته و آن را مقایسه می کنند مثل قبل و بعد از باشگاه بدنسازی .


در این آموزش قصد داریم با کمک کتابخانه imatch.js این ویژگی را پیاده سازی کنیم .

ساختار html برنامه

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
    <script src="static/js/lib/imatch.min.js"></script>
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <div class="img-container">
            <img data-caption="بعد" src="static/img/before.jpg" alt="image One">
            <img data-caption="قبل" src="static/img/after.jpg" alt="image Two">
        </div>
        
       
    </div>
    <input hidden type="range" name="" id="range" min="0" max="100">


    <script src="static/js/app.js"></script>
</body>
</html>



و در ادامه محتوای css

فایل css

.container{
    direction: ltr;
}

.img-container{
    width: 70%;
    height: 400px;
}

.caption{
    font-size: .8rem;
    color: rgb(34, 34, 34);
    background-color: rgba(228, 228, 228, 0.787);
    padding: 5px;
    border-radius: 3px;
    font-weight:bold;
}

.line{
    background-color:rgba(0, 0, 0, 0.12) !important;
}

.dot{
    background-color: tomato !important;
}



در پایان فایل app.js برای آماده سازی مقایسه تصاویر

فایل app.js آماده سازی iMatch

window.onload = function () {
    var slider = new iMatch('.img-container')
    
    slider.compare({
        direction: 'HORIZONTAL',
        animation: true,
        lineClassName: 'line',
        arrowClassName: 'dot'
    })

}


دموی برنامه مقایسه تصاویر با imatch

ساخت مقایسه تصاویر جاوا اسکریپت

دانلود برنامه مقایسه تصویر با imatch

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859