Question

我是jquery的新手，我想在我的首页上加入一些设计。但我无法找到任何好的资源或示例我该怎么做。

我有一系列按顺序拍摄的图像。图像就像一个弹跳球。现在我有一个链接或锚标记。我想要的是当用户正在移动鼠标时。如果我有像ball1.jpg这样的图像，那么图像序列将增加意义。下一个是ball2.jpg等等。如果鼠标悬停在左边，它将减少到第一个图像，即ball1.jpg。

我有这个简单的代码。

<div id="image_container">
    <!-- should be replace if hovering -->       
    <img src="/sample_layout/images/ball1.jpg" />  <!-- this is the default image -->
    <img src="/sample_layout/images/ball2.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball3.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball4.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball5.jpg" />  <!-- this will replace if hover -->
</div>

<ul>
      <li><a href="#" class="dropdown">HOME</a></li><!-- This will be the link I need to hover -->
      <li class="sublinks">
          <a href="#">Link 1</a>        
      </li> 
</ul>

我想在这里做的是链接示例

http://www.dior.com/couture/home/en_gb

那是所有人。你能给我一些参考我怎么能这样做？

Answer 1

您可以使用mousemove事件来计算百分比并决定要显示的图像。此示例使用颜色而不是图像，您可以更改为图像。 http://jsfiddle.net/h84Pj/

var screenWidth;
var colors = ['red', 'green', 'yellow'];

function onMouseMove(e) {
    var x = e.pageX;
    var color = colors[parseInt(x / screenWidth * colors.length)];
    $(document.body).css('background-color', color);
}

function onResize() {
    screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

Answer 2

我希望也这样做。我有29个单独的图像，大约在250KB到350KB之间。

以下是检查进度的jsfiddle链接。

var screenWidth;
var imgblock = ['https://cdn.shopify.com/s/files/1/1835/0713/files/v1.jpg', 
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v2.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v3.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v4.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v5.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v6.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v7.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v8.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v9.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v10.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v11.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v12.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v13.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v14.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v15.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v16.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v17.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v18.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v19.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v20.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v21.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v22.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v23.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v24.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v25.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v26.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v27.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v28.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v29.jpg'];

function onMouseMove(e) {
var x = e.pageX;
var theimg = imgblock[parseInt(x / screenWidth * imgblock.length)];
$('.verve-seq').css("background-image", "url('" + theimg + "')");
}

function onResize() {
screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

我有一个主要问题。看起来每个img数组都是单独加载的，这会将背景移除一毫秒，当你从左到右鼠标悬停时，它会快速闪现白色，反之亦然。（不建议癫痫患者使用：/）

我在the north face website

上找到了这个概念

使用jquery向左/向右悬停时如何为图像序列设置动画？

2 个答案: