代码之家 › 专栏 › 技术社区 › Juan Antonio

“图像屏蔽”缩略图+全尺寸图像。棘手的任务

web-frontend css html jquery javascript

Juan Antonio · 技术社区 · 6 年前

我需要设置这样的效果:

http://kaceymorrow.com/slo-fi/#Julia_Audio

当您将图像悬停在该区域中时,图像会更改其大小以覆盖大部分屏幕,但请注意过渡是如何非常平滑的:大图像的位置与缩略图图像完全一致,因此它看起来像图像“揭开”本身,而不是展开。

我做了几件事都没有成功。我没有接近答案的东西。

编辑:

这是我所拥有的最好的,但再一次,不是接近解决方案!

此脚本等待将鼠标悬停在图像上以显示一个以图像为背景的DIV。问题是,这一形象似乎正在扩大,而不是“揭开”。

$(document).ready(function(){
    $('.ejemplo').hover(function(){
        console.log('hoveeeeer');
        var img = $(this).data('img');
        console.log(img);
        $('.c1').css(
            'background-image', 'url('+img+')',
        )
        $('.c1').show()
        $('.c1').css(
            'opacity', '1'
        )
        $('.ejemplo').css(
            'opacity', '0'
        )
        $('.header_highlights').css(
            'opacity', '0'
        )

        var audio1 = $(this).data('audio');
        var stereo = document.getElementById(audio1);
      //Example of an HTML Audio/Video Method
        stereo.play();
    }).mouseout(function(){
    console.log('no hover')
    $('.c1').hide()
    $('.c1').css(
        'opacity', '0'
    )
    $('.ejemplo').css(
        'opacity', '1'
    )
    $('.header_highlights').css(
        'opacity', '1'
    )
    var audio1 = $(this).data('audio');
    var stereo = document.getElementById(audio1);
    stereo.pause();
    });
  });

HTML:

  <div class="container-flex w-container" style="">
        <?php $behind_the_image_images = get_field( 'behind_the_image' ); $count= 0;?>
        <?php if ( have_rows( 'behind_the_image' ) ) : ?>
    <?php while ( have_rows( 'behind_the_image' ) ) : the_row(); ?>
           <div data-w-id="50eadee3-1406-6c5c-563f-0957896a13d2" style="opacity:0" class="div-block-5">

   <a id="hover-<?=$count?>" href="#"  class="link-block-4 _1 link-<?=$count?> w-inline-block ejemplo" style="position:relative;" data-audio="audio-<?=$count?>" data-img="<?= get_sub_field('image'); ?>"></a>

            <div class="header_highlights _2"><?= get_sub_field( 'title_image' ) ?></div>
            <style>.link-<?=$count?> {background-image:url('<?= get_sub_field( 'image' ); ?>')!important;}</style>
                    <audio id="audio-<?=$count?>">
              <source src="<?= get_sub_field('audio_hover'); ?>" type="audio/mpeg"></source>
              <source src="nav.ogg" type="audio/ogg"></source>
            </audio>
          </div>
          <?php $count++; ?>
            <?php endwhile; ?>
        <?php endif; ?>
        </div>
      </div>
      <div style="" class="c1"></div>
      </div>

1 回复 | 直到 6 年前

Juan Antonio 6 年前

我最终通过clip path和jquery解决了它。

JS:

jQuery(document).ready(function(){
  jQuery(".bimg").hover(function(){
    jQuery(".bimg").attr("style","clip-path: inset(0 0 0 0);");
    }, function(){
    jQuery(".bimg").attr("style","clip-path: inset(30% 60% 35% 12%);");
  });
});

CSS:

.bimg {
max-width:none;
position:absolute;
left:-60%;
padding:0px;
margin: 0%;
top:-650%;
}

HTML

<img src="<?= get_sub_field('image'); ?>"  width="1000px;" style="-webkit-clip-path: inset(30% 60% 35% 12%);clip-path: inset(30% 60% 35% 12%);" height="650px;" class="bimg">

图像显示不完美,我需要添加更多的CSS来准确地显示我想要的图像,我需要使它跨浏览器兼容和响应,但基本的想法在这里。