テクニカルノート

スライドショーのプラグインとして、とても使い勝手のいい、Master Sliderを使っているのですが、左右にスライドさせるためのボタンが大きくて、肝心のバナーを隠してしまっているので、マウスポインターが上に来た時だけ、常時させるようにする方法。

CSSや、JQueryで、hoverを使うと、うまく表示非表示を切り替えられなかったので、マウスポインタの座標と、スライダーの座標をチェックして、範囲内にあれば、ボタンを表示、範囲外なら非表示となるようにしています。

jQuery(function($) {
    $(document).ready(function () {
        var show = 0;
        $(window).mousemove(
            function(e){
                var offset = $(".ms-container").offset();
                var mswidth = $(".ms-container").width();
                var msheight = $(".ms-container").height();
                console.log('top: ' + offset.left + mswidth );
                console.log('top: ' +  e.pageX );
                if(offset.left  e.pageX
                        && offset.top  e.pageY
                ){
                    $(".ms-nav-next ,  .ms-nav-prev ").show();
                }else{
                    $(".ms-nav-next ,  .ms-nav-prev ").hide();

                }
            }
        );
    });
});