jquery之手风琴

最新推荐文章于 2022-11-06 16:08:12 发布
最新推荐文章于 2022-11-06 16:08:12 发布
阅读量233 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxd1008/article/details/54861136
版权


<!DOCTYPE html>



<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
   
    <link href="~/Areas/CssJquery/CSS/AccordionDemo.css" rel="stylesheet" />
    <script src="~/Areas/CssJquery/JS/AccordionDemo.js"></script>
</head>
<body>
    <div >
        <ul>


            <li class="li" style="background-image: url(/Areas/CssJquery/Img/s1.jpg)">
                <div class="uldiv" >
                    <p>秋意渐，剑风凉，池边萧萧木。</p>
                    <p>相思楚，乡关暮，夜深谁与渡。</p>
                </div>
            </li>
            <li class="li" style="background-image: url(/Areas/CssJquery/Img/s2.jpg)">
                <div class="uldiv">
                    <p>百花竞妍梅自孤，</p>
                    <p>品高何须同入俗。</p>


                </div>
            </li>
            <li class="li" style="background-image: url(/Areas/CssJquery/Img/s3.jpg)">
                <div class="uldiv">
                    <p>待到飞雪舞青城，</p>
                    <p>枝枝瓣瓣见风骨。</p>
                </div>
            </li>
            <li class="li" style="background-image: url(/Areas/CssJquery/Img/s4.jpg)">
                <div class="uldiv">
                    <p>秋意渐，剑风凉，池边萧萧木。</p>
                    <p>相思楚，乡关暮，夜深谁与渡。</p>
                </div>
            </li>
            <li class="li" style="background-image: url(/Areas/CssJquery/Img/s5.jpg)">
                <div class="uldiv">
                    <p>秋意渐，剑风凉，池边萧萧木。</p>
                    <p>相思楚，乡关暮，夜深谁与渡。</p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>


js----------------------------------------------------------------------------------

$(function () {
    $(".li").click(function () {
        $(this).siblings(".li").stop(true, true);
        $(this).siblings(".li").animate({ 'width': '100px' }, 500);
        $(this).animate({ 'width': '740px' }, 1000);
    })
})


cxd1008
关注
专栏目录
jquery实现手拉风琴案例
温柔女魔头
01-24 436
HTML &lt;ul&gt; &lt;li class="check"&gt; &lt;span&gt;标题一&lt;/span&gt; &lt;div&gt;我是下拉的菜单&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;
jQuery 实现手风琴效果
最新发布
m0_65627447的博客
11-28 1621
jQuery 实现手风琴效果
js效果之口风琴式导航栏
weixin_30593261的博客
03-23 215
初学网页，确实对于一些特效不是很懂，尤其对我只是在W3C上学过一点点皮毛的人，实际上网上有很多关于js特效的素材网站，个人收集如下： http://www.drame.cn/javascript/ http://down.admin5.com/texiao/ http://www.lanrentuku.com/js/ http://www.kaiwo123.com/ http://sc....
jQuery制作手风琴
weixin_57762662的博客
05-29 1800
Hi，好久不见，想信大家都对jQuery动画效果有一点的了解，所以今天本人用jQuery动画效果来做一个手风琴效果。 样式展示：这里我用了三个div标签来分了三个职业，背景采用了粉色，每个职业框下面还有三个英雄名，不过被我隐藏； 效果展示：当我把鼠标移入随机一个职业框时，这个职业框就会以下拉的方式打开并显示英雄名，再当我们把鼠标移出时，英雄框就会收回。 代码讲解：第一步写上三个div标签，这三个div标签都再次新建一个div标签，在再次创建的标签里新建三个span标签，在这个标签里写上职业英雄名，
JQuery实现手风琴
等归,的博客
11-06 274
jQuery实现手风琴
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
jQuery手风琴图片轮播切换
04-07
**jQuery手风琴图片轮播切换详解** 在网页设计中，动态效果的运用可以极大地提升用户体验，其中jQuery手风琴图片轮播切换是一种常见的交互设计元素。这种效果结合了手风琴折叠展示与图片轮播的功能，使得内容展示既...
jquery手风琴实现图片切换
06-10
至此，一个具备自动播放和手动切换功能的jQuery手风琴图片切换效果就完成了。你可以根据实际需求调整样式和时间间隔，使其更符合你的网站风格。在压缩包中，"juqery手风琴实现图片切换"文件可能包含了完整的HTML、...
jquery实现手风琴效果
01-21
本文实例讲述了jquery实现手风琴效果的代码。分享给大家供大家参考。具体如下： 效果过程就是当鼠标覆盖图片时，这张图片的宽度变大，其他兄弟图片宽度变小，效果如下： 具体代码如下 <!DOCTYPE ...
图片滑动（扩展/收缩）口风琴展示效果
08-12
有如下特色： 1，有四种方向模式选择； 2，结合tween算法实现多种滑动效果； 3，能自动根据滑动元素计算展示尺寸； 4，也可自定义展示或收缩尺寸； 5，可扩展自动切换功能； 6，可扩展滑动提示功能。
jquery自动手风琴 jquery自动手风琴代码下载.zip
11-24
《jQuery自动手风琴效果详解及代码实现》 在网页设计与开发中，为了提高用户体验，经常使用各种交互效果来增强页面的动态性。其中，jQuery自动手风琴（Accordion）效果是一种常见的交互元素，它将多段内容折叠在一...
jquery之仿京东菜单
陈小丹的日记
02-04 2089
$(function () {     //上菜单     $("#ListTopUL li").hover(function () {         //$(this).addClass("ListTopULhover");         //$(this).siblings(this).removeClass("ListTopULhover");         var i =
jquery 开始与结束方法 loading窗
陈小丹的日记
02-04 1067
$(function () {     $(document).ajaxStart(function () {         //alert("正在加载");         $(".loadDiv").show();     }).ajaxStop(function () {         //alert("结束加载");         $(".loadDiv").hide(3
jquery大全
陈小丹的日记
02-04 396
jQuery 元素选择器 $("*") 所有元素 $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("#lastname") id="lastname" 的元素 $(".intro") 所有 class="intro" 的元素 $("p") 所有 <p> 元素 $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 $("p:first") 第一个 <p> 元素 $("p:last")
jquery之鼠标移动[沸腾京东]
陈小丹的日记
02-04 279
$(function () {     var d1left = $("#d1").offset().left;     var d2left = $("#d2").offset().left;     var d3left = $("#d3").offset().left;     var d4left = $("#d4").offset().left;     var longSle
jquery之窗口拖动
陈小丹的日记
02-04 257
$("#showTitle").mousedown(function (e) {         vbool = true;         vHeight = e.pageY;         vWidth = e.pageX;         cHeight = vHeight - $("#show").offset().top;         cWdith = vWidth -
jquery之验证插件jquery.validate.js
陈小丹的日记
02-04 243
<form action="123.html"> <p>用 户 名：<input type="text" name="user" class="required" minlength="2" /></p> <p>电子邮件：<input type="text" name="email" class="required email"/></p> <p>网　　址：<input type="text" name="url" class="ur
jquery之滚楼
陈小丹的日记
02-04 237
$(function () {     $(" #ul1 li").hover(function () {         $(this).addClass("lihover");     }, function () {         $(this).removeClass("lihover");     });     //$(" #ul1 li").click(func
使用jQuery实现手风琴式图片展示效果
"这篇文章主要讲解了如何使用jQuery来实现手风琴式的图片展示效果，涉及到jQuery事件处理和CSS样式的动态改变，具有很高的实用价值。通过实例代码展示了一个基于jQuery的手风琴图片展示效果的实现过程。" 在网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值