JSFiddle - React, Tailwind, and code Playground

by paka

HTML

<div id="mainPicture" onmouseover="shortThem()" onmouseout="restoreThem()">
    
</div>

CSS

#mainPicture {display:block; width: 425px; height: 200px; background:yellow;}
.shtorka {position: relative;display:block; width:50px; height:100%; background:red; float: left;-margin:1px;}

JavaScript

/* SHTORKA */

var newDivWidth;

function getAmount (divWidth) {

    var i = 80;
    //var divWidth = 400;
    var elementsAmount = i;
    var elementsWidth;
    var x2;


    function is_int(value) {
        if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
            return true;
        } else {
            return false;
        }
    }


    elementsWidth = divWidth / elementsAmount;

    var x = is_int(elementsWidth);
    if (x === false) {

        
        do {
            elementsAmount++;
            elementsWidth = divWidth / elementsAmount;
            x2 = is_int(elementsWidth);
        }
        while (x2 < 1);
        
    }


     //document.write(x , ' ' , elementsAmount);

    return elementsAmount;


}
  

jQuery(document).ready(function(){

    var i;
    var div;
    var divH;
    //var devider = 3;
    var zones; 
    

    div = document.getElementById('mainPicture'); // находм нужный div
    divH = div.offsetWidth; // узнаем его ширину, заданную в СSS (clientWidth — расчетная ширина)

    var devider = getAmount(divH);
    
    zones = Math.floor(divH/devider); // делим ширину на 'devider' и отбрасываем знаки после запятой

    newDivWidth = 100 / devider+'%'; // ширина элементов в процентах

    for (i=0; i < devider; i++) {
        var newDiv = document.createElement('div'); //создаем пустой див <div></div>
        newDiv.className = 'shtorka'; // новому диву добавляем класс
        newDiv.style.width = newDivWidth; // задаем ширину
        div.appendChild(newDiv); // вставляем див с классом в указанное место

    } // eof for - создаем столько элементов, сколько указанно в 'devider'

    //return newDivWidth;  
       


//function newDivMove() {
    
    //div.onmouseover="shortThem()";
    //div.onmouseout="restoreThem()";
    
    function shortThem(){
     
        var zones = jQuery('.shtorka');
        var i, n = zones.length;
        
        for (i=0; i<n; ++i){
        
           ...