Jquery的用法
1.图片传送带的实现
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 8 <style type="text/css"> 9 a img { 10 border: 0; /*无边框*/ 11 } 12 13 #container { 14 position: relative; /*设置相对布局*/ 15 background: #E0F0FB; /*设置背景颜色*/ 16 width: 240px; /*设置宽度*/ 17 height: 70px; /*设置高度*/ 18 margin: 1px auto; /*设置外边距*/ 19 padding: 0; /*设置内边距*/ 20 border: 1px solid #A1D6FE; /*设置边框*/ 21 z-index: 2; /*设置层叠次序*/ 22 } 23 24 #container .box { 25 position: relative; /*设置相对布局*/ 26 width: 480px; 27 z-index: 3; /*设置层叠次序*/ 28 } 29 30 #container a { 31 float: left; /*设置浮动在左边*/ 32 margin: 5px 0px 5px 5px; /*设置外边距*/ 33 height: 58px; 34 } 35 36 #container .control { 37 position: absolute; /*设置绝对布局*/ 38 z-index: 3; /*设置层叠次序*/ 39 left: 0; /*设置左边距*/ 40 top: 0; /*设置顶边距*/ 41 } 42 </style> 43 <script type="text/javascript"> 44 $(document).ready( 45 function() { 46 var spacing = 90; //定义保存间距的变量 47 function createControl(src) { //定义创建控制图片的函数 48 return $('<img/>').attr('src', src) //设置图片的来源 49 .attr("width", 80).attr("height", 60).addClass('control') 50 .css('opacity', 0.6) //设置透明度 51 .css('display', 'none'); //默认为不显示 52 } 53 54 var $leftRollover = createControl('images/left.gif'); //创建向左移动的控制图片 55 var $rightRollover = createControl('images/right.gif'); //创建向左移动的控制图片 56 57 $('#container').css({ //改变图像传送带容器的CSS样式 58 'width' : spacing * 3, 59 'height' : '70px', 60 'overflow' : 'hidden' //溢出时隐藏 61 }).find('.box a').css({ 62 'float' : 'none', 63 'position' : 'absolute', //设置为绝对布局 64 'left' : 1000 65 //将左边距设置为1000，目的是不显示 66 }); 67 68 var setUpbox = function() { 69 var $box = $('#container .box a'); 70 $box.unbind('click mouseenter mouseleave'); //移除绑定的事件 71 72 /******************************左边的图片*************************************/ 73 $box.eq(0).css('left', 0).click(function(event) { 74 $box.eq(0).animate({ 75 'left' : spacing 76 }, 'fast'); //为第一张图片添加动画 77 $box.eq(1).animate({ 78 'left' : spacing * 2 79 }, 'fast'); //为第二张图片添加动画 80 $box.eq(2).animate({ 81 'left' : spacing * 3 82 }, 'fast'); //为第3张图片添加动画 83 $box.eq($box.length - 1).css('left', -spacing) //设置左边距 84 .animate({ 85 'left' : 0 86 }, 'fast', function() { 87 $(this).prependTo('#container .box'); 88 setUpbox(); 89 }); //添加动画 90 91 event.preventDefault(); //取消事件的默认动作 92 }).hover(function() { //设置鼠标的悬停事件 93 $leftRollover.appendTo(this).fadeIn(200); //显示向左移动的控制图片 94 }, function() { 95 $leftRollover.fadeOut(200); //隐藏向左移动的控制图片 96 }); 97 98 /******************************右边的图片**************************************/ 99 $box.eq(2).css('left', spacing * 2) //设置左边距 100 .click(function(event) { //绑定单击事件 101 $box.eq(0) //获取左边的图片，也就是第一张图片 102 .animate({ 103 'left' : -spacing 104 }, 'fast', function() { 105 $(this).appendTo('#container .box'); 106 setUpbox(); 107 }); //添加动画 108 $box.eq(1).animate({ 109 'left' : 0 110 }, 'fast');//添加动画 111 $box.eq(2).animate({ 112 'left' : spacing 113 }, 'fast');//添加动画 114 $box.eq(3).css('left', spacing * 3) //设置左边距 115 .animate({ 116 'left' : spacing * 2 117 }, 'fast'); //添加动画 118 119 event.preventDefault(); //取消事件的默认动作 120 }).hover(function() { //设置鼠标的悬停事件 121 $rightRollover.appendTo(this).fadeIn(200); //显示向右移动的控制图片 122 }, function() { 123 $rightRollover.fadeOut(200); //隐藏向右移动的控制图片 124 }); 125 126 /************************中间的图片*****************************************/ 127 $box.eq(1).css('left', spacing); //设置中间图片的左边距 128 }; 129 setUpbox(); 130 $("a").attr("target", "_blank"); //查看原图时，在新的窗口中打开 131 }); 132 </script> 133 <body> 134 <div id="container"> 135 <div class="box"> 136 <a href="images/01.jpg"> 137 <img height=60 src="images/01.jpg" width=80> 138 </a> 139 140 <a href="images/02.jpg"> 141 <img height=60 src="images/02.jpg" width=80> 142 </a> 143 144 <a href="images/03.jpg"> 145 <img height=60 src="images/03.jpg" width=80> 146 </a> 147 148 <a href="images/07.jpg"> 149 <img height=60 src="images/07.jpg" width=80> 150 </a> 151 152 <a href="images/05.jpg"> 153 <img height=60 src="images/05.jpg"width=80> 154 </a> 155 156 <a href="images/06.jpg"> 157 <img height=60 src="images/06.jpg" width=80> 158 </a> 159 </div> 160 </div> 161 </body> 162 </html>
2.伸缩式菜单的实现方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 7 <style type="text/css"> 8 dl { 9 width: 158px; 10 margin:0px; 11 } 12 dt { 13 font-size: 14px; 14 padding: 0px; 15 margin: 0px; 16 width:146px; /*设置宽度*/ 17 height:19px; /*设置高度*/ 18 background-image:url(images/images/title_show.gif); /*设置背景图片*/ 19 padding:6px 0px 0px 12px; 20 color:#215dc6; 21 font-size:12px; 22 cursor:hand; 23 } 24 dd{ 25 color: #000; 26 font-size: 12px; 27 margin:0px; 28 } 29 a { 30 text-decoration: none; /*不显示下划线*/ 31 } 32 a:hover { 33 color: #FF6600; 34 } 35 #top{ 36 width:158px; /*设置宽度*/ 37 height:30px; /*设置高度*/ 38 background-image:url(images/images/top.gif); /*设置背景图片*/ 39 } 40 #bottom{ 41 width:158px; /*设置宽度*/ 42 height:31px; /*设置高度*/ 43 background-image:url(images/images/bottom.gif); /*设置背景图片*/ 44 } 45 .title{ 46 background-image:url(images/images/title_quit.gif); /*设置背景图片*/ 47 } 48 .item{ 49 width:146px; /*设置宽度*/ 50 height:15px; /*设置高度*/ 51 background-image:url(images/images/item_bg.gif); /*设置背景图片*/ 52 padding:6px 0px 0px 12px; 53 color:#215dc6; 54 font-size:12px; 55 cursor:hand; 56 background-position:center; 57 background-repeat:no-repeat; 58 } 59 </style> 60 <script type="text/javascript"> 61 $(document).ready(function(){ 62 $("dd").hide(); //隐藏全部子菜单 63 $("dt[class!='title']").toggle( 64 function(){ 65 // slideDown:通过高度变化（向下增长）来动态地显示所有匹配的元素 66 $(this).css("backgroundImage","url(images/images/title_hide.gif)"); //改变主菜单的背景 67 $(this).next().slideDown("slow"); 68 }, 69 function(){ 70 // slideUp:通过高度变化（向上缩小）来动态地隐藏所有匹配的元素 71 $(this).css("backgroundImage","url(images/images/title_show.gif)"); //改变主菜单的背景 72 $(this).next().slideUp("slow"); 73 } 74 ); 75 }); 76 </script> 77 </head> 78 <body> 79 80 <div id="top"></div> 81 <dl> 82 <dt>员工管理</dt> 83 <dd> 84 <div class="item">添加员工信息</div> 85 <div class="item">管理员工信息</div> 86 </dd> 87 <dt>招聘管理</dt> 88 <dd> 89 <div class="item">浏览应聘信息</div> 90 <div class="item">添加应聘信息</div> 91 <div class="item">浏览人才库</div> 92 </dd> 93 <dt>薪酬管理</dt> 94 <dd> 95 <div class="item">薪酬登记</div> 96 <div class="item">薪酬调整</div> 97 <div class="item">薪酬查询</div> 98 </dd> 99 <dt class="title"><a href="#">退出系统</a></dt> 100 </dl> 101 <div id="bottom"></div> 102 103 </body> 104 </html>
3.隐藏式菜单实现方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $("#flag").mouseover(function(){ 11 $("#menu").show(300); //显示菜单 12 }); 13 $("#menu").hover(null,function(){ 14 $("#menu").hide(300); //隐藏菜单 15 }); 16 }); 17 </script> 18 <style type="text/css"> 19 ul{ 20 font-size:12px; 21 list-style:none; /*不显示项目符号*/ 22 margin:0px; /*设置外边距*/ 23 padding:0px; /*设置内边距*/ 24 } 25 li{ 26 padding:7px; /*设置内边距*/ 27 } 28 a{ 29 color:#000; /*设置文字的颜色*/ 30 text-decoration: none; /*不显示下划线*/ 31 } 32 a:hover{ 33 color:#F90; /*设置文字的颜色*/ 34 } 35 #menu{ 36 float:left; /*浮动在左侧*/ 37 text-align:center; /*文字水平居中显示*/ 38 width:70px; /*设置宽度*/ 39 height:295px; /*设置高度*/ 40 padding-top:5px; /*设置顶内边距*/ 41 display:none; /*显示状态为不显示*/ 42 background-image:url(images/a/menu_bg.gif); /*设置背景图片*/ 43 } 44 </style> 45 <body> 46 <div id="menu"> 47 <ul> 48 <li><a href="../../24/21/www.mingribook.com">图书介绍</a></li> 49 <li><a href="../../24/21/www.mingribook.com">新书预告</a></li> 50 <li><a href="../../24/21/www.mingribook.com">图书销售</a></li> 51 <li><a href="../../24/21/www.mingribook.com">勘误发布</a></li> 52 <li><a href="../../24/21/www.mingribook.com">资料下载</a></li> 53 <li><a href="../../24/21/www.mingribook.com">好书推荐</a></li> 54 <li><a href="../../24/21/www.mingribook.com">技术支持</a></li> 55 <li><a href="../../24/21/www.mingribook.com">联系我们</a></li> 56 </ul> 57 </div> 58 <img src="images/a/title.gif" width="30" height="80" id="flag" /> 59 </body> 60 </html>
