css jquery创建一个网页 js 用jquery制作网页案例

转载

互联网小思悟 2023-07-13 14:30:44

文章标签 css jquery创建一个网页 js jquery ios ci HTML 文章分类 jQuery 前端开发

案例项目

针对以前学过的知识点，实现一些案例，有助于后边的学习~

案例一：电影排行榜

首先来看下案例效果：

css jquery创建一个网页 js 用jquery制作网页案例_css jquery创建一个网页 js

第一步：编写静态页面

1、首先看下HTML框架代码：

<div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称</li>
            <li><span>1</span>电影名称</li>
            <li><span>1</span>电影名称</li>
            <li><span>1</span>电影名称</li>
            <li><span>1</span>电影名称</li>
            <li><span>1</span>电影名称</li>
        </ul>
    </div>

2、根据案例要求完善HTML：

<div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称
                <div class="content">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                        alt="">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores! Maiores dolores impedit dolor sapiente?
                    </p>
                </div>
            </li>
            <li><span>2</span>电影名称
            <div class="content">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                    alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis
                    aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores!
                    Maiores dolores impedit dolor sapiente?
                </p>
            </div>
            </li>
            <li><span>3</span>电影名称
            <div class="content">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                    alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis
                    aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores!
                    Maiores dolores impedit dolor sapiente?
                </p>
            </div>
            </li>
            <li><span>4</span>电影名称
            <div class="content">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                    alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis
                    aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores!
                    Maiores dolores impedit dolor sapiente?
                </p>
            </div>
            </li>
            <li><span>5</span>电影名称
            <div class="content">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                    alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis
                    aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores!
                    Maiores dolores impedit dolor sapiente?
                </p>
            </div>
            </li>
            <li><span>6</span>电影名称
            <div class="content">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592370714302&di=c4292ea32ce9bd588479ea3f04b17b9f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150405%2F9wNb-chmifpy6247097.jpg"
                    alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam dicta quia porro omnis
                    aspernatur iusto quis, quod quas nostrum minus laudantium mollitia expedita blanditiis asperiores!
                    Maiores dolores impedit dolor sapiente?
                </p>
            </div>
            </li>
        </ul>
    </div>

3、其次编写CSS样式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        .box>h1 {
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }

        ul>li {
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
            cursor: pointer;
        }

        ul>li:nth-child(-n+3) span{
            background: deeppink;
        }
        ul>li>span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            margin-right: 10px;
        }
        .content {
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
        .content>img{
            width: 80px;
            height: 120px;
            float: left;
        }
        .content>p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
        .current .content{
            display: block;
        }
    </style>

第二步：编写jQuery代码

1、方式一：使用mouseenter跟mouseleave来实现动态效果

<script>
        $(function(){
            // 1、监听li的移入事件
            $('li').mouseenter(function(){
                // this表示你触发了哪个li就是谁，添加一个类把类名以字符串的形式传入
                $(this).addClass('current')
            })
            // 2、监听li的移出事件
            $('li').mouseleave(function(){
                $(this).removeClass('current')
            })
            })
</script>

2、方式二：使用hover来实现

<script>
        $(function(){
// 可以用hover来代替上面两事件
            $('li').hover(function(){
                $(this).addClass('current')
            },function(){
                $(this).removeClass('current')
            })
        })
</script>

案例二：tab选项卡

同样来看下案例效果：

css jquery创建一个网页 js 用jquery制作网页案例_jquery_02

第一步：编写静态页面

1、HTML代码：

<div class="box">
        <ul class="nav">
            <li class="current">猫</li>
            <li>虎</li>
            <li>鸡</li>
            <li>兔</li>
        </ul>

        <ul class="image">
            <li class="show">
                <img 
                src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00201-493.jpg" alt="">
            </li>
            <li><img
                src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2737004752,1151009748&fm=26&gp=0.jpg">
            </li>
            <li><img 
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=394863976,2719623569&fm=26&gp=0.jpg"
                ></li>
            <li><img 
                src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=396583363,402940839&fm=26&gp=0.jpg"
                ></li>
        </ul>
    </div>

2、CSS代码：

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 400px;
            height: 300px;
            /* border: 1px solid black; */
            margin: 100px auto;
            background-color: papayawhip;
        }
        .box>.nav>li {
            list-style: none;
            width: 100px;
            height: 50px;
            float: left;
            background-color: orange;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .box>.nav>.current {
            background-color: gray;
        }
        .box>.image>li {
            list-style: none;
            display: none;
        }
        .box>.image>li>img {
            width: 400px;
            height: 250px;
        }
        .box>.image>.show {
            display: block;
        }
    </style>

第二步：编写jQuery代码

版本1：
使用了mouseenter跟mouseleave两个事件来实现，其中还有遇到了两个函数：get()跟index()跟eq()方法

代码如下：

<script>
        $(function(){
            // 1、监听移入事件
            $('.nav>li').mouseenter(function(){
                // 1.1获取到当前的li，添加class类，把当前li的背景颜色改掉
                $(this).addClass('current')
                // 1.2获取到对应的li的索引
                var index = $(this).index()
                // 1.3取出对应的该li中的图片
                /*
                    index()方法：获取兄弟元素中当前元素的索引
                    eq()方法：找到该元素并且把他包装成对象返回
                    get()方法：找到该元素把他返回不会包装成对象
                */
                var $li = $('.image>li').eq(index)
                // 1.4显示找到的图片
                $li.addClass('show')
            })
            // 2、监听移出事件
            $('.nav>li').mouseleave(function(){
                // 2.1获取到当前移出的li，删除class类，把当前的li的背景颜色重置
                $(this).removeClass('current')
                // 2.2获取到对应的li的索引
                var index = $(this).index()
                // 2.3取出对应的该li中的图片
                var $li = $('.image>li').eq(index)
                // 2.4删除对应的图片
                $li.removeClass('show')
            })
        })
    </script>

该方法有一个bug，看下图：

css jquery创建一个网页 js 用jquery制作网页案例_css jquery创建一个网页 js_03

当移出li标签的时候图片也会删除，所以有了版本2

版本2：
只使用了mouseenter事件，里边用到了一个核心函数siblings()，他的作用就是找到非选中的兄弟元素

看如下代码：

<script>
        $(function () {
            // 1、监听移入事件
            $('.nav>li').mouseenter(function () {
                // 1.1获取到当前的li，添加class类，把当前li的背景颜色改掉
                $(this).addClass('current')
                // 1.2获取当非当前的li，删除class类，把当前li的背景颜色改掉
                $(this).siblings().removeClass('current')
                // 1.3获取到对应的li的索引
                var index = $(this).index()
                // 1.4取出对应的该li中的图片
                var $li = $('.image>li').eq(index)
                // 1.5把该图片显示
                $li.addClass('show')
                // 1.6获取非选中的图片，并且删除
                $li.siblings().removeClass('show')
            })
        })
    </script>

效果如下：（完美的解决了版本一的问题）

css jquery创建一个网页 js 用jquery制作网页案例_ios_04

案例三：对联广告

在网页里当鼠标往下滚动到一定位置时，广告以动画的形式弹出，然后鼠标回滚到一定位置广告收起~~

如下是案例效果：

css jquery创建一个网页 js 用jquery制作网页案例_ci_05

首先用到的核心知识点：就是这么监听滚轮滚动，再次动画这么实现~

直接来看jQuery代码：

$(function(){
    // 1、监听网页的滚动
    $(window).scroll(function(){
        // 1.1获取网页滚动的偏移位
        var offset = $('html,body').scrollTop()
        // 1.2判断网页是否滚动到指定的位置
        if(offset>200){
            $('img').show(1000)
        }else{
            // 1.3显示图片
            $('img').hide(1000)
        }
    })
})

该jQuery代码用到了一个核心方法，就是监听网页的滚动：scroll方法。用scrollTop来监听具体的偏移位，最后用语句来实现逻辑。

案例四：折叠菜单

案例效果：当点击一级菜单的时候二级菜单会展开，点击下一个一级菜单上一个会关闭，点击的同时尖角号方向由右变为下

第一步：编写静态页面

HTML框架如下：

<ul class="nav">
        <li>一级菜单<span ><img  src="next.png" alt=""></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单<span><img src="next.png" alt=""></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
    </ul>

CSS样式如下：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            list-style-type: none;
            width: 300px;
            margin: 100px auto;
            text-indent:2em;
            position: relative;
        }
        .nav>li {
            border: 1px solid black;
            line-height: 35px;
            border-bottom: none;
            
        }
        .nav>li:first-child{
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }
        .nav>li:last-child{
            border-bottom: 1px solid black;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .nav>li>span>img {
            display: inline-block;
            position: absolute;
            width: 30px;
            height: 30px;
            right: 40px;
            cursor: pointer;
        }
        .current>span>img {
            transform: rotate(90deg);
        }
        .sub {
            display: none;
        }
        .sub>li {
            list-style: none;
            background: mediumorchid;
            border-bottom: 1px solid white;
        }
        .sub>li:hover{
            background-color: red;
        }
    </style>

第二步：编写jQuery代码

实现步骤：

获取点击事件
得到二级菜单(使用children方法：获取后代元素)
让二级菜单展开
拿到非选中的菜单
关闭其他菜单的子菜单
找到当前的菜单让箭头旋转
找到其他非当前的菜单删除

在编写过程中遇到了一个问题，就是让箭头旋转的时候整个li标签旋转了，最后发现是旋转代码给子代li加上的，应该是给子代li下的span元素下的img加~

jQuery代码如下：

$(function(){
    // 获取点击事件
    $('.nav>li').click(function(){
        // 1、到二级菜单(使用children方法：获取后代元素)
        var $sub = $(this).children('.sub')
        // 2、让二级菜单展开
        $sub.slideDown(100)
        // 3、拿到非选中的菜单
        var $other = $(this).siblings().children('.sub')
        // 4、关闭其他菜单的子菜单
        $other.slideUp(100)
        // 5、找到当前的菜单让箭头旋转
        $(this).addClass('current')
        // 6、找到其他非当前的菜单删除
        $(this).siblings().removeClass('current')
    })
})

案例五：下拉菜单

最终案例效果：当鼠标悬停上一级菜单时，二级菜单会展开。

css jquery创建一个网页 js 用jquery制作网页案例_ios_07

第一步：编写静态页面

HTML框架：

<ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>

CSS样式：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 300px;
            height: 50px;
            background-color: red;
            margin: 100px auto;
        }
        .nav>li {
            width: 100px;
            float: left;
            text-align: center;
            list-style: none;
            line-height: 50px;
            cursor: pointer;
        }
        .sub {
            display: none;
            list-style: none;
            width: 100px;
            background-color: rgb(203, 61, 238);
        }
</style>

第二步：编写jQuery代码

$(function(){
    // 监听一级菜单的移入事件
    $('.nav>li').mouseenter(function(){
        // 拿到二级菜单
        var sub = $(this).children('.sub')
        // 设置展开效果
        sub.slideDown(1000)
    })
    // 监听一级菜单的移出事件
    $('.nav>li').mouseleave(function(){
        // 拿到二级菜单
        var sub = $(this).children('.sub')
        // 设置收起效果
        sub.slideUp(1000)
    })
})

做到现在为止，看下代码的效果是这样的：

css jquery创建一个网页 js 用jquery制作网页案例_css jquery创建一个网页 js_08

当你鼠标移入移出一级菜单好几次的时候，动画会一直执行，鼠标也移出了，当时动画得执行完毕才停止~
解决办法：
在我们的动画开始前要加上一个stop方法，暂停之前的动画~

$(function(){
     // 监听一级菜单的移入事件
     $('.nav>li').mouseenter(function(){
         // 拿到二级菜单
         var sub = $(this).children('.sub')
         // 阻止前边的动画
         sub.stop()
         // 设置展开效果
         sub.slideDown(1000)
     })
     // 监听一级菜单的移出事件
     $('.nav>li').mouseleave(function(){
         // 拿到二级菜单
         var sub = $(this).children('.sub')
         // 阻止前边的动画
         sub.stop()
         // 设置收起效果
         sub.slideUp(1000)
     })
 })

最后效果就达到预期了

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：LTE的系统网络架构 lte网络架构的几个特点

下一篇：ios14断流 ios14.1断流

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯