JQuery手风琴效果原理

已于 2023-11-30 09:28:35 修改
阅读量80 收藏
点赞数
分类专栏： JQ 文章标签： jquery css javascript
于 2023-02-25 15:04:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72190449/article/details/129215944
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery使用/jquery.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    
    .box{
        width: 600px;
        height: 120px;
        background-color: aqua;

    }
    li{
        position: relative;
        list-style: none;
        display: block;
        width: 110px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        float: left;


    }
    .big{
        width: 110px;
        height: 100px;
        background-color: blueviolet;
        position: absolute;
        display: none;
    }
    .small{
        width: 50px;
        height: 100px;
        background-color: chartreuse;
        position: absolute;
        
        
    }
    .current .big{
        display: block;
    }
    .current .small{
        display: none;
    }

</style>
<script>
    $(function(){
        $(".box li").mouseenter(function(){
            $(this).stop().animate({
                width:110
            },500).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
            $(this).siblings("li").stop().animate({
                width:60
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()

        })
    })
</script>
<body>
    <div class="box">
        <ul>
            <li class="current">
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="con">
                        <div class="small"></div>
                        <div class="big"></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    
</body>
</html>

至尊鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery手风琴效果
06-06
jquery手风琴效果
jQuery实现手风琴效果（蒙版）
11-29
本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; } ul,ol{ list-style: none; } .box{ width: 900px; height: 300px; border:1px solid #333;
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } img{ width: 500px; height:250px; } .b
jquery实现手风琴效果
01-21
本文实例讲述了jquery实现手风琴效果的代码。分享给大家供大家参考。具体如下： 效果过程就是当鼠标覆盖图片时，这张图片的宽度变大，其他兄弟图片宽度变小，效果如下： 具体代码如下 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type cont
简单实现jQuery手风琴效果
12-02
本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下 js代码： [removed][removed] [removed] $(function() { //获取所有li遍历 $(".li_list").each(function() { //当鼠标进去当前li $(this).mouseenter(function() { //设置当前元素宽度 $(this).st
原生js手风琴案例,以及jquery方式
桃桃雾的博客
11-10 358
首先:先看看手风琴是什么样子的考虑一下如何实现手风琴的效果,接下来:我们来说一下手风琴的实现原理:1.有自己配置好的一对标签div和span2.点击一对div时,显示span3.将其他的div中的span标签隐藏,只显示点击时的div中的span4.看到这里恭喜你已经了解了手风琴的具体操作啦,我们来看看实际代码吧。
html手风琴效果,轻松实现jquery手风琴效果
weixin_36130963的博客
06-05 961
为大家讲解的JQuery动画特效为手风琴，废话不多说，先看最终实现效果图。一、实现原理分析对应的立体图：二、 HTML代码分析真 的 爱 你 1. id为container的div就是上面分析中的红色区域。2. id为content的ul就是用来存放所有的li。3. 每个li就是一个红色区域与对应图片的组合。三、CSS代码分析*{margin: 0; padding: 0;}img{border:...
【jQuery案例】手风琴
m0_55394328的博客
10-10 3384
哈喽大家好，本次案例将会实现一个简单的手风琴效果，当鼠标指针滑过方块时，当前方块状态会发生变化👇手风琴案例手风琴效果的实现并不复杂，需要用到jQuery中的和方法，以及鼠标指针进入事件，下面我们来对本次案例的实现思路进行分析
jQuery自制手风琴效果增强版(附实现原理)
alokka的博客
06-15 4933
手风琴菜单栏效果通常用在页面左侧，当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版，我在http://blog.csdn.net/lzgs_4/article/details/48101877博主的基础上又增加了点击出现点击收缩的功能(具体效果可以看gif)具体代码如下啦~~ 因为是引用的百度静态资源公共库http://cdn.code.baidu.com/，所以直接把代码复制粘贴就
jQuery手风琴图片轮播（源码+注释）
ICY___的博客
02-26 1607
之前在写js轮播图的时候，没有说手风琴式的轮播图，今天借着jQuery代码少的优势，介绍jQuery下的手风琴轮播图 首先看看实现效果：（图片来自百度） 基本原理：利用float：left来布局，通过改变图片的宽来实现手风琴效果   代码及简单注释如下（因为过多的注释会影响记忆和独立思考，所以今后将注释关键点） jquery代码（3.3.1版）： $(function (...
使用jQuery创建折叠式菜单（手风琴效果）
热门推荐
hanhf的专栏
07-18 1万+
使用jQuery创建折叠式菜单（手风琴效果） 　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion [əˈkɔ:rdiən]）。 　　实现效果如下： 一、HTML代码结构 　　要实现折叠式菜单，代码相当简单，如下所示： &lt;ul class="accordion"&gt; &lt;li class="selec...
Front-end——jQuery实现手风琴效果（轮播图）
weixin_42067873的博客
01-11 1149
本案例使用到： 鼠标点击事件：点击那个图片，就将其对应的图片显示完整 $(this)：代表当前操作的dom对象 $(domObj).siblings()：匹配所有该元素的兄弟元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquer.
【JQuery】jQuery自制简易手风琴效果(附实现原理)
LZGS_4的专栏
08-30 1万+
简易手风琴效果，附实现原理
vue的css深度选择器 deep /deep/
m0_75269526的博客
05-08 692
/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。
使用html和css实现个人简历表单的制作
qq_49370210的博客
05-12 752
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
【CSS基础--CSS选择器的常见用法】
m0_63440113的博客
05-08 377
层叠样式表，由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。
css案例 tab上下滚动，左右滚动
weixin_38982591的博客
05-11 354
【代码】css案例 tab上下滚动，左右滚动。
css: 动态设置网格线
最新发布
1111111111
05-14 281
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
jquery手风琴效果代码
05-26
以下是一个简单的 jQuery 手风琴效果代码： HTML 代码： ``` <div class="accordion-header">Section 1 <p>Content for section 1 goes here. <div class="accordion-header">Section 2 <p>Content for...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值