jq实例
1、导航栏
<style type="text/css"> * {padding:0;margin:0;list-style:none;} img { width:110px;height:60px;} .head { width:100%; height:100%;} .headImg { width:970px; height:60px;margin:0 auto;} .nav { width:100%;height:40px; background:#000;} .navList {width:970px;height:40px; margin:0 auto;color:#fff;} .navList>li { width:150px; height:40px;float:left;text-align:center;}
.navList > li > a { height:40px;line-height:40px;display:block; } .navList .navUl li { height:40px;line-height:40px;border-bottom:1px solid #fff;} .navList .navUl li:hover{background:#808080;} .navUl {background:#000;} <div class="head"> <div class="headImg"><img src="img/bg1.jpg" /></div> </div> <div class="nav"> <ul class="navList"> <li><a>IT互联网1</a> <ul class="navUl"> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> </ul> </li> <li><a>IT互联网2</a> <ul class="navUl"> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> <li><a>前端</a></li> </ul> </li> </div> <script> $(function () { $(".navUl").hide(); $(".nav").find(".navList>li").hover(function () { $(this).find(".navUl").stop(true,true).slideDown(); }, function () { $(this).find(".navUl").stop(true, true).slideUp(); }) }) </script>
2、网站换肤
<style type="text/css"> * { padding:0;margin:0; list-style:none;} .header {width:100%;height:40px; line-height:40px;background:#ffd800;z-index:2; } .headerCon {width:970px;height:40px; margin:0 auto;} .headerCon a {float:left;cursor:pointer;} .showShow { width:100%;height:35px;position:fixed; top:0; left:0; cursor:pointer; z-index:999;background:#ffd800;} .packUpPic { width:970px;height:30px;line-height:30px;margin:0 auto; } .packUpPic a {float:right; } .littlePic {width:970px;margin:0 auto;} .littlePic .littlePicList li img {width:100px;margin:10px; float:left;} <div class="header"> <div class="headerCon"> <a src="javascript:;">换肤</a> </div> </div> <div class="showShow"> <div class="packUpPic"> <a src="javascript:;">收起</a> </div> <div class="littlePic"> <ul class="littlePicList"> <li><img src="img/bg0.jpg" /></li> <li><img src="img/bg1.jpg" /></li> <li><img src="img/bg2.jpg" /></li> <li><img src="img/bg3.jpg" /></li> <li><img src="img/bg4.jpg" /></li> <li><img src="img/bg5.jpg" /></li> </ul> </div> </div> <script> $(function () { $(".showShow").hide(); $(".header").find(".headerCon a").click( function () { $(".showShow").fadeIn(); }); $(".littlePicList li img").click(function () { var i = $(this).attr("src"); $("body").css("background-image", "url(" + i + ")"); }) $(".showShow").find(".packUpPic a").click(function () { $(".showShow").slideUp(); }) })