Question

我正在尝试制作与thesheepmarket.com类似的东西，它们如何将一堆小图像放在一起，当你滚动它时，它会弹出这样的图像，这样你就可以看到更大的图像了。

我想用CSS / JS做到这一点。

任何帮助都会很棒。

所以我基本上可以做所有事情，除了我不知道如何让div弹出一下：

#test {
height: 10px;
background: red;
width: 10px;
font-size: 1px; /* IE 6 */
}

#test:hover {
height: 100px;
width: 100px;
border-style: solid;
border-width: 1px;
}

$('#test').hover(function() {
console.log('hoved');

}）;

我基本上只是想找到最好的方法，将div弹出窗口设置在当前悬停的位置下方。

Answer 1

考虑使用类似这个插件的东西： http://dropthebit.com/demos/photobox/

来自插件网站：

<强> HTML

<div id='gallery'>
<a href="http://www.somedomain.com/images/image1_large.jpg">
    <img src="http://www.somedomain.com/images/image1_small.jpg" title="photo1 title">
</a>
<a href="http://www.somedomain.com/images/image2_large.jpg">
    <img src="http://www.somedomain.com/images/image2_small.jpg" alt="photo2 title">
</a>
<a href="http://www.somedomain.com/images/image3_large.jpg">
    <img src="http://www.somedomain.com/images/image3_small.jpg" title="photo3 title">
</a>
<a href="http://www.somedomain.com/images/image4_large.jpg">
    <img src="http://www.somedomain.com/images/image4_small.jpg" alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
</a>
<a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
    <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg" title="PEOPLE ARE AWESOME 2013 FULL HD ">
</a>
</div>

<强> JS

<script>
// applying photobox on a `gallery` element which has lots of thumbnails links. Passing options object as well:
//-----------------------------------------------
$('#gallery').photobox('a',{ time:0 });

// using a callback and a fancier selector
//----------------------------------------------
$('#gallery').photobox('li > a.family',{ time:0 }), callback);
function callback(){
   console.log('image has been loaded');
}

// destroy the plugin on a certain gallery:
//-----------------------------------------------
$('#gallery').data('_photobox').destroy();

// re-initialize the photbox DOM (does what Document ready does)
//-----------------------------------------------
$('#gallery').photobox('prepareDOM');
</script>

我怎么能实现类似＆＃34; thesheepmarket＆＃34;用CSS / JS？

1 个答案: