Question

我使用Codepen的布局：http://codepen.io/trhino/pen/ytoqv

我已将该代码的某些部分放入我的html中，但它无法运行。任何人都可以告诉我为什么以及我能做些什么来解决它？我想从codepen教程中得到的只是实际的图库效果，并且点击展开＆＃39;并且＆＃39;崩溃＆＃39;的按钮。

以下是我的网站当时的样子（忽略拉伸的照片，我将在对javascript进行排序后对其进行更正）

http://me14ch.leedsnewmedia.net/portfolio/photo.html

非常感谢任何帮助！这是我的代码：

    <h2>(click on the box to expand gallery)</h2>


<div class="wrap">
  <div id="picture1" class="deck"> 
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork1.JPG">
      </a>
    </div>
  <div id="picture2" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork2.JPG">
      </a></div>
  <div id="picture3" class="deck"> 
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork3.JPG">
      </a></div>
  <div id="picture4" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork4.JPG">
      </a></div>
  <div id="picture5" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork5.JPG">
      </a></div>
</div>


      <div id="close"><p>&laquo; collapse gallery</p></div>


  <div id="lightbox">
<div id="lightwrap">
 <div id="x"></div>
</div>

这是CSS

    /* gallery */

*, *::before, *::after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font-family: arial, helvetica, sans-serif;
  font-size: 24px;
  color: #6CBDEB;
  text-shadow: 1px 1px 1px #000;
}

.wrap {
  position: relative;
  width: 1125px;
  height: 200px;
  margin: 0 auto;
}

.deck {
  margin: 20px;
  border: 3px solid #FADBC8;
  height: 202px;
  width: 202px;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
  cursor: pointer;
  font-size: 50px;
  line-height:200px;
  text-align: center;

}

.deck a {
  color: black;
}

.deck img {
  height: 200px;
  width: 200px;
}

.album {
  border: 1px solid #FADBC8;
  height: 200px;
  width: 200px;
  float: left;
  transition: .3s;
  position: relative;
}

#close {
  position: relative;
  display: none;  
  width: 1125px;
  margin: 30px auto 0;
}

#close p {
  cursor: pointer;
  text-align: right;
  margin: 0 20px 0;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 999;
}

#lightwrap {
  position: relative;
  margin: 0 auto;
  border: 5px solid black;
  top: 15%;
  display: table;
}

#lightwrap img {
  display: table-cell;
  max-width: 600px;
}

#x {
  position: absolute;
  top: 2px;
  right: 2px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAPFBMVEX///8AAAD9/f2CgoKAgIAAAAAAAAAAAABLS0sAAAAAAACqqqqqqqq6urpKSkpISEgAAAC7u7u5ubn////zbsMcAAAAE3RSTlMASv6rqwAWS5YMC7/AyZWVFcrJCYaKfAAAAHhJREFUeF590kkOgCAQRFEaFVGc+/53FYmbz6JqBbyQMFSYuoQuV+iTflnstI7ssLXRvMWRaEMs84e2uVckuZe6knL0hiSPObXhj6ChzoEkIolIIpKIO4joICAIeDd7QGIfCCjOKe9HEk8mnxpIAup/F31RPZP9fAG3IAyBSJe0igAAAABJRU5ErkJggg==);
  width: 27px;
  height: 27px;
  cursor: pointer;
}

这是Javascript：

 var i, expand = false;

function reset() {
  $('.deck').css({
    'transform': 'rotate(0deg)',
    'top'      : '0px'
  });
}

//expands and contracts deck on click
$('.deck').click(function (a) {
  if (expand) {
    a.preventDefault();
    var imgSource = $(this).children().attr('href');
    $('#lightwrap').append('<img src="' + imgSource + '" id="lb-pic">');
    $('#lightbox, #lightwrap').fadeIn('slow');
  } else {
    var boxWidth = $('.deck').width();
    $('.deck').each(function (e) {
      $(this).css({
        'left': boxWidth * e * 1.1 + 'px'
      });
      expand = true;
      $('#close').show();
    });
  }
});

//close lightbox
$('#x, #lightbox').click(function(){
  $('#lightbox').fadeOut('slow');
  $('#lightwrap').hide();
  $('#lb-pic').remove();
});

//prevent event bubbling on lightbox child
$('#lightwrap').click(function(b) {
  b.stopPropagation();
});

$('#close').click(function(){
  $(this).hide();
  $('.deck').css({'left': '0px'});
  expand = false;
});

$('.deck:last-child').hover(
  //random image rotation 
  function() {
    if (expand === false) {    
      $('.deck').each(function () {
        i++;
        if (i < $('.deck').length) {
          var min = -30,
              max = 30,
              random = ~~(Math.random() * (max - min + 1)) + min;
          $(this).css({
            'transform' : 'rotate(' + random + 'deg)',
            'top'       : random + 15 + 'px'
          });
        }
      });
    }
  //straightens out deck images when clicked
  $('.deck').click(
    function (a) {
      a.preventDefault();
      reset();
    }); 
  },
  //undo image rotation when not hovered
  function () {
    i = 0;
    reset();
  }
);

Answer 1

只需将您的javascript封装在$( document ).ready(function() { //paste javascript code here }); function中，以便在加载页面时执行：

.flex-container {
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.color_1 {
  background: tomato;
}

.color_2 {
  background: LightGreen;
}

.color_3 {
  background: PowderBlue;
}

.color_4 {
  background: SteelBlue;
}

.flex-item {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  width: 50%;
  height: 50vh;
}

结果将是：

enter image description here

这里还有一个jsBin

为什么我的javascript无法运行？

1 个答案: