JQuery学习笔记实现图片翻转效果和TAB标签切换效果

　　所以自己也下了一个来学习，把之前写的几个JS代码都转换成JQuery，既能保证代码的清晰，也保证了代码的通用性，真是一举两得啊，由于是初学者，所以代码有许多的不足，还请大家多多指正：）

　　1、实现图片翻转效果，DW本身提供了这个功能，不过还是自己写的好用，呵呵。之前写的方式比较麻烦，代码也比较乱，用JQuery改造后可以使其更加清晰，核心代码如下：

　　JS代码

复制代码代码如下:

<!--

　　$(document).ready(function(){

　　$("#Nav li a img").mouseover(function(){

　　var m = $(this).attr("src");

　　if(m.indexOf("On") < 0){

　　var n = m.split(".");

　　var f = n[0] + "_On";

　　var nf = f + "." + n[1];

　　$(this).attr("src",nf);

　　}

　　});

　　$("#Nav li a img").mouseout(function(){

　　var m = $(this).attr("src");

　　if(m.indexOf("On") >= 0 && $(this).attr("class") != "active"){

　　var n = m.split(".");

　　var f = n[0].substring(0,n[0].length-3);

　　var nf = f + "." + n[1];

　　$(this).attr("src",nf);

　　}

　　});

　　//-->

　　</script>

　　HTML部分如下：

复制代码代码如下:

　　</ul>

　　</div>

　　这里需要注意的是未翻转的图片名为没有_On，部分，如Menu_Home.gif，而翻转图片的图片名带_On，如Menu_Home_On.gif

　　2、JQuery实现Tab标签写换效果，这个比较常用到，之前用JS写的代码依旧很乱，而且代码没有分离开，改造后部分代码如下：

　　JS代码：

复制代码代码如下:

<!--

　　$(document).ready(function(){

　　$("#MenuTabs div").mouseover(function(){

　　$(this).css("cursor","pointer");

　　var checkmenu = $(this).attr("id");

　　var checkcontent = checkmenu.replace("MenuTab","Content");

　　$("#MenuTabs div").each(function(){

　　if($(this).attr("id") == checkmenu){

　　$(this).attr("class","Tab_On");

　　}else{

　　$(this).attr("class","Tab_Off");

　　}

　　});

　　$("#Contents div").each(function(){

　　if($(this).attr("id") == checkcontent){

　　$(this).css("display","block");

　　}else{

　　$(this).css("display","none");

　　}

　　});

　　//-->

　　</script>

　　HTML代码：

复制代码代码如下:

　　</div>

　　</div>

　　CSS代码：

复制代码代码如下:

　　#Contents{

　　width:318px;

　　height:125px;

　　border-top:1px #d1d1d1 solid;

　　border-right:1px #d1d1d1 solid;

　　border-bottom:1px #d1d1d1 solid;

　　color:#d1d1d1;

　　}

　　.Tab_Off{

　　width:132px;

　　height:30px;

　　background-color:#ebebeb;

　　vertical-align:middle;

　　line-height:30px;

　　color:#373737;

　　border-bottom:1px #f6f6f6 solid;

　　border-top:1px #f6f6f6 solid;

　　border-left:1px #ededed solid;

　　border-right:1px #d1d1d1 solid;

　　}

　　.Tab_On{

　　width:132px;

　　height:30px;

　　background-color:#FFFFFF;

　　vertical-align:middle;

　　line-height:30px;

　　color:#696969;

　　border-top:1px #dbdbdb solid;

　　border-bottom:1px #dbdbdb solid;

　　border-left:1px #dbdbdb solid;

　　border-right:1px #FFFFFF solid;

　　}

　　最后附一张效果：

JQuery学习笔记实现图片翻转效果和TAB标签切换效果

　　以上就是今天的学习总结，这里因为测试的原因，我没有单独放到JS文件中，不过大家可以将以上代码放到同一个JS文件中去，这样可以方便调用，再有就是记得一定要引入JQuery框架文件啊...

教程首页更多教程

JQuery学习笔记 实现图片翻转效果和TAB标签切换效果

JQuery学习笔记实现图片翻转效果和TAB标签切换效果