如何掩盖两个半图像并悬停显示完整的图像和一个不错的动画 [英] How to mask two half images and on hover show a full image with an nice animation

问题描述

我不知道如何用jQuery来做以下事情。
我创建了一个带有两个部分（红色/黑色）的页面英雄：

我应该怎样做这项工作？

  var redSection = $（'＃red'）; 
 var blackSection = $（'＃black'）; 
 $ b redSection.on（'mouseover'，function（）{
 //做某事 - 覆盖另一部分
}）; 
  

HTML标记如下：

 < section id =hero> 
< figure id =urbandesign> 
< a href =＃target =_ blank> 
< img src =images / urbandesign.jpgalt =Urban Design> 
< / a> 
< / figure><！ - 结束图 - > 
 
<图片id =摄影> 
< a href = ＃target =_ blank> 
< img src =images / photography.jpgalt =摄影> 
< / a> 
< / figure><！ - 完成图 - > 
 
< / section><！ -  End section＃hero  - > 
  

和CSS：

  #hero {
 height：480px; / *默认500px * / 
 padding：0; 
职位：亲属; 
 overflow：hidden; 
 z-index：1; 
 background：url（../ images / hero.jpg）no-repeat center; / *删除* / 
 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
 
 #hero figure {
 position：absolute; 
 top：0; 
背景：#FFF; 
} 
 
 #hero img {
 width：100％; 
最大宽度：无; 
职位：亲属; 
不透明度：0.4; 
} 
  

最终结果我想用图像替换红色和黑色部分。
注意您的回应！谢谢。

解决方案

您可以使用 svg 的 path 为形状， pattern 为 image 用于处理 mouseover 和 mouseleave 事件。

  var hero = document.getElementById（'hero'）; var animLeft = document.getElementById（'anim-left'）; var animRight = document.getElementById（'anim-right'）; hero。 addEventListener（'mouseover'，function（e）{（e.target.id =='left'）？animRight.beginElement（）：animLeft.beginElement（）;}）hero.addEventListener（'mouseleave'，function（e） {（e.target.id =='left'）？animRight.endElement（）：animLeft.endElement（）;}） 

 < svg id =herowidth =600 height =200viewBox =0 0 600 200> < DEFS> < pattern id =image-leftpatternUnits =userSpaceOnUsewidth =600height =200viewBox =0 0 600 200> < image xlink：href =http://dummyimage.com/600x200/40000c/000width =600height =200/> < /图案> < pattern id =image-rightpatternUnits =userSpaceOnUsewidth =600height =200viewBox =0 0 600 200> < image xlink：href =http://dummyimage.com/600x200/002a33/fffwidth =600height =200/> < /图案> < / DEFS> < a xlink：href =＃> < path id =rightd =M0,0 h600 v200 h-600zfill =url（＃image-right）/> < / A> < a xlink：href =＃> < path id =leftd =M0,0 h350 l-100,200 h-250zfill =url（＃image-left）/> < animate id =anim-leftxlink：href =＃leftattributeType =XMLattributeName =dfrom =M0,0 h350 l-100,200 h-250zto =M0,0 h0 l -100,200 h0zdur =1begin =indefiniterepeatCount =1fill =freeze/> < animate id =anim-rightxlink：href =＃leftattributeType =XMLattributeName =dfrom =M0,0 h350 l-100,200 h-250zto =M0,0 h700 l -100,200 h-600zdur =1begin =indefiniterepeatCount =1fill =freeze/> < / svg>  

I doesn’t know how to do the following with jQuery. I have created a page hero with two sections (red/black):

What I want is, when hovering over the black one for example, it will expand over the red section, so you get a full black box. The same result I want of course for the red section:

How should I make this work?

var redSection = $('#red');
var blackSection = $('#black');

redSection.on('mouseover', function() { 
    // Do something - overlay the other section
});

The HTML markup is as follow:

<section id="hero">
        <figure id="urbandesign">
            <a href="#" target="_blank">
                <img src="images/urbandesign.jpg" alt="Urban Design">
            </a>
        </figure><!-- End figure -->

        <figure id="photography">
            <a href="#" target="_blank">
                <img src="images/photography.jpg" alt="Photography">
            </a>
        </figure><!-- End figure -->

    </section><!-- End section#hero -->

And the CSS:

#hero {
    height: 480px; /* Default 500px */
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: url(../images/hero.jpg) no-repeat center; /* remove */

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

#hero figure {
    position: absolute;
    top: 0;
    background: #FFF;
}

#hero img {
    width: 100%;
    max-width: none;
    position: relative;
    opacity: 0.4;
}

The final result I want to replace the red and black section with images. Look out to your response! Thank you.

解决方案

You could do this using svg's path for the shape, pattern for the image and a little bit of JavaScript for handling the mouseover and mouseleave events.

var hero = document.getElementById('hero');
var animLeft = document.getElementById('anim-left');
var animRight = document.getElementById('anim-right');
hero.addEventListener('mouseover', function(e) {
  (e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement();
})
hero.addEventListener('mouseleave', function(e) {
  (e.target.id == 'left') ? animRight.endElement() : animLeft.endElement();
})

<svg id="hero" width="600" height="200" viewBox="0 0 600 200">
  <defs>
    <pattern id="image-left" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
      <image xlink:href="http://dummyimage.com/600x200/40000c/000" width="600" height="200" />
    </pattern>
    <pattern id="image-right" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
      <image xlink:href="http://dummyimage.com/600x200/002a33/fff" width="600" height="200" />
    </pattern>
  </defs>
  <a xlink:href="#">
    <path id="right" d="M0,0 h600 v200 h-600z" fill="url(#image-right)" />
  </a>
  <a xlink:href="#">
    <path id="left" d="M0,0 h350 l-100,200 h-250z" fill="url(#image-left)" />
    <animate id="anim-left" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h0 l-100,200 h0z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
    <animate id="anim-right" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h700 l-100,200 h-600z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />

  </a>
</svg>

这篇关于如何掩盖两个半图像并悬停显示完整的图像和一个不错的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！