更新时间:2020-01-02 22:13:12
//页面渲染 var str = '' for (var i = 0; i < 19; i++) { str += '<div >' + '<div >' + '<img src="./images/amherst.png">' + '<span ></span>' + '<div >内容</div>' + '</div>' + '</div>' }; $('.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(); })