0

私はtumblrに何かを設定しようとしているので、マウスが上に置かれたときに基本的にある要素を別の要素に変更することができます.テキスト ボックスから移動すると、画像に戻ります。

理想的には、画像の上に 1 つの単語が表示されるようにしたいのですが、画像の上にカーソルを合わせると、その 1 つの単語が消え、残りのテキストが表示されます。

ここに私がしたいことの例があります

私は何時間も探していましたが、自分がやっているようなものを見つけることができませんでした. コードを見たい場合は、ここから入手しました。

多くのコードがあり、正直なところ、自分が何をしているのかわかりません。例からコードを抜き出して自分のコードに移植しようとしましたが、多すぎました。

与えられた例で私が達成しようとしていることを誰かが知っている場合は、jfiddle に設定して、私が何をしようとしているのかを確認できますか? ご協力ありがとう御座います！

4

2 に答える 2

0

jQuery hoverとanimateで実装できます。

これが私のサンプルコードです。

html:

<img id="bg" src="http://www.stockfreeimages.com/White-and-grey-clouds-thumb10225136.jpg"/>       
<div class="title box">title</div>
<div class="content box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>

脚本：

$("#bg").hover(function(){
 $(".title").stop().animate({left:"300px",opacity:0.0},1000,function(){$(this).hide()});
    $(".content").fadeIn();
},function(){
    $(".title").stop().show().animate({left:"100px",opacity:1.0},1000)
    $(".content").fadeOut();
});

CSS:

.box{
    position:absolute;
    left:100px;
    color:white;
    z-index:1;
    pointer-events:none;
}
.title{
    top:70px;
}
.content{
    top:100px;
    width:300px;
    display:none;
}
于 2013-10-16T03:50:42.287 に答える
0

これは、jQuery 関数に組み込まれた期間コントロールの例です。

JSFiddle の例を次に示します。 ここをクリック

HTML:

<div class="image-holder">
    <div class="slide-in">Bob Marley</div>
    <div class="fade-in">Open your eyes, look within. Are you satisfied with the life you're living?</div>

CSS:

.image-holder {
    position: absolute;
    width: 350px;
    height: 400px;
    top: 20px;
    left: 20px;
    background-image: url("http://samuiartsandcrafts.com/images/watermarked/1/thumbnails/1/400/bob-marley-pop-art-e.jpg");
    background-position: center;
    background-size: cover;
}
.slide-in, .fade-in {
    position: absolute;
    font-family:"Courier", sans-serif;  
}
.slide-in {
    opacity: 1;
    left: 10px;
    top: 0;
    font-size: 22px;
}
.fade-in {
    opacity: 0;
    left: 0px;
    padding: 10px;
    bottom: 10px;
    width: 350px;
    background: rgba(0, 0, 0, .5);
    font-size: 18px;
    color: #FFFFFF;
}

jQuery:

$('.image-holder').hover(function () {
    $('.fade-in', this).stop().animate( {
        opacity: 1});
    $('.slide-in', this).stop().animate({
        opacity: 0,
        left: "120px",
    }, 1000);
}, function() {
    $('.fade-in', this).stop().animate( {
        opacity: 0});
    $('.slide-in', this).stop().animate({
        opacity: 1,
        left: "10px",
    }, 1000);
});
于 2013-10-16T06:29:11.967 に答える