下面是重新创建类似 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>
最佳答案
d然后您可以在框的 html 中添加标题/描述信息,并从那里阅读。 我在这条评论下添加了代码: //这里添加内容 还将 info-bg 的高度更改为 min-height 以保持其灵 active
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(); });
});
.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;
}
<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>
关于javascript - 向容器中插入内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47885741/