每个li不同的动作

我想构建自己的小（完整页面的jQuery滑块），我试图找出如何做导航，但我似乎无法修复它。每个li不同的动作

我有一个变量，它存储窗口的当前宽度并在需要时调整它的大小。

var lastWidth = $(window).width(); 
$(window).resize(function(){ 
    if($(window).width()!=lastWidth){ 

     //execute code. 
    } 
});

我的导航是一个简单的3项列表。

<h1>Home</h1> 
<ul> 
    <li>Portfolio</li> 
    <li>Blog</li> 
    <li>Contact</li> 
</ul> 

<div id="pageslider"> 
    <div id="home">Home content</div> 
    <div id="portfolio">Portfolio content</div> 
    <div id="blog">Blog content</div> 
    <div id="contact">Contact content</div> 
<div>

这是给出正确的价值我#sliderpage代码

$("#pageslider").css({"min-width": (lastWidth * 4)});

所以我的想法是这样的，我做我在其中存储lastWidth * 1变量，* 2，* 3.

var scrollWidth = [(-lastWidth * 1),-lastWidth * 2,-lastWidth * 3]

然后，如果我可以在变量与所述第一值链接所述第一立我有余量的所需的适量。

但很明显我无法弄清楚如何做到这一点，而这感觉实在令人费解

目前我使用此代码为我的点击功能：

$('li').click(function(){ 
    $('li').each(function(i) { 
     $('body').find('#pageslider').animate({ 
     "margin-left":scrollWidth[i]},1800, 
     'easeInOutQuint'); 
    }); 
});

这显然是行不通的，它确实会对点击做出反应，但它并不关心LI。它还运行scrollWidth中的所有值。

这是我目前开设的一个小的jsfiddle：http://jsfiddle.net/L29pq/49/

来源

2013-06-21 Peter Boomsma

你的意思是在'li's上运行并重新定义它们的'margin'？ – Cherniv

我的意思是，第一个LI应该得到scrollWidth变量的第一个值，第二个LI应该得到第二个值，依此类推。 –

哦，我看到你的更新 – Cherniv

如果你总是想第一个列表项是指滑块的第二宽度，你可以参考指数为乘数：

$('ul li').click(function(){ 
    $('#pageslider').animate({ 
    "margin-left":lastWidth*(1 + $('ul li').index($(this)))},1800, 
    'easeInOutQuint'); 
});

，如果你给UI元素的ID，这样你可以使用$（ '＃UL李listid'），而不是$（ 'UL礼'），这将成为更加明确

说明：

#('ul#listid li')

将选择与ID listid的UL对象的所有子李对象，将它们作为一个jQuery对象。

该对象的索引函数与javascript Array.indexOf函数非常相似。单击处理程序内调用

#('ul#listid li').index($(this))

将返回被点击（$（本））由选择返回的对象内的里的从零开始的索引。

添加一个使索引以一为基础并乘以lastWidth以获得所需的边距偏移量。

来源

2013-06-21 14:20:20 Joe

这工程出色！正是我想要的。但我不明白它为什么起作用。这是锻炼的一点点）。 click功能将lastWidth乘以1标准。但是这部分是如何工作的？ $（'ul li'）。index（$（this）） –

我将编辑答案以添加更多解释。 – Joe

非常好！感谢您的信息：）。 –

我只是给你的李元素一个id，然后用它来决定。

<li id="link1"><a href="" class="portfolio">portfolio</a> 
</li> 
<li id="link2"><a href="">blogs</a> 
</li> 
<li id="link3"><a href="">contact</a> 
</li> 

$('li').click(function() { 
    var num = $(this).attr("id"); 
    num = num.charAt(num.length-1); 
    $('body').find('#pageslider').animate({ 
    "margin-left":scrollWidth[num]},1800); 
});

这里是它的小提琴，但我不认为它的工作原理，因为在小提琴窗口宽度的非常好。你可以看到它正在改变它应该如何。 Fiddle

来源

2013-06-21 14:29:46 chockleyc

每个li不同的动作

回答

相关问题