Question

以下是重新创建类似Google搜索图片的代码。如果单击一个框，它将在该框和字段下打开。基本上我希望每个盒子在你点击时都有自己的描述图像。

如何在该信息框中插入图片，标题或段落？

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function() {
  container.children().removeClass('selected'); // reset selected element
  $(this).addClass('selected'); // mark new selected element
  var selectedPos = $(this).index(); // get selected position
  // find wrap element:
  //var containerWidth = container.width();
  //var elementsInRow = Math.floor(containerWidth / 100 );
  var elementsInRow = 4; // use this if container's width is fixed
  var row = Math.floor(selectedPos / elementsInRow) + 1;
  var wrapPos = (row * elementsInRow);

  // if selected is on last row, use as wrap the last element:
  var size = elements.length;
  if (wrapPos >= size) {
    wrapPos = size;
  }
  wrapPos = wrapPos - 1;
  console.log(selectedPos);
  console.log(elementsInRow);
  var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
  console.log(selectedPos % elementsInRow);
  console.log((selectedPos % elementsInRow) * 110);
  console.log('left: ' + pointerPos);
  console.log(size);
  // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
  pointerPos = $(this).position().left + $(this).width() / 2 - 10;
  // end edit;
  if (wrapPos == oldWrapPos) {
    $('.info-pc').css("left", pointerPos + 'px');
  } else {
    oldWrapPos = wrapPos;
    elements.removeClass('edge');
    $(elements[wrapPos]).addClass('edge');
    $('.info-bg').slideUp(function() {
      $(this).remove();
    });
    $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:' +
      pointerPos + 'px"></div><div class="info-cl"></div></div>');
    $('.info-bg').slideDown();
  }
});

$('html').click(function(e) {
  if (e.target == this)
    $('.info-bg').slideUp(function() {
      $(this).remove();
    });
});

.container {
  width: 440px;
  margin: 0 auto;
  position: relative;
}

.info-bg {
  width: 430px;
  height: 70px;
  background-color: red;
  float: left;
  position: relative;
  margin: 5px;
  display: none;
}

.info-cl {
  height: 100%;
}

.info-pc {
  position: absolute;
  border-bottom: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 0;
  float: right;
  top: -10px;
}

.box {
  width: 100px;
  height: 170px;
  background-color: grey;
  float: left;
  margin: 5px;
  font-size: 40px;
}

.edge {
  background-color: yellow;
}

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
  </div>
</body>

Answer 1

d然后，您可以在框的html中添加标题/说明信息，然后从那里读取。我在此评论下添加了代码： //在这里添加内容也将info-bg的高度改为min-height以保持灵活性

＆＃13;

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function(){
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
    var selectedPos = $(this).index(); // get selected position
    // find wrap element:
    //var containerWidth = container.width();
    //var elementsInRow = Math.floor(containerWidth / 100 );
    var elementsInRow = 4; // use this if container's width is fixed
    var row = Math.floor(selectedPos / elementsInRow)+1;
    var wrapPos = (row * elementsInRow);
    
    // if selected is on last row, use as wrap the last element:
    var size = elements.length;
    if (wrapPos >= size){wrapPos = size;}
    wrapPos = wrapPos - 1;
    console.log(selectedPos);
    console.log(elementsInRow);
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
    console.log(selectedPos % elementsInRow);
    console.log((selectedPos % elementsInRow) * 110);
    console.log('left: '+pointerPos);
    console.log(size);
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
    pointerPos = $(this).position().left + $(this).width() / 2 - 10;
    // end edit;
    if (wrapPos == oldWrapPos){
        $('.info-pc').css("left", pointerPos+'px');
    } else {
        oldWrapPos = wrapPos;
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
       
        $('.info-bg').slideDown();
    }
    //adding content here
    var content = $('.info-bg').find('.info-cl');
    content.html(''); //empty previous content
    var title = $('<h2>');
    title.text($(this).data('title'))
    var description = $('<p>');
    description.text($(this).data('description'))
    content.append(title).append(description);
});

$('html').click( function (e) { 
    if ( e.target == this )
        $('.info-bg').slideUp( function() { $(this).remove(); });
});

＆＃13;

.container{
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.info-bg{
    width: 430px;
    min-height: 70px;
    background-color: red;
    float:left;
    position: relative;
    margin: 5px;
    display: none;
}

.info-cl{
    height: 100%;
}

.info-pc{
    position:absolute;
	border-bottom: 10px solid red;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 0;
	float: right;
	top: -10px;
}

.box{
    width:100px;
    height:170px;
    background-color: grey;
    float:left;
    margin:5px;
    font-size: 40px;
}

.edge{
    background-color:yellow;
}

.selected {
   background-color: red;
   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="container">
    <div class="box" data-title="foo0" data-description="bar">0</div>
    <div class="box" data-title="foo1" data-description="bar">1</div>
    <div class="box" data-title="foo2" data-description="bar">2</div>
    <div class="box" data-title="foo3" data-description="bar">3</div>
    <div class="box" data-title="foo4" data-description="bar">4</div>
    <div class="box" data-title="foo5" data-description="bar">5</div>
    <div class="box" data-title="foo6" data-description="bar">6</div>
    <div class="box" data-title="foo7" data-description="bar">7</div>
    <div class="box" data-title="foo8" data-description="bar">8</div>
    <div class="box" data-title="foo9" data-description="bar">9</div>
</div>
</body>

＆＃13;

将内容插入容器

1 个答案: