手风琴图片切换效果

最新推荐文章于 2022-06-24 16:52:49 发布
最新推荐文章于 2022-06-24 16:52:49 发布
阅读量623 收藏
点赞数 3
分类专栏： 前端 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul li,ul ol{list-style: none;}
        i,b,em,strong{font-style: normal;}
        body{font-family: '微软雅黑';background: #222;}
        img{display: block;}
        .dh ul{position: relative;overflow: hidden;width: 910px;height: 306px;margin: 60px auto 0;}
        .dh ul li{float: left;width: 108px;overflow: hidden;height: 100%;position: relative;cursor: pointer;}
        .dh ul li a{display: block;width: 100%;height: 100%;}
        .dh ul li .layer{position: absolute;bottom: 0;left: 0;width: 100%;background:rgba(27,29,36,0.75);height: 100%;}
        .dh ul li .layer .p1{position: absolute;bottom: 5px;left: 10px;}
        .dh ul li .layer .p2{position: absolute;bottom: 5px;right: -200%;}
        .dh ul li .layer .p2 b,.dh ul li .layer .p2 span{display: block;font-weight: bold;font-size: 20px;}
        .dh ul li .layer .p1 b,.dh ul li .layer .p1 span{display: block;font-weight: bold;font-size: 14px;}

        .dh ul li.curr{}
        /* .dh ul li.curr .layer .p1{left: -200%;}
        .dh ul li.curr .layer .p2{left: 10px;} */

        .col1{color: #00A39A;}
        .col2{color: #fff;}
    </style>
</head>
<body>
    <div class="dh sfq">
        <ul>
            <li class="curr">
                <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/DH13.jpg" alt=""></a>
                <div class="layer">
                    <p class="p1"><b class="col1">胜率</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">墨子</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U072.jpg" alt=""></a>
                 <div class="layer">
                    <p class="p1"><b class="col1">出厂</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">董卓</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>
                 <div class="layer">
                   <p class="p1"><b class="col1">MVP</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U098.jpg" alt=""></a>
                 <div class="layer">
                    <p class="p1"><b class="col1">场均击杀</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">袁术</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U070.jpg" alt=""></a>
                 <div class="layer">
                    <p class="p1"><b class="col1">场均助攻</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">张郃</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>
                 <div class="layer">
                    <p class="p1"><b class="col1">场均补刀</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
            <li>
            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U068.jpg" alt=""></a>
                 <div class="layer">
                    <p class="p1"><b class="col1">场均金钱</b><span class="col2">NO.1</span></p>
                    <p class="p2"><b class="col2">姜维</b><span class="col1">胜率NO.1</span></p>
                </div>
            </li>
        </ul>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
              // 初始化 第一个 状态
              jQuery('.dh ul li.curr').animate({width:'246px'},'slow');
              jQuery('.dh ul li.curr .layer').animate({height:'60px'},'slow');
              jQuery('.dh ul li.curr .layer .p1').animate({left:'-200%'},'slow');
              jQuery('.dh ul li.curr .layer .p2').animate({right:'145px'},'slow');

              jQuery('.sfq ul li').hover(function(){
                // 获取索引
                 var _index = $(this).index();

                 $(this).addClass('curr')
                 .stop()
                 .animate({
                    width:'246px'
                 },'slow')
                 .siblings()
                 .stop()
                 .animate({
                    width:'108px'
                 },'slow')
                 .removeClass('curr');

                 $(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({
                     height: '100%'
                 },'slow');

                 $(this).find('.layer .p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({
                     right: '145px'
                 },'slow').parent().parent().siblings().find('.layer .p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({
                     right: '-200%'
                 },'slow')

              },function(){
                //移出

              })
        });

    </script>
</body>
</html>
转载自：http://www.qdfuns.com/notes/17946/045eec9223a894c1ea0f4a99ef5ac902.html
源辰_付
关注
专栏目录
手风琴效果（vue实现）
Yanfengting的博客
10-03 9343
效果图： 源码1： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;am
jQuery制作手风琴图片切换效果
http://www.onlyze.cn/
10-23 928
2017年10月23日 代码编写者：李雨泽 HTML文件；               手风琴图片切换效果                                                  作者：默默的墨墨          我的个人拉萨之旅||故事之城                    
css实现手风琴图片特效
springmvc_springdata的专栏
08-22 1387
css实现手风琴图片特效 源代码下载地址：http://www.zuidaima.com/share/1607120235957248.htm
jQuery手风琴样式的图片切换插件
weixin_46133151的博客
01-03 185
在网页中手风琴样式的组件十分常见，我们也分享过很多手风琴样式的菜单、焦点图等，很多都非常实用。这个是一款基于jQuery的手风琴样式图片切换组件，支持水平和垂直两种模式，菜单切换的同时另一边的图片也会跟着切换 ...
2018/2/22 图片手风琴效果
maggie_xff
02-22 251
图片手风琴效果代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
jquery手风琴实现图片切换
06-10
至此，一个具备自动播放和手动切换功能的jQuery手风琴图片切换效果就完成了。你可以根据实际需求调整样式和时间间隔，使其更符合你的网站风格。在压缩包中，"juqery手风琴实现图片切换"文件可能包含了完整的HTML、...
jQuery全屏背景跟随手风琴图片切换特效
06-09
接下来是手风琴图片切换效果。手风琴是一种UI设计模式，它允许内容以折叠或展开的形式呈现。在这个特效中，手风琴图片切换意味着当用户点击或滑动时，图片会像手风琴那样依次展开或收起。这种效果通过jQuery的动画...
jQuery手风琴图片轮播切换
04-07
在网页设计中，动态效果的运用可以极大地提升用户体验，其中jQuery手风琴图片轮播切换是一种常见的交互设计元素。这种效果结合了手风琴折叠展示与图片轮播的功能，使得内容展示既节省空间又具有视觉吸引力。本文将...
flash淘宝折页手风琴图片切换支持自动轮播切换的手风琴
11-17
在Flash环境中，手风琴图片切换效果通常表现为多张图片依次展开和收起，就像手风琴的伸缩动作，用户可以点击或滑动来浏览不同的图片。 接下来是“折页”（Folding）的概念。折页效果通常是将内容以书页的形式呈现，...
flash手风琴图片切换.zip
最新发布
11-17
在手风琴图片切换效果中，JavaScript用于监听用户的点击或滑动事件，改变图片的状态（显示或隐藏），并可能配合CSS进行动画效果的控制。可以使用`addEventListener`来绑定事件，`DOM操作`如`getElementById`和`style...
一个vue的手风琴组件
08-10
这是一个vue的手风琴组件，可用于网站展示图片和相关文字。设计风格和轮播图类似。支持用户自定义样式类。
vue手风琴三种方式
03-07
vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴
jQuery实现 手风琴图片切换效果（ 超简单）
weixin_43297321的博客
06-30 2243
<style> /* 隔行表格 */ table{ border-collapse: collapse; } td{ width: 100px; height: 20px; border: 1px solid tomato; } /* 手风琴 */ ul{ width: 800px; height: 150px; backgro
原生javascript手风琴图片切换案例
小青蛙的博客
03-12 1476
一直想写博客，但是始终静不下心来。如今在新浪上发表第一篇javascript博文，还是相当激动与兴奋的！首先就以简单的手风琴图片切换案例作为第一篇吧！1. 首先观看切换效果：2. javascript面向结构逻辑梳理：(function(){ var con = document.getElementsByClassName('hm_icr_tr')[0]; //包裹层盒子 var aSpan ...
简记：vue实现的手风琴效果
q_qq8的博客
02-14 295
简记：vue实现的手风琴效果 data：{ data: [], activeIndex: '' } methods: { setIndex(index){ this.activeIndex = index } } <div v-for="(item, index) in data"> &lt...
VUE手风琴
weixin_48927323的博客
05-16 570
手写的手风琴，这是效果图，如下 <div v-for="(item,index) in listData" :key="index"> //一级 title <div @click="oneIndexChange(index, item)"> <img v-if="oneIndex == index"/> <img v-esle/> </div> <d
Vue实现手风琴效果
hylshyshm的博客
06-24 984
实现手提琴效果
vue实现手风琴效果
m0_37343874的博客
05-28 503
vue实现手风琴效果 灵感来自于 https://blog.csdn.net/qq_34386468/article/details/85014445?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLear
jQuery实现手风琴图片展示效果：示例与代码
总结来说，这个基于jQuery的手风琴图片展示效果是通过结合HTML结构、CSS样式和JavaScript逻辑来实现的。用户可以通过交互式地切换元素状态，动态控制图片的可见性，从而提供一种吸引人的内容呈现方式。这对于网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值