xml地图|网站地图|网站标签 [设为首页] [加入收藏]

jQuery实现垂直半透明手风琴特效代码分享,简单

2019-11-22 23:48栏目:新闻中心
TAG:

本文实例讲述了基于jquery的手风琴图片展示效果实现方法。分享给大家供大家参考。具体实现方法如下:

今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起,鼠标滑过图片时即可展开完整的图片,这样的效果很常见,所以应用也很广泛,大家可以试试这款jQuery焦点图。

本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下

实现手风琴效果如图所示:

代码运行效果如下图所示:

运行效果图:

js代码:

可提现彩票app 1

index.html页面代码如下:复制代码 代码如下:

---------------------------------效果演示 源码下载---------------------------------

<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript">
      $(function() {
        //获取所有li遍历
        $(".li_list").each(function() {
          //当鼠标进去当前li
          $(this).mouseenter(function() {
            //设置当前元素宽度
            $(this).stop()
                .animate({ "width": "600px" }, 500, "linear");
                //设置同胞元素宽度
                .siblings().stop()
                      .animate({ "width": "100px" }, 500, "linear");
          });
        });
      });
    </script>

html结构:

一款基于jquery的手风琴图片展示效果demo

可提现彩票app 2

css代码:

<div class="item_box box10">
  <div class="item_box_wp">
    <div class="voice_2">
      <ul>
        <li class="li1" id="li1">
          <div class="fold" style="display:none;">

            插件库
          </div>
          <div class="unfold" style="display:block">
            <dl>
              <dt><img src="images/img10.png" /></dt>
              <dd>
              </dd>
              <dd>使用语音外呼的模式将指定的语音呼入至接听人,可通过这种方式为针对性的客户提供会议通知、活动通知,并可通过API接口程序化控制呼出时间、呼出效果反馈</dd>
            </dl>
          </div>
        </li>
        <li class="li2">
          <div class="fold">

            点击呼叫
          </div>
          <div class="unfold">
            <dl>
              <dt><img src="images/img42.png" /></dt>
              <dd>
              </dd>
              <dd>通过APP应用内按钮或浏览器网页按钮点击并发起IP通话、运营商线路通话服务,减少用户交互,提升用户体验</dd>
            </dl>
          </div>
        </li>
        <li class="li3">
          <div class="fold">

            直拨通话
          </div>
          <div class="unfold">
            <dl>
              <dt><img src="images/img49.png" /></dt>
              <dd>
              </dd>
              <dd>无论是智能终端、浏览器模式,通过APP或者网页发起通话,接通方为手机用户或固话用户,常见集成至与企业服务相关的移动应用、企业客服座席。</dd>
            </dl>
          </div>
        </li>
        <li class="li4">
          <div class="fold">

            回拨通话
          </div>
          <div class="unfold">
            <dl>
              <dt><img src="images/img50.png" /></dt>
              <dd>
              </dd>
              <dd>同时通过平台方发起主叫和被叫双方,定制通话方满足不同需求的客户服务,企业服务易可根据具体业务需求为客户提供定制服务</dd>
            </dl>
          </div>
        </li>
        <li class="li5">
          <div class="fold">

            互联网通话
          </div>
          <div class="unfold">
            <dl>
              <dt><img src="images/img51.png" /></dt>
              <dd>
              </dd>
              <dd>基于互联网纯网络通话,无运营商和地域限制,拥有更清晰的语音质量,支持语音三方密钥的加密传输</dd>
            </dl>
          </div>
        </li>
        <li class="li6">
          <div class="fold">

            语音会议
          </div>
          <div class="unfold">
            <dl>
              <dt><img src="images/img52.png" /></dt>
              <dd>
              </dd>
              <dd>同时桥接多人基于IP、电话语音的会议服务,基于API控制会议时长、成员邀请、禁音、移除等功能。</dd>
            </dl>
          </div>
        </li>
      </ul>     
    </div>
  </div>
</div>

Netherlands

为大家分享的jQuery半透明抽屉式手风琴代码如下

 .li_list {
        width: 100px;
        height: 300px;
        list-style: none;
        float: left;
        overflow: hidden;
      }

      .li_list img {
        width: 100%;
        height: 100%;
      }

      .divbg {
        width: 600px;
        height: 300px;
        background: rgba(230, 0, 0, 0.5);
        text-align: center;
        line-height: 300px;
        float: left;
      }

      .divbg span {
        display: block;
        width: 100px;
        height: 300px;
        float: left;
      }

      .div1 {
        width: 500px;
        height: 300px;
        float: left;
      }
      .mo{
        width: 600px;
      }

js代码:

Belgium

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery半透明抽屉式手风琴代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.pic{width:1100px;height:430px;margin:70px auto 0;}
.pic ul li{list-style:none;width:100px;height:429px;float:left;}
.pic .l1{background-image:url(img/1.jpg);}
.pic .l2{background-image:url(img/2.jpg);}
.pic .l3{background-image:url(img/3.jpg);}
.pic .l4{background-image:url(img/4.jpg);width:789px;}
.txt{width:100px; height:429px;background:#000;filter:alpha(opacity=50);background:rgba(0,0,0,.5);}
.txt p{color:#fff;font-family:"微软雅黑";float:left;position:relative;}
.txt .p1{font-size:12px;width:12px;margin:25px 25px 0 20px;}
.txt .p2{font-size:14px;width:14px;margin-top:25px;}
</style>

</head>

<body>

<div class="pic">
 <ul>
 <li class="l1">
  <a href="//www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅||故事之城</p>
  </div>
  </a>
 </li>
 <li class="l2">
  <a href="//www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅||故事之城</p>
  </div>
  </a>
 </li>
 <li class="l3"> 
  <a href="//www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅||故事之城</p>
  </div>
  </a>
 </li>
 <li class="l4">     
  <a href="//www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅||故事之城</p>
  </div>
  </a>
 </li>
 </ul>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".pic ul li").hover(function(){
 $(this).stop(true).animate({width:"789px"},500).siblings().stop(true).animate({width:"100px"},500);
});
</script>
</body>
</html>

html代码:

$(function(){
 //语音通知手风琴效果
 $(".voice_2 ul li").each(function(){
 var fold = $(this).find(".fold");
 var unfold = $(this).find(".unfold");
 if(fold.is(":hidden")){
  $(this).width(680);
 }else{
  $(this).width(100);
 }
 })

 $(".voice_2 ul li").click(function(){
 var li_index = $(this).index();
 $(this).animate({width:680},200);
 $(this).find(".unfold").show();
 $(this).find(".fold").hide();
 $(this).siblings().animate({width:100},200);
 $(this).siblings().find(".unfold").hide();
 $(this).siblings().find(".fold").show();
 })

France

以上就是为大家分享的jQuery半透明抽屉式手风琴代码,希望大家可以喜欢。

<ul class="ul_list">
      <li class="li_list">
        <div class="divbg">
          萌宠
          <div class="div1">
            <img src="img/0.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list">
        <div class="divbg">
          萌宠
          <div class="div1">
            <img src="img/1.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list">
        <div class="divbg">
          萌宠
          <div class="div1">
            <img src="img/2.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list mo">
        <div class="divbg">
          萌宠
          <div class="div1">
            <img src="img/3.jpg" />
          </div>
        </div>
      </li>
    </ul>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

Germany

您可能感兴趣的文章:

  • 让人印象深刻的10个jQuery手风琴效果应用
  • jquery插件制作 手风琴Panel效果实现
  • 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
  • 基于JQuery的一句话搞定手风琴菜单
  • jquery实现手风琴效果实例代码
  • jquery插件开发之实现jquery手风琴功能分享
  • 基于jquery的手风琴图片展示效果实现方法
  • jquery手风琴特效插件
  • jQuery制作效果超棒的手风琴折叠菜单
  • jquery超简单实现手风琴效果的方法
  • jquery实现简单手风琴菜单效果实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • jquery插件制作 手风琴Panel效果实现
  • jQuery制作效果超棒的手风琴折叠菜单
  • 基于jquery的slideDown和slideUp做手风琴
  • jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
  • jquery手风琴特效插件
  • jquery实现手风琴效果实例代码
  • 基于JQuery的一句话搞定手风琴菜单
  • 基于jquery的手风琴图片展示效果实现方法
  • 基于Jquery代码实现手风琴菜单
  • jquery实现手风琴效果

England

您可能感兴趣的文章:

  • jquery插件制作 手风琴Panel效果实现
  • jQuery制作效果超棒的手风琴折叠菜单
  • jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
  • 基于jquery的slideDown和slideUp做手风琴
  • jquery实现手风琴效果实例代码
  • jquery手风琴特效插件
  • 基于Jquery代码实现手风琴菜单
  • 基于JQuery的一句话搞定手风琴菜单
  • 基于jquery的手风琴图片展示效果实现方法
  • jquery实现手风琴效果

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery特效设计有所帮助。

版权声明:本文由可提现彩票app-支持提现彩票app-10元可提现的彩票app发布于新闻中心,转载请注明出处:jQuery实现垂直半透明手风琴特效代码分享,简单