用JS或者Jquery,使用左右方向键切换(图片)按钮 ,效果就是按钮稍微向上浮...

发布网友 发布时间：2022-04-29 15:53

我来回答

共2个回答

热心网友 时间：2022-04-20 02:42

html如下：

<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>

CSS如下：
<style type="text/css">
#menu{overflow:hidden;}

#menu li{float:left;margin-right:10px;width:80px;height:30px;line-height:30px;text-align:center;}

#menu li.current{margin-top:-10px;}

</style>

JS如下：
<script type="text/javascript">
$(function(){

var len = $("#menu > li").length;
var index = 0;
$(document).keydown(function(e){

if(e.keyCode == 37){
if(index == 0){
index=len-1;
}else{
index--;
}
$("#menu > li").eq(index).addClass("current").siblings("li").removeClass("current");

}else if(e.keyCode == 39){

if(index == len-1){
index=0;
}else{
index++;
}
$("#menu > li").eq(index).addClass("current").siblings("li").removeClass("current");
}
});
});
</script>

热心网友 时间：2022-04-20 04:00

<style>
li{
border:1px solid #ABC;
display:block;
width:100px;
height:50px;
float:left;
margin:10px;
text-align:center;
}

li.curr{
margin-top: -2px;
}
</style>
<ul>
<li class="curr">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$(document).keydown(function(e){
var code;
if(!e) var e=window.event;
if(e.keyCode) {
code=e.keyCode;
}else if(e.which){
code = e.which;
}

if(code == 37){
movePrev();
}else if(code == 39){
moveNext();
}
});

var movePrev = function(){
var index = $("li.curr").prevAll().length;
if(index == 0) return false;
else $("li").removeClass('curr').eq(index-1).addClass('curr');
}

var moveNext = function(){
var index = $("li.curr").prevAll().length;
if(index == $("li").length-1) return false;
else $("li").removeClass('curr').eq(index+1).addClass('curr');
}
});
</script>