Question

您好我还在学习js，我设法制作了这个网站（见下面的代码），但我遇到了一些问题。

div .frequencyItem中的图像需要被覆盖，因此它们在div内部从左到右，从上到下而不拉伸图像。我试着在css中做瘦，但它什么都没做。这是因为我在js中制作了img吗？
正如我上面提到的，img需要位于div内部，它们似乎位于底部的div之外。
div的随机高度为givven bij js。在悬停时它们会膨胀，在悬停之后它们需要回到div在悬停之前的高度。所以每个div都有所不同。那么在悬停之前是否需要检查高度？

我希望有人可以帮助我并向我学习一些新的javascript内容。谢谢

HTML：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta content="charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <link rel="icon" type="image/png" href="images/fav.ico">
  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>



  <script type="text/javascript" src="js/core.js"></script>
  <link rel="stylesheet" media="screen" href="css/screen.css">


</head>

<html>

<body>



<div class="freqInner"> </div>


</body>
</html>

CSS：

/*+++++++++++++ GENERAL ++++++++++++++*/

@font-face {
    font-family: Font1;
    src: url(../fonts/font.eot), url(../fonts/font.woff), url(../fonts/font.woff2), url(../fonts/font.otf);
    font-weight: normal;
    font-style: normal
}


*:not(select){
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}


html,body{
    margin: 0 auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body {
    background-color: black;
}

.freqInner{
    /*position: fixed;*/

}

.frequencyItem {

  width: 100%;
  background: rgb(255,255,255);
  margin-top: 0px;
  border: 1px solid black;
  z-index: 3;

  -webkit-transition: width 1s, height 1s, margin 1s;
  -moz-transition: width 1s, height 1s, margin 1s;
  -ms-transition: width 1s, height 1s, margin 1s;
  transition: width 1s, height 1s, margin 1s;
}

.frequencyItem:hover {
  cursor:pointer;
  background: rgb(222,222,222);
  /*height: 400px !important;*/

}

img{
  /*overflow: none;*/

  width: 100px;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

JS：

    $(document).ready(function(){



    //divs maken
        var i = 0;
        while (i < 7) {
            $('.freqInner').append('<div class="frequencyItem"></div>');
            i++;
        };

    //id maken voor div
        var a=0;
    $('.frequencyItem').each(function(){
        a++;
        var newID='menu'+a;
        $(this).attr('id',newID);
        $(this).val(a);
    });

    //array img en in div id zetten
    var array_1 = ["http://lorempixel.com/100/100/sports/1", "http://lorempixel.com/100/100/sports/2", "http://lorempixel.com/100/100/sports/3", "http://lorempixel.com/100/100/sports/4", "http://lorempixel.com/100/100/sports/5"];
      array_1.forEach(function(value,index) {
        $('#menu' + index).html('<img src="' + value + '" />');
        // $(this).css("height", h);
      });


    //random height geven aan div class...
        $('.frequencyItem').each(function() {
            var h = Math.floor(Math.random() * 100) + 30;
            $(this).css("height", h);


});

//hovertje
    $('.frequencyItem').hover(function() {
        $(this).animate({
            height: 400
        }, 'fast');
    }, function() {
        $(this).animate({
            height: 100
        }, 'fast');
    });



});

尝试在javascript

0 个答案: