首页 前端知识 【JS】使用jQuery制作图片手风琴效果

【JS】使用jQuery制作图片手风琴效果

2024-05-08 10:05:18 前端知识 前端哥 692 704 我要收藏

效果图-图片为动图

在这里插入图片描述
鼠标划过时,图片显示,其他图片变小,鼠标移出时,所有图片均匀显示

HTML

<div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

CSS

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

        ul {
            list-style: none;
            width: 1300px;
        }

        #box {
            width: 1200px;
            height: 350px;
            border: 2px solid red;
            margin: 100px auto;
        }

        #box li {
            width: 240px;
            height: 350px;
            /*border: 1px solid #000;*/
            float: left;
        }
    </style>

JS

一定要引入jQuery文件,可前往jQuery官网下载:jQuery官网

<script src="../js/jquery-2.2.4.js"></script>

自己书写的JS

//循环设置背景图
    $('li').each(function (k, v) {
    //在此处修改url,将图片更改为自己本地的图片
        $(v).css('background', 'url(../images/' + (k + 1) + '.jpeg)');
    })
    //鼠标移入时,对应的图片放大,其他的图片变小
    $('ul li').mouseover(function () {
        // console.log(this);
        $(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
    })
    //鼠标移出时,恢复
    $('ul').mouseout(function(){
        $("ul li").stop().animate({width:240});
    })
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7559.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!