JS实现图片变换效果
最近一直在写JS+CSS+DIV的东西
下面介绍一下JS比较常用的一个功能
js核心代码:
<script language="javascript">//键盘监听事件document.onkeydown = onkey;//五个按钮循环var classIndex = 0 ;var classCount = 5;isselected = false;var url = null;function onkey(e){ev = window.event ? event : e;key = ev.which ? ev.which : ev.keyCode;switch(key){case 37://左 break;case 39://右 break;case 38: //上 if(classIndex>0){classIndex = classIndex -1;}else if(classIndex<=0){classIndex = classCount - 1;}changeImgEvt();isselected = false;break;case 40://下 if(classIndex<classCount-1){classIndex += 1;}else if(classIndex>=classCount-1){classIndex = 0 ;}changeImgEvt();isselected = false; break;case 13://选中链接地址if(url!=null&&url!=''){location.href = url;}else{location.href ="";} isselected = false;break; case 340:iPanel.back();break;default:isselected = false;break;}}function changeImgEvt(){var sectFlag = false;var c_index = classIndex + 1; for(var i=0;i<5;i++){$('menu'+(i+1)).style.visibility='hidden';}if(c_index==1){//选中第一个按钮$('contextImg').src='换成图片1地址';}else if(c_index==2){//选中第二个按钮$('contextImg').src='换成图片2地址'';}else if(c_index==3){//选中第三个按钮$('contextImg').src='换成图片3地址'';}else if(c_index==4){//选中第四个按钮$('contextImg').src='换成图片4地址'';}else if(c_index==5){//个选中第五个按钮$('contextImg').src='换成图片5地址'';}$('menu'+c_index).style.visibility='visible';sectFlag = true;if(sectFlag){goHrefPageEvt(c_index);}}function goHrefPageEvt(c_index){ if(c_index==1){//跳转url ="选中图片1将要跳转的地址"; }else if(c_index==2){//跳转url ="选中图片2将要跳转的地址";}else if(c_index==3){//休闲游戏url ="选中图片3将要跳转的地址";}else if(c_index==4){url = "选中图片4将要跳转的地址";}else if(c_index==5){url =""; } }function $(eleName){return document.getElementById(eleName);}</script>?
?
页面核心代码
<div style="align:center;width:1280px;height:720px;border:0px solid red;"><div style="width:1280px;height:720px;border:0px solid red;background-image: url('background.jpg');"><div style="text-align:left;margin-left:112px;"><table style="border:0px solid red;width:1100px;height:720px;"><tr><td style="border:0px solid red;width:310px;"><div style="margin-top:58px;">“<img id="menu1" src="1.jpg"/></div><div style="margin-top:17px;"><img id="menu2" src="2.jpg" style="visibility: hidden;"/></div><div style="margin-top:17px;"><img id="menu3" src="3.jpg" style="visibility: hidden;"/></div><div style="margin-top:17px;"><img id="menu4" src="4.jpg" style="visibility: hidden;"/></div><div style="margin-top:17px;"><img id="menu5" src="5.jpg" style="visibility: hidden;"/></div></td><td style="border:0px solid red;vertical-align: top;"> <div style="margin-left:60px;margin-top:88px;"> <marquee border="0" direction="left" height="95px" width="660px" scrollDelay="50" scrollamount="3" style="padding: 0px;"> <font size="9px" color="white">滚动文字</font> </marquee> </div><div style="margin-left:60px;margin-top:10px;"><img id="contextImg" src="1.jpg" /><div> </td></tr></table></div></div></div>?