如何掩盖两个半图像并悬停显示完整的图像和一个不错的动画 [英] 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
为 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屋!