2

我有一个滑出式标签，它在左侧完美运行，但是当我更改设置以将其定位在右侧时 - 标签图像消失并且内容保持打开状态。

在选项卡下滑出 DIV 我有这个 js

$('.slide-out-div').tabSlideOut({

    tabHandle: '.handle',                     //class of the element that will be your tab
    pathToTabImage: 'images/getstarted.gif',  //path to the image for the tab *required*
    imageHeight: '139px',                     //height of tab image *required*
    imageWidth: '27px',                       //width of tab image *required*    
    tabLocation: 'right',                     //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                               //speed of animation
    action: 'click',                          //options: 'click' or 'hover', action to trigger animation
    topPos: '0px',                            //position from the top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

然后有一个js文件有这些设置

(function($){

    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: false                   
        }, callerSettings||{});

我的 CSS

.slide-out-div {

    padding: 12px;
    width: 220px;
    height: 87px;
    border: 2px inset #1e5e70;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eefbfe;
    background-image: url(../images/stripe.png);
    background-repeat: repeat;  
    z-index:999;
}

我的网站是http://www.pagetree.co.uk

谢谢！

4

1 回答 1

2

没有办法以“正确”的方式做你所要求的。正确的方法是将滑出（在您的网站上称为 div float）设置为right: 0;并调整实际的 javascript 函数（不是您在此处列出的 js，这些是函数参数）。在这些参数中，您可能已经观察到没有rightPos:，这意味着它只能从左侧设置。

但是，如果您可以给floatdiv 一个宽度，您可以设法将其定位到屏幕的右边缘，以百分比为单位。在这种情况下，你会给浮动 div 这些属性width: 20%; left: 80%;。缺点：您的 div 的宽度将与屏幕大小成比例变化。

那是为了定位。然后它仍然无法工作，因为您的 js 计算选项卡从左侧滑出。我猜你在这里有这个插件：http ://www.building58.com/examples/tabSlideOut.html 。它的工作，但它不是很可扩展。

结论： 您需要为这样的函数编写自己的 javascript。 但是，既然可以使用 CSS:hover 选择器，为什么还要使用 javascript？

看看这个小提琴： http: //jsfiddle.net/TvGQ5/，它完全实现了你想要的（如果你真的想要点击而不是悬停，玩弄:target选择器。

如果您使用此解决方案，请不要忘记设置父元素（在您的网站上调用 div middle。overflow-x: hidden;此外，在您的所有页面上它都有效，但在您的主页上，您需要将浮动 div 移动到中间 div，而不是身体。

于 2013-06-06T22:26:05.293 回答