小案例--王一博美图大赏，图片自行脑补吧

最新推荐文章于 2024-06-12 18:09:23 发布

顾九七

最新推荐文章于 2024-06-12 18:09:23 发布

阅读量249

点赞数

分类专栏：案例文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44681872/article/details/113251561

版权

案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

结构部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://unpkg.com/jquery@3.5.1/dist/jquery.js"></script>
    <script src="js/script.js"></script>
    <title>王一博美图大赏</title>
</head>
<body>
    <span></span>
    <nav>
        <a href="#">皎如玉树</a>
        <a href="#">鬓若刀裁</a>
        <a href="#">眉如墨画</a>
        <a href="#">目若秋波</a>
        <a href="#">凤凰台</a>
        <a href="#">宝灯燃</a>
        <a href="#">翩翩我公子</a>
        <a href="#">机巧忽若神</a>
        <a href="#">白日曜青春</a>
        <a href="#">时雨静飞尘</a>
        <a href="#">不忘初心</a>
        <a href="#">愿君长欢</a>
    </nav>
    <div>
        <img src="./images/1.jpg">
        <img src="./images/2.jpg">
        <img src="./images/3.jpg">
        <img src="./images/4.jpg">
        <img src="./images/5.jpg">
        <img src="./images/6.jpg">
        <img src="./images/7.jpg">
        <img src="./images/8.jpg">
        <img src="./images/9.jpg">
        <img src="./images/10.jpg">
        <img src="./images/11.jpg">
        <img src="./images/12.jpg">
    </div>
</body>
</html>

样式部分

*{
    margin: 0;
    padding: 0;
    border: none;
}
html,
body{
    overflow: hidden;
    height: 100%;
    background: #93b3c6;
}

span{
    /* 变成块级元素 */
    display: block;   
    width: 16px;
    height: 16px; 
    margin: 15px auto 20px; 
    border-radius: 50%;
    background: #fff;
}
/*导航条区域*/
nav{
    position: relative;
    display: flex;
    width: 78.125vw;
    margin: 0 auto 45px;
    justify-content: space-between;
}
nav:before{     /*使用before，表明这是nav中第一个元素，后面的元素覆盖前面的*/
    position: absolute;
    top: 15px;
    width: 100%;
    height: 10px;
    background: #fff;
    display: block;   /*伪元素设置了宽高，将其变为块级元素*/
    content: ''         /*激活*/
}
nav > a{
    position: relative;  /*不设置的话，默认为static，和绝对定位重叠，绝对定位在上层。且整个nav是相对定位，可以撑开高度，若是设置为绝对定位，就撑不开*/
    font-size: 10px;
    font-weight: bold;
    padding: 10px ;
    border: 2px solid #5395b4;
    color: #255d7e;
    text-decoration: none;
    background: #fff;
}

/*图片区域*/
div{
    position: relative;
    overflow: hidden;
    width: 78.125vw;
    height: 85vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 30px 0 rgba(8,1,3,3);
}
div img{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 98%;
    height: 96%;
}

逻辑部分

$(document).ready(function(){       // 这条命令会使得html页面全部加载完毕才会执行内容   原生js代替: window.onload = function(){}
    var index = 0
    // 切换图片的函数
    var swiper = function(){
        $('img').eq(index)        
        .css({'opacity':'1'})       // display也可
        .siblings()
        .css({'opacity':'0'})  
    }
    $('a').mouseenter(function(){
        // console.log($('a').length);
        // console.log($(this).index());       // 从0开始
        index = $(this).index()                 // $(this).index() 确定鼠标进入的是第几个图片
        swiper()
    })
    // 实现向左向右键控制图片的改变
    $(document).keydown(function (e) { 
        // console.log(e);            // 打印向右键键值39；向左键键值37
        if(e.keyCode == 37){
            // if(index==0) {
            //     index = $('a').length - 1
            // } else {
            //     index --
            // }
            // 精简写法：三目
            index = index > 0 ? -- index : $('a').length-1
        } else if(e.keyCode == 39){
            // if(index == $('a').length-1){
            //     index = 0
            // } else {
            //     index ++
            // }
            // 精简写法：三目
            index = index < $('a').length-1 ? ++ index : 0
        } else {
            return false
        }
        swiper()
    });
})

// 写法二
    // 绑定事件写法
    $('a').add(document).on({           // 此处只写$(document)时，进入事件不能精准到a标签，且document是一个整体的集合，不要随便加
        mouseenter:function(e){      
            e.stopPropagation();
            index = $(this).index()
            swiper
        },
        keydown: function(e){
            if(e.keyCode == 37){
                index = index > 0 ? -- index : $('a').length-1
            } else if(e.keyCode == 39){
                index = index < $('a').length-1 ? ++ index : 0
            } else {
                return false        // 这个false会阻止除了左右键其他键的作用，改为true也可
            }
            swiper()
        }
    })

    // 动画样式编辑
    var swiper = function(){
        $('img').eq(index).stop()           // 加上stop来停止上一个动画
        .animate({'opacity':'1'},1000)       // 用animation时，display不可以，需要的是有具体值的属性
        .siblings().stop()
        .animate({'opacity':'0'},1000)  
    }

顾九七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小案例--王一博美图大赏，图片自行脑补吧

结构部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <script src="ht
复制链接

扫一扫