jquery写手风琴代码

最新推荐文章于 2024-07-19 08:43:05 发布
最新推荐文章于 2024-07-19 08:43:05 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery 手风琴 代码 手风琴代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangbei85/article/details/53606640
版权

jquery写手风琴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px auto;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 910px;
            height: 454px;
            border: 1px solid red;
            margin-top:100px;
            position: relative;
            overflow: hidden;
        }
        .box ul li{
            width:760px;
            height:454px;
            position: absolute;
            top: 0px;}
        .box ul li img{
            float:left;
        }
        .box ul li h3{
            width: 30px;
            height: 454px;
            float: left;
        }
        .li01 h3{
            background: yellow;
        }
        .li02 h3{
            background: blue;
        }
        .li03 h3{
            background: orange;
        }
        .li04 h3{
            background: red;
        }
        .li05 h3{
            background: purple;
        }
        .li06 h3{
            background: pink;
        }
        .box ul li.li01{position: absolute;left: 0px;}
        .box ul li.li02{position: absolute;left: 760px;}
        .box ul li.li03{position: absolute;left: 790px;}
        .box ul li.li04{position: absolute;left: 820px;}
        .box ul li.li05{position: absolute;left: 850px;}
        .box ul li.li06{position: absolute;left: 880px;}
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js">   
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".li01 h3").mouseenter(function(){
                $(".li02").animate({"left":760},1000)
                $(".li03").animate({"left":790},1000)
                $(".li04").animate({"left":820},1000)
                $(".li05").animate({"left":850},1000)
                $(".li06").animate({"left":880},1000)
            })
            $(".li02 h3").mouseenter(function(){
                $(".li02").animate({"left":30},1000)
                $(".li03").animate({"left":790},1000)
                $(".li04").animate({"left":820},1000)
                $(".li05").animate({"left":850},1000)
                $(".li06").animate({"left":880},1000)
            })
            $(".li03 h3").mouseenter(function(){
                $(".li02").animate({"left":30},1000)
                $(".li03").animate({"left":60},1000)
                $(".li04").animate({"left":820},1000)
                $(".li05").animate({"left":850},1000)
                $(".li06").animate({"left":880},1000)
            })
            $(".li04 h3").mouseenter(function(){
                $(".li02").animate({"left":30},1000)
                $(".li03").animate({"left":60},1000)
                $(".li04").animate({"left":90},1000)
                $(".li05").animate({"left":850},1000)
                $(".li06").animate({"left":880},1000)
            })
            $(".li05 h3").mouseenter(function(){
                $(".li02").animate({"left":30},1000)
                $(".li03").animate({"left":60},1000)
                $(".li04").animate({"left":90},1000)
                $(".li05").animate({"left":120},1000)
                $(".li06").animate({"left":880},1000)
            })
            $(".li06 h3").mouseenter(function(){
                $(".li02").animate({"left":30},1000)
                $(".li03").animate({"left":60},1000)
                $(".li04").animate({"left":90},1000)
                $(".li05").animate({"left":120},1000)
                $(".li06").animate({"left":150},1000)
            })
        })
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li class="li01">
                <h3></h3>
                <img src="images/1.jpg">
            </li>
            <li class="li02">
                <h3></h3>
                <img src="images/2.jpg">
            </li>
            <li class="li03">
                <h3></h3>
                <img src="images/3.jpg">
            </li>
            <li class="li04">
                <h3></h3>
                <img src="images/4.jpg">
            </li>
            <li class="li05">
                <h3></h3>
                <img src="images/5.jpg">
            </li>
            <li class="li06">
                <h3></h3>
                <img src="images/6.jpg">
            </li>
        </ul>
    </div>

</body>
</html>

图片1：宽730px 高454px
图片2：宽730px 高454px
图片3：宽730px 高454px
图片4：宽730px 高454px
图片5：宽730px 高454px
图片6：宽730px 高454px

注意：要引进jquery的包，版本可以是其他版本，不一定是3.1.1版本。图片的宽度是730px；li的宽度是760px；总宽度是910px；高度都是454p x 。引用jquery包的格式如下：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
「已注销」
关注
专栏目录
jq手风琴，源码
09-28
jq手风琴，源码
js手风琴代码
weixin_30359021的博客
12-31 148
html部分 <body> <div class="wrap"> <div class='tab' id='tab'> <div class='tabbd'> <dl class='selected'> <dt><a href='javascript:'&g...
(四)原生js案例之手风琴效果
最新发布
峰会路转的博客
07-19 902
手风琴效果也是业务开发中一个比较常见的效果,类似QQ那样的折叠功能。
jQuery手风琴特效(含完整源码)
执念斩长河
06-02 1695
本特效所有图片叠加，鼠标指针移动一张图片，图片变大，鼠标离开，图片原位。因此mouse事件监听非常重要！
手风琴 jquery 代码
zt_vicky的博客
01-04 296
//页面加载完执行代码 $(function(){ // var $accordion = $('.accordion') //获取页面元素 $accordion.children('.content').not(':first').hide(); //给H4绑定事件，点击时显示当前h4的下一个.content $accordion.find('h4').click(fu
<jQuery> 七. 手风琴案例
weixin_30662109的博客
01-10 147
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <...
jQuery扁平手风琴代码
10-25
在文档加载完成后，使用jQuery编写JavaScript代码来实现手风琴功能。当用户点击标题时，会切换内容区域的显示状态： ```javascript $(document).ready(function() { // 初始状态下，第一个面板展开 $('#...
jquery自动手风琴 jquery自动手风琴代码下载.zip
11-24
以下是一个简单的jQuery自动手风琴代码示例： ```html <!DOCTYPE html> <title>jQuery自动手风琴示例 .accordion { width: 300px; } .accordion h3 { cursor: pointer; } .accordion .content { ...
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
jQuery多级下拉垂直手风琴代码.zip
07-11
"jQuery多级下拉垂直手风琴代码"就是一个典型的示例，它利用jQuery的功能来创建一种特殊的导航菜单，即多级下拉垂直手风琴效果。这种效果使得用户能够在一个有限的空间内浏览层次分明的大量信息，提高用户体验。 ...
使用jQuery写手风琴效果，一行代码全部实现
2301_76766756的博客
08-17 614
首先就是大家经常写jq用到的引入js。下面写css内容，添加样式
手风琴js代码
11-07
手风琴js代码，下载下来，只要修改图片，您就可以直接可以使用！
手风琴菜单，极简代码
04-27
手风琴的一个css效果，调用简单。
纯js实现手风琴效果代码
10-21
主要为大家详细介绍了纯js实现手风琴效果代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现手风琴效果
08-07
使用jQuery技术实现手风琴菜单和图片的切换效果，简单易懂，清晰明了。 详情可以查看博客：https://blog.csdn.net/fengzhen8023/article/details/81480794
用jQuery实现手风琴动效
sinat_25017107的博客
09-12 751
我们以前有在网页上看过手风琴样式的图片切换，默认情况是这样的： 图片是这样叠加在一起的，当鼠标滑动到其中一张图片上，它会进行展开，显示成一张完整的图片，同时其他几张图片会隐藏更多的部分，演示的截图如下： 图片就是这样“点谁谁展开”啦~ 下面我将介绍一下这个手风琴动效的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
【JS】实现手风琴效果
m0_50947589的博客
05-16 406
js实现手风琴效果
【JS案例】JS实现手风琴效果
Ghmin的博客
08-29 2708
因为有多个一级菜单，并且当一个一级菜单展开时，其他的需要收起，那么怎么知道每个菜单当前状态呢，我这里是使用自定义元素属性来实现：给设置status属性，定三个值：1.opened // 表示二级菜单打开状态2.playing // 表示正在打开或关闭状态3.closed // 表示二级菜单关闭状态两个相关方法：setAttribute(name,value) 设置元素属性值getAttribute(name) 获取元素属性值。
用js写出手风琴效果
qq_68446882的博客
11-06 3165
手风琴效果 完成基本的布局后通过css对样式进行一下美化（css代码放到了后文）然后通过js代码的引入渲染后变成下面这样 （引入的数据是自己写的一个数组也放到了下文data.js中） 完成以下效果如下首先我们来获取一下box1因为是用box1中的点击来控制样式的 完成后给box1一个for循环并绑定点击事件 然后进行判断并添加一个排它，即 点击任意一张图时，全部图的宽设为130px，然后将点击的那张宽设为500
使用jQuery实现手风琴式图片展示效果
通过实例代码展示了一个基于jQuery的手风琴图片展示效果的实现过程。" 在网页设计中，手风琴效果是一种常见的交互设计模式，它允许用户逐个展开或关闭内容区域，节省空间同时提供良好的用户体验。在这个实例中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值