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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
js实现图片上传预览原理分析
Jul 13 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
webpack实用小功能介绍
Jan 02 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python中类型检查的详细介绍
2017/02/13 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Python输出指定字符串的方法
2020/02/06 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
捐助倡议书范文
2014/04/15 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书