js制作的鼠标悬浮时产生的下拉框效果
更新时间：2012年10月27日 23:28:54 作者：
js制作的鼠标悬浮时产生的下拉框效果，需要的朋友可以参考下
先给大家补补课，讲个简单的例子：
<html><head>
<meta type-equiv="Content-Type" content="text/html">
<meta charset="utf-8″>
<script type="text/javascript">
jq=jQuery.noConflict();
jq=(document).ready(function(){
jq("a").mouseover(function(){
jq("a").css("color","#c00″);
});
jq("a').mouseout(function(){
jq("a").css("color","#000000″);
});
</script>
</head><body>
<a href="www.jb51.net">鼠标放在上面看看会发生什么</a>
</body></html>
jq=jQuery.noConflict();
这是定义一个js的jquery库名；
jq(document).ready(function(){
/*这是一个关于document对象的函数里面是函数内容*/
})；
jq("a").mouseover()function(){
/*这是定义事件mouseover的内容*/
}。
在看一个实际例子；点击时隐藏文本：
<html><head>
<script type="text/javascript">
$(document).ready(function() {
$(".abc .hide").click(function() {
$("this").parents("abc").hide("slow"); }); });
</script>
<stype type="text/css">
div.abc {
background: #e5eec;
padding: 7px;
margin: 0px;
border: solid 1px #c00; }
</stype>
</head><body>
<div class="abc">
<p><button class="abc" type="button">hide<button><br/>
这段文字将被隐藏<br/>
这段文字也将被隐藏
</p></div>
<div class="abc"><p>
<button class="abc" type="button">hide me</button><br/>
这段文字在点击hideme时隐藏<br/>
这段文字同样也会隐藏。
</p></dvi>
</body></html>
功课差不多了，我们言归正传回到主题下拉框才是王道。
<html><head>
<!–author linuxa
blogs: www.jb51.net–>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-8″>
<title>下拉框的制作</title>
</head><body>
</body></html>
复制代码 代码如下:
<html><head>
<meta type-equiv="Content-Type" content="text/html">
<meta charset="utf-8″>
<script type="text/javascript">
jq=jQuery.noConflict();
jq=(document).ready(function(){
jq("a").mouseover(function(){
jq("a").css("color","#c00″);
});
jq("a').mouseout(function(){
jq("a").css("color","#000000″);
});
</script>
</head><body>
<a href="www.jb51.net">鼠标放在上面看看会发生什么</a>
</body></html>
jq=jQuery.noConflict();
这是定义一个js的jquery库名；
jq(document).ready(function(){
/*这是一个关于document对象的函数里面是函数内容*/
})；
jq("a").mouseover()function(){
/*这是定义事件mouseover的内容*/
}。
在看一个实际例子；点击时隐藏文本：
复制代码 代码如下:
<html><head>
<script type="text/javascript">
$(document).ready(function() {
$(".abc .hide").click(function() {
$("this").parents("abc").hide("slow"); }); });
</script>
<stype type="text/css">
div.abc {
background: #e5eec;
padding: 7px;
margin: 0px;
border: solid 1px #c00; }
</stype>
</head><body>
<div class="abc">
<p><button class="abc" type="button">hide<button><br/>
这段文字将被隐藏<br/>
这段文字也将被隐藏
</p></div>
<div class="abc"><p>
<button class="abc" type="button">hide me</button><br/>
这段文字在点击hideme时隐藏<br/>
这段文字同样也会隐藏。
</p></dvi>
</body></html>
功课差不多了，我们言归正传回到主题下拉框才是王道。
复制代码 代码如下:
<html><head>
<!–author linuxa
blogs: www.jb51.net–>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-8″>
<title>下拉框的制作</title>
</head><body>
</body></html>
相关文章
这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，该框架提供了创建网页所需的一切，帮助您轻松建立站点。本文给大家介绍JQuery EasyUI的一些常用组件，感兴趣的的朋友一起学习吧2017-07-07
这篇文章主要介绍了jQuery模拟select实现下拉菜单功能,比较实用,需要的朋友可以参考下。2016-06-06
这篇文章主要为大家详细介绍了jQuery动态追加页面数据以及事件委托的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
本篇文章主要介绍了jquery表单验证框架提供的身份证验证方法的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
这是一个典型的Ajax应用，在页面上，您只需要点击“下一页”，数据区将自动加载对应页码的数据，重新刷新数据区。类似的效果在很多网站上应用，尤其在一些需要展示大量图片数据的网页如淘宝商品列表页，Ajax分页效果让您的网站数据加载显得非常流畅。2015-09-09
使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a(c)这个时候，函数c就成了回调函数2014-09-09
这篇文章主要介绍了使用jquery+CSS实现控制打印样式,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery操作checkbox,需要的朋友可以参考下2014-07-07
本文主要介绍jQuery中利用appendTo()方法追加元素已实现左右移动的功能，希望对大家有所帮助。2016-04-04
最新评论