1

我正在尝试根据此设计开发带有图像工具提示的幻灯片库：

我要实施的设计

我需要开发的是一个由两个按钮控制的滑块，每次按下一个按钮时，滑块的内容必须移动一个滑块的宽度或该侧左侧内容的宽度，以较小者为准。鼠标在滑块内输入图像后，必须将全尺寸版本显示为工具提示。

到目前为止，这是我的解决方案的一个小提琴，我遇到的问题是不完全适合视图的图像加上左侧的隐藏区域被移动到新行。您可以通过单击“显示内容大小”按钮看到问题，内容元素的宽度将等于容器元素的宽度+内容元素的margin-left。

如果您可以建议一种将内容向右移动的算法，则可以加分，我已经想出了一个 T （或者我认为，无论如何），但是向右需要更多的工作（它不会检查是否已到达内容的末尾）。更新：在解决另一个问题之前，我似乎无法实现正确的向右移动，这是我想出的算法，如果我无法测量“左侧显示”的实际宽度，我将无法测量内容元素。

在此处输入图像描述

4

2 回答 2

2

我创造了一些你可能喜欢的东西：

画廊演示

  • 默认情况下，画廊不会滚动整个画廊宽度（您可以更改它）导致右侧的一些最初截断的图像，在“完整”幻灯片之后会再次导致截断，就在我们画廊的另一侧. 你有这个原因的beKind变量。随心所欲地调整它。
  • 如果没有足够的内容使画廊可用，它会隐藏按钮。
  • 图库计算要滚动的剩余空间。
  • 一旦滑块到达终点 - 左/右按钮使画廊跳到开始/结束，因此始终可用。（有一个按钮似乎有点奇怪......但这什么都不对？;））
  • 工具提示内置了一个悬停意图，如果我们的用户无意中悬停在我们的画廊上，他们不会惹恼他们：（如果悬停注册超过 120 毫秒，工具提示会淡入。公平的时机。我喜欢它。）
  • 正如您在评论中指出的那样，工具提示现在不会离开屏幕。

问：

// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){  
    var galW = $('#gallery').outerWidth(true),
        beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
        sumW = 0;       
    $('#slider img').each(function(){
        sumW += $(this).outerWidth(true);
    }); 
    $('#slider').width(sumW);
    if(sumW <= galW){ $('.gal_btn').remove(); } 
    function anim(dir){
        var sliderPos = Math.abs($('#slider').position().left),
            rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
            movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
        if( movePx <= 10){
            movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
            dir = '';
        }
        $('#slider').stop(1).animate({left: dir+''+movePx },1000);
    }   
    $('.gal_btn').on('click', function(){
        var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
    }); 
});

和工具提示脚本：

// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
    var m = {x: e.pageX, y: e.pageY};
    if( m.x <= ttW2 ){
       m.x = ttW2;
    }else if( m.x >= (winW-ttW2) ){
       m.x = winW-ttW2;
    }
    $tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
    $clon = $(this).clone();
    var t = setTimeout(function() {
        $tt.empty().append( $clon ).stop().fadeTo(300,1);
    },120);
    $(this).data('timeout', t); 
},function(){
    $tt.stop().fadeTo(300,0,function(){
        $(this).hide();  
    });
    clearTimeout($(this).data('timeout'));
});

HTML

（将#tooltipdiv 放在body标签之后）

<div id="tooltip"></div>

<div id="gallery_container">
    <div id="gallery"> 
        <div id="slider">
            <img src="" alt="" />
            <img src="" alt="" />
        </div> 
    </div>
    <div class="gal_left gal_btn">&#9664;</div>
    <div class="gal_right gal_btn">&#9654;</div>
</div>

CSS：

/*GALLERY*/
#gallery_container{
    position:relative;
    margin:0 auto;
    width:600px;
    padding:0 30px; /*for the buttons */
    background:#eee;
    border-radius:5px;
    box-shadow: 0 2px 3px #888;
}
#gallery{
    position:relative;
    height:100px;
    width:600px;
    overflow:hidden;
}
#slider{
    position:absolute;
    left:0px;
    height:100px;
}
#slider img{
    height:100.999%; /* fixes some MOZ image resize inconsistencies */
    float:left;
    cursor:pointer;
    border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
    position:absolute;
    top:0px;
    width:30px; /*the container padding */
    height:40px;
    padding:30px 0;
    text-align:center;
    font-size:30px;
    cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */

/* TOOLTIP ADDON */
#tooltip{
    position:absolute;
    z-index:100;
    width:300px;
    padding:10px;
    background:#fff;
    background: rgba(255,255,255,0.3);
    box-shadow:0px 3px 6px -2px #111;
    display:none;
}
#tooltip *{
    width:100%;
    vertical-align:middle;
}
/* end TOOLTIP ADDON */

希望你会喜欢它，并且你学到了一些有用的UI 设计技巧。

顺便说一句，如果您想填充您的ALT属性（搜索引擎喜欢它！），您还可以获取该文本并使其显示在工具提示中，如下所示！：

工具提示内带有文本的演示

快乐编码。

于 2012-06-20T21:50:52.573 回答
1

我不知道我是否正确理解你的问题。如果您将宽度设置为 .scroll-content div 足够宽，则图像不会转到“下一行”。所以一个解决方案是用css设置一个宽度。如果没有，您可以使用 jquery 确定所有图像的总宽度并将其提供给 .scroll-content div。使用 jQuery 计算子元素的总宽度

于 2012-06-19T23:01:31.953 回答