jq实例

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_34403693

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/colorful-paopao1/p/8340125.html

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();
            })      
        })

转载于:https://www.cnblogs.com/colorful-paopao1/p/8340125.html