jquery实现一组TAG标签鼠标滑过或者点击轮换特效
一、鼠标点击特效<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#l1").click(function(){
$("#f1").css("display", "block");
$("#f2").css("display", "none");
$("#f3").css("display", "none");
$("#f4").css("display", "none");
});
$("#l2").click(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "block");
$("#f3").css("display", "none");
$("#f4").css("display", "none");
});
$("#l3").click(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "none");
$("#f3").css("display", "block");
$("#f4").css("display", "none");
});
$("#l4").click(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "none");
$("#f3").css("display", "none");
$("#f4").css("display", "block");
});
});
</script>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
background: red;
color: #ffffff;
}
ul li:hover{
background: blue;
}
#f1{
width: 400px;
display: block;
}
#f2{
width: 400px;
display: none;
}
#f3{
width: 400px;
display: none;
}
#f4{
width: 400px;
display: none;
}
</style>
</head>
<body>
<ul>
<li id="l1">菜单一</li>
<li id="l2">菜单二</li>
<li id="l3">菜单三</li>
<li id="l4">菜单四</li>
</ul>
<div id="f1">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f2">
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
</div>
<div id="f3">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f4">
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
</div>
</body>
</html>这组代码使用click点击事件实现了点击TAG菜单实现轮换内容，如下图：
当鼠标点击菜单一、二、三、四会呈现对应的内容。
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#l1").mouseover(function(){
$("#f1").css("display", "block");
$("#f2").css("display", "none");
$("#f3").css("display", "none");
$("#f4").css("display", "none");
});
$("#l2").mouseover(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "block");
$("#f3").css("display", "none");
$("#f4").css("display", "none");
});
$("#l3").mouseover(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "none");
$("#f3").css("display", "block");
$("#f4").css("display", "none");
});
$("#l4").mouseover(function(){
$("#f1").css("display", "none");
$("#f2").css("display", "none");
$("#f3").css("display", "none");
$("#f4").css("display", "block");
});
});
</script>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
background: red;
color: #ffffff;
}
ul li:hover{
background: blue;
}
#f1{
width: 400px;
display: block;
}
#f2{
width: 400px;
display: none;
}
#f3{
width: 400px;
display: none;
}
#f4{
width: 400px;
display: none;
}
</style>
</head>
<body>
<ul>
<li id="l1">菜单一</li>
<li id="l2">菜单二</li>
<li id="l3">菜单三</li>
<li id="l4">菜单四</li>
</ul>
<div id="f1">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f2">
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
</div>
<div id="f3">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f4">
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
</div>
</body>
</html>这个代码实现了鼠标滑过菜单呈现不同的内容，使用了鼠标滑过事件mouseover，自己可以做测试。
我们还可以加以改进，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#l1").mouseover(function(){
$("#f1").css("display", "block");
$("#l1").css("background", "blue");
$("#f2").css("display", "none");
$("#l2").css("background", "red");
$("#f3").css("display", "none");
$("#l3").css("background", "red");
$("#f4").css("display", "none");
$("#l4").css("background", "red");
});
$("#l2").mouseover(function(){
$("#f1").css("display", "none");
$("#l1").css("background", "red");
$("#f2").css("display", "block");
$("#l2").css("background", "blue");
$("#f3").css("display", "none");
$("#l3").css("background", "red");
$("#f4").css("display", "none");
$("#l4").css("background", "red");
});
$("#l3").mouseover(function(){
$("#f1").css("display", "none");
$("#l1").css("background", "red");
$("#f2").css("display", "none");
$("#l2").css("background", "red");
$("#f3").css("display", "block");
$("#l3").css("background", "blue");
$("#f4").css("display", "none");
$("#l4").css("background", "red");
});
$("#l4").mouseover(function(){
$("#f1").css("display", "none");
$("#l1").css("background", "red");
$("#f2").css("display", "none");
$("#l2").css("background", "red");
$("#f3").css("display", "none");
$("#l3").css("background", "red");
$("#f4").css("display", "block");
$("#l4").css("background", "blue");
});
});
</script>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
background: red;
color: #ffffff;
}
ul li:hover{
background: blue;
}
.on{
background: blue;
}
#f1{
width: 400px;
display: block;
}
#f2{
width: 400px;
display: none;
}
#f3{
width: 400px;
display: none;
}
#f4{
width: 400px;
display: none;
}
</style>
</head>
<body>
<ul>
<li id="l1" class="on">菜单一</li>
<li id="l2">菜单二</li>
<li id="l3">菜单三</li>
<li id="l4">菜单四</li>
</ul>
<div id="f1">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f2">
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
</div>
<div id="f3">
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
</div>
<div id="f4">
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
</div>
</body>
</html>实际效果如下图：
页:
[1]