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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
详解JavaScript 的变量
Mar 08 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 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
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
设置python3为默认python的方法
2018/10/31 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Django REST framework 分页的实现代码
2019/06/19 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
中文师范生自荐信
2014/01/30 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
我的中国梦口号
2014/06/16 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python