0

ホバー時にのみ表示されるが、画像内に配置される「ピンタレストのような」ボタンを作成する方法は?

もちろんjQueryを使っています。

4

3 に答える 3

3

私はこれがまさにあなたが探しているものだと信じています：

http://joshkoberstein.com/blog/2012/09/jquery-pinterest-hover-button

(function($){
     $(window).load(function(){

        //the URL to be shared
        $PinItURL = $(location).attr('href');

        //for each img tag with 'pinit' class
        $('.pinit').each(function(){

            //the media to be shared - full image url
            $media = $(this).prop('src');
            //the description of media - use the image title
            $description = $(this).attr("title");

            //place 'pin it' button after the image in the DOM
            $(this).after(getButtonHTML($media, $description));

            //define the hover target as the image
            $target = $(this);
            //define pinit as the button we just placed after the image
            $pinit = $(this).next(".pinit-wrapper");

            //calculate the left position for the pinit button
            $targetX = $(this).position().left + parseInt($target.css("padding-left")) + parseInt($target.css("margin-left"));
            //calculate the top position for the pinit button
            $targetY = $(this).position().top + parseInt($target.css("padding-top")) + parseInt($target.css("margin-top"));

            //place the pinit button as an overlay on top of image
            $pinit.css({"top":$targetY+20,"left":$targetX+20});

        });

        //loadin the pinterest js to render the actual button iframe
        $.ajax({    url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true}).done(function(){

            //load complete... bind the handlers...

            //on image mouseenter, show the pinit button
            $('.pinit').bind('mouseenter', function(){
                $(this).next('.pinit-wrapper').stop().fadeTo(200, 1.0, function(){ $(this).show(); });
            });
            //on image mouseleave, hide the pinit button
            $('.pinit').bind('mouseleave', function(){
                $(this).next('.pinit-wrapper').stop().fadeTo(200, 0.0, function(){ $(this).hide(); });
            });

            //on pinit button mouseenter, do not fade out
            $('.pinit-wrapper').bind('mouseenter', function(){
                $(this).stop().stop().fadeTo(200, 1.0, function(){ $(this).show(); });
            });

        });

    });
})(jQuery);

//returns pinit link wrapped in a hidden div
function getButtonHTML($media, $description){
    $HTML = '<div class="pinit-wrapper" style="position:absolute;display:none;z-index:9999;cursor:pointer;"><a href="http://pinterest.com/pin/create/button/?url='+$PinItURL+'&media='+$media+'&description='+$description+'" class="pin-it-button" count-layout="none">Pin It</a></div>';
    return $HTML;
}
于 2012-09-11T05:05:38.147 に答える
2

ボタンをコンテナdiv内に配置し、デフォルトで非表示にします。次に、コンテナにカーソルを合わせると、内側のボタンが表示されます。

コンテナは相対的な位置にある必要があり、フローティング効果を得るにはボタンが絶対的である必要があります。コンテナにあるものによっては、div.buttonにz-indexプロパティを追加する必要がある場合があります

これは次のようになります（明らかにjQueryを含みます）：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    $('div.container').on({
        hover: 
          function() {
            var buttonDiv = $(this).children('div.button');
            buttonDiv.toggle();
          }
    });
});
</script>

<style>
div.container {
    position: relative;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
}
div.button {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 20px;
    height: 10px;
    display: none;
    border: 1px solid #000;
}
</style>
</head>

<body>
<div class="container">
    <div class="button">button text</div>
</div>
</body>
</html>

ここに行く、jsfiddleに投げた：http：//jsfiddle.net/5txv4/1/

于 2012-06-28T19:15:51.460 に答える
2

編集：フィドルを整えました。ピンタレストのように見えます。

これがマフィドルです（実際にはいじくり回しです）-> http://tinkerbin.com/Tr7ZZTsx

jquery、javascript、または必要なものは何もありません。

フィドルははるかに印象的ですが、機能を実現するために必要なのはこれだけです。

HTML:

<div class="box">

    <ul class="btn-list">
        <li><button>Button 1</button></li>
        <li><button>Button 2</button></li>
        <li><button>Button 3</button></li>
    </ul>

    ... 

</div>​

CSS:

.box {
    width: 200px;
    height: 300px;
}

.btn-list {
    display: none;
}

.box:hover .btn-list {
    display: block
}
于 2012-06-29T02:00:52.293 に答える