JQuery实现漂亮的滑动门效果

最新推荐文章于 2024-08-29 08:08:48 发布

hikevin17

最新推荐文章于 2024-08-29 08:08:48 发布

阅读量1.9k

点赞数

文章标签： jquery function class server 娱乐音乐

本文链接：https://blog.csdn.net/hikevin17/article/details/6507100

版权

今天继续学习了JQuery，老师给我们讲解了滑动门，我仿照网易的滑动门写了个类似的效果。呵呵，时间不早了，废话也不多说了。为了开发快速，我使用的是vs2005，现在写下来也一切从简。

Default.aspx页面代码：

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>滑动门</title>
<link rel="stylesheet" type="text/css" href="Css/Site.css" />
<script language="javascript" type="text/javascript" src="JS/jquery126.js"></script>
<script language="javascript" type="text/javascript" src="JS/JScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="flowdoor"class="flowdoorstyle">
<ul>
<li id="tag1" class="mouseoverstyle"> 娱乐 </li>
<li id="tag2"> 电影 </li>
<li id="tag3"> 电视 </li>
<li id="tag4" class="rbodernone"> 音乐 </li>
</ul>
<div id="cont1" class="content1show">娱乐标签内容
</div>
<div id="cont2">电影标签内容
</div>
<div id="cont3">电视标签内容
</div>
<div id="cont4">音乐标签内容
</div>
</div>
</form>
</body>
</html>

Site.css样式文件代码如下：

Code:

将jquery126.js库复制到JS文件下，JScript.js中的代码如下：

Code:

// JScript 文件
$(document).ready(function(){
$("#tag1").bind("mouseover",function(){$("#tag1").removeClass().addClass("mouseoverstyle");$("li:not(#tag1)").removeClass();$("#cont1").show();$("#flowdoor>div:not(#cont1)").hide();$("#tag4").addClass("rbodernone");});
$("#tag2").bind("mouseover",function(){$("#tag2").removeClass().addClass("mouseoverstyle");$("li:not(#tag2)").removeClass();$("#cont2").show();$("#flowdoor>div:not(#cont2)").hide();$("#cont1").removeClass().addClass("cont1hide");$("#tag4").addClass("rbodernone");});
$("#tag3").bind("mouseover",function(){$("#tag3").removeClass().addClass("mouseoverstyle");$("li:not(#tag3)").removeClass();$("#cont3").show();$("#flowdoor>div:not(#cont3)").hide();$("#cont1").removeClass().addClass("cont1hide");$("#tag4").addClass("rbodernone");});
$("#tag4").bind("mouseover",function(){$("#tag4").removeClass().addClass("mouseoverstyle");$("li:not(#tag4)").removeClass();$("#cont4").show();$("#flowdoor>div:not(#cont4)").hide();$("#cont1").removeClass().addClass("cont1hide");$("#tag4").addClass("rbodernone");});
});

呵呵，大功告成。

附效果图：