js制作的鼠标悬浮时产生的下拉框效果
<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 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: www.jb51.net–>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-8″>
<title>下拉框的制作</title>
</head><body>
</body></html>
相关推荐
-
JS+CSS实现自动切换的网页滑动门菜单效果代码
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
-
js QQ客服悬浮效果实现代码
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont
-
非常酷的js图形渐隐导航菜单栏
body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_
-
js鼠标悬浮出现遮罩层的方法
本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl"> <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008
-
js+cookies实现悬浮购物车的方法
本文实例讲述了js+cookies实现悬浮购物车的方法.分享给大家供大家参考.具体分析如下: 在 "商品列表展示页"做上 "悬浮的"与"DataList"结合的 "无刷新购物车",只需计算出总价,不必去单独页面结算.找了些资料修改了一下,整理示例如下: gwc.js文件如下: // JavaScript Document //计算单个小计 function EveryCount() { var index=window.eve
-
JS实现侧悬浮浮动实例代码
效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css">
-
JS实现带有抽屉效果的产品类网站多级导航菜单代码
本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具
-
js 左右悬浮对联广告特效代码
js制作web网页左右悬浮广告特效. 引用: 复制代码 代码如下: <script src="js/ad.js" type="text/javascript"></script> 2.页面调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
-
JS实现自动固定顶部的悬浮菜单栏效果
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
JS实现光滑展开合拢的菜单效果代码
本文实例讲述了JS实现光滑展开合拢的菜单效果代码.分享给大家供大家参考.具体如下: 这是一个光滑展开又合拢的JS菜单效果,无jQuery插件,完全JavaScript代码实现,没有过多修饰,有兴趣的美化一下,肯定是款不错的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-swift-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD