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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
js树形控件脚本代码
2008/07/24 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
浅谈PDF.js使用心得
2018/06/07 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python2.7实现爬虫网页数据
2018/05/25 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python 复平面绘图实例
2019/11/21 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
项目专员岗位职责
2013/12/04 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
区三好学生主要事迹
2014/01/30 职场文书
关于安全演讲稿
2014/05/09 职场文书
地质灾害防治方案
2014/05/14 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android