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


Posted in Javascript onOctober 27, 2012

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

<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="3water.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: 3water.com?> 
<meta http-equiv="content-type" content="text/html"> 
<meta charset="utf-8″> 
<title>下拉框的制作</title> 
</head><body> 
</body></html>
Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
详解jQuery事件
Jan 13 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
原生js实现五子棋游戏
May 28 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 #Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 #Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 #Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 #Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 #Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 #Javascript
关于js new Date() 出现NaN 的分析
Oct 23 #Javascript
You might like
Oracle 常见问题解答
2006/10/09 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
会计自荐信范文
2014/03/09 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
单独二胎证明
2015/06/24 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL