js制作的鼠标悬浮时产生的下拉框效果

137 阅读 0 评论 91 点赞

我是靠谱客的博主俊逸含羞草，最近开发中收集的这篇文章主要介绍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.uoften.com">鼠标放在上面看看会发生什么</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.uoften.com–> 
<meta http-equiv="content-type" content="text/html"> 
<meta charset="utf-8″> 
<title>下拉框的制作</title> 
</head><body> 
</body></html> 