【问题标题】:Swiping effect on background Images背景图像上的滑动效果
【发布时间】:2013-07-12 20:14:42
【问题描述】:

您好,我想在背景图像之间重现一种滑块效果,就像网站 http://www.moveline.com/ 在主页上所做的那样。

标题下方的示例部分:“为下一步行动制定详细信息”。

我看他们使用jQuery,RequireJS(2.1.4)的代码

我尝试隔离产生这种效果的代码,但 JavaScript 代码已被压缩,这使得它很难理解(而且它们使用主干)。

知道如何借助一些插件在 jQuery 中很好地重现这一点吗?

谢谢

【问题讨论】:

  • 访问 www.jqueryui.com 并寻找插件。有人可能已经这样做了,您可以将他们的所作所为作为起点。 (并节省大量时间)
  • 是的蒂姆,如果你能推荐我任何插件吗? (我已经看过了)
  • 背景动画效果不需要任何插件。它使用简单的 css 转换,如下所示:jsfiddle.net/32a4d
  • 是的,我也在研究箭头动画

标签: javascript jquery css


【解决方案1】:

这是他们在他们的网站http://jsfiddle.net/y29kR/2/ 上所做的几乎所有事情的工作小提琴

HTML:

<div class="items">
    <div class="menu-item" data-look-at="0 0">item1</div>
    <div class="menu-item" data-look-at="-40px -70px">item2</div>
    <div class="menu-item" data-look-at="-120px -30px">item3</div>
</div>
<div class="menu-content"></div>

背景位置上带有 css 过渡的 CSS

.items {
    float:left;
}
.menu-item {
    padding: 15px;
    color: #333;
    border-bottom: 1px solid #ccc;
    width: 70px;
}

.menu-content {
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/350x350");
    background-position: center center;
    float:left;
    -webkit-transition: background-position 600ms ease;
    -moz-transition: background-position 600ms ease;
    -o-transition: background-position 600ms ease;
}

我正在使用 jQuery 的 .css 方法来检测悬停事件以产生(几乎)想要的效果:

jQuery(document).ready(function() {
    $('.menu-item').hover(function(e) {
        var target = $(e.target),
            newPos = target.data("look-at");
        $('.menu-content').css({'background-position': newPos}); 
    });
    $('.items').mouseleave(function(e) {  
        $('.menu-content').css({'background-position': 'center center'}); 
    });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多