js制作的鼠标悬浮时产生的下拉框效果
js制作的鼠标悬浮时产生的下拉框效果
发布时间:2016-12-30 来源:查字典编辑
摘要:先给大家补补课,讲个简单的例子:复制代码代码如下:blogs:www.jb51.net–>

先给大家补补课,讲个简单的例子:

复制代码 代码如下:

<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>

<p><button type="button">hide<button><br/>

这段文字将被隐藏<br/>

这段文字也将被隐藏

</p></div>

<div><p>

<button 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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类