我在一个非常简单的网站上安装并运行了jquery的缓动插件,可以在这里看到:http://harrisonfjord.com/folio/
我的 anchor 链接代码(调用jquery函数将窗口滑动到按下的div)是:
<a href="#" style="" onclick="Animate2id('#c1'); return false" rel="Greetings"><img src="img/btn1.jpg" /></a>
<a href="#" onmouseover="" onclick="Animate2id('#c2'); return false" rel="About Us"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c3'); return false" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c4'); return false" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c5'); return false" rel="Panadol"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c6'); return false" rel="Asics"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c7'); return false" rel="Tooheys"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c8'); return false" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c9'); return false" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
<span style="font-size:25px" id="display"></span>
JavaScript代码如下:
$(window).keyup(function(e){
if(e.keyCode == 39){
//magical code goes here
}
return false;
});
function Animate2id(id,ease){ //the id to animate, the easing type
var currentPage=id;
var animSpeed=2000; //set animation speed
var $container=$("#container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
我尝试为 Animate2id 函数设置一个变量,该变量获取您正在查看的当前 div,然后可以使用该变量转到下一个或上一个 div(但甚至不知道我是否'我已经正确地做到了...)。
显然对 jquery/javascript 还很陌生,所以非常感谢任何帮助。
最佳答案
首先,我会修改你的 HTML,点击处理程序应该放在 JavaScript 中。使用 href
属性指向相关的 div:
<div id="link-container">
<a href="#c1" style="" rel="Greetings"><img src="img/btn1.jpg" /></a>
<a href="#c2" rel="About Us"><img src="img/btn1.jpg" /></a>
<a href="#c3" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
<a href="#c4" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
<a href="#c5" rel="Panadol"><img src="img/btn1.jpg" /></a>
<a href="#c6" rel="Asics"><img src="img/btn1.jpg" /></a>
<a href="#c7" rel="Tooheys"><img src="img/btn1.jpg" /></a>
<a href="#c8" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
<a href="#c9" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
<span style="font-size:25px" id="display"></span>
</div>
然后在 jQuery 中,绑定(bind)所有处理程序:
$("#link-container A").click(function(e) {
e.preventDefault();
Animate2id($(this).attr("href"));
});
然后在Animate2id
中在当前div
上添加一个类:
function Animate2id(id, ease){ //the id to animate, the easing type
$(".current").removeClass("current");
$(id).addClass("current");
// rest of this functions' code ...
}
现在类位于选定的 div
上,您可以计算出按下左/右光标时需要进入的方向:
$(window).keyup(function(e){
if (e.which == 37) { // left cursor
var $prevDiv = $(".current").prev("div");
Animate2id($prevDiv.attr("id"))
}
if (e.which == 39) { // right cursor
var $nextDiv = $(".current").next("div");
Animate2id($nextDiv.attr("id"))
}
});
关于jquery - 使用键盘控制 jQuery Easing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8446050/