六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）

插件描述：鼠标悬停显示六变形矩阵，蜂窝状图片

更新时间：2020-01-02 22:13:12//页面渲染

var str = ''

for (var i = 0; i 

str += '

' +

'

' +

        '' +

'' +

'

内容

' +

'

' +

'

'

};

$('.imgBox').html(str);

//显示效果

$('.imgBox>.hex').hover(function(e) {

$(this).parent().find('.img').css('opacity', .2);

$(this).siblings('.hex').find('.mark').hide();

$(this).parent().find('.text_box').hide();

$(this).find('.img').css('opacity', 1);

$(this).find('.mark').show();

$(this).find('.text_box').show();

var domLeft = e.target.offsetParent.offsetLeft;

var domLeft = e.target.x;

var winWidth = document.body.clientWidth;

var markWidth = $(this).find('.text_box').width();

if (winWidth - domLeft <= markWidth) {

$(this).find('.text_box').css({

left: 'unset',

right: '114%'

});

};

}, function() {

$(this).parent().find('.img').css('opacity', 1);

$(this).parent().find('.mark').hide();

$(this).parent().find('.text_box').hide();

})