精华内容
下载资源
问答
  • 您想要为您的 iOS 项目使用那些花哨的拉出式左侧抽屉菜单之一。 你确保你的根视图控制器是一个 DrawerContainerViewController(见 AppDelegate.swift) 您为要为其提供 Drawer 的视图的 DrawerViewController ...
  • 右侧弹出抽屉

    2014-08-27 19:11:30
    右侧弹出抽屉效果,希望能对需要的人提供些帮助
  • 仿qq抽屉弹出方式源码,功能,窗口靠边时实现自动停靠收放功能,代码简洁,注解详细,供喜欢抽屉式弹出收放功能的朋友一同研究!
  • wxml: ...点击弹出</view> <view class="zhezhao" data-statu="close" bindtap="close" wx:if="{{gouwu==true}}"> <view class="shoping" animation="{{animationData}}"> .

    在这里插入图片描述
    wxml:

     <view bindtap="shop" data-statu="open">点击弹出</view>
    
        <view class="zhezhao" data-statu="close" bindtap="close" wx:if="{{gouwu==true}}">
                    <view class="shoping" animation="{{animationData}}">
                     
              	</view>
       </view>
    

    css:

    .zhezhao{
        width: 100%;
        height: 100%;
        background-color: #999999; 
        filter: alpha(opacity=20);
        background:rgba(64, 64, 65, 0.1);  
        position: absolute;
        top: 0px;
    }
    .shoping{
        width: 100%;
        height: 60%;
        background: rgba(47, 47, 48, 0.9);
        position: absolute;
        bottom: 0rpx;
    
    }
    

    js:

    
    showModalStatus: false,
    zhezhao:false,
    gouwu:false,
       //弹出
        shop:function(e){
          var currentStatu = e.currentTarget.dataset.statu;
          console.log(currentStatu);
          this.util(currentStatu)
        },
        //关闭
        close:function(e){
          var currentStatu =e.target.dataset.statu;
          console.log(currentStatu);
          this.util(currentStatu) 
        },
      //综合方法
      util: function(currentStatu){
          /* 动画部分 */
          // 第1步:创建动画实例 
          var animation = wx.createAnimation({
            duration: 100,  //动画时长
            timingFunction: "linear", //线性
            delay: 0  //0则不延迟
          });
          // 第2步:这个动画实例赋给当前的动画实例
          this.animation = animation;
          // 第3步:执行第一组动画:Y轴偏移240px后(盒子高度是240px),停
          animation.translateY(240).step();
       
          // 第4步:导出动画对象赋给数据对象储存
          this.setData({
            animationData: animation.export()
          })
          // 第5步:设置定时器到指定时候后,执行第二组动画
          setTimeout(function () {
            // 执行第二组动画:Y轴不偏移,停
            animation.translateY(0).step()
            // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
            this.setData({
              animationData: animation
            })
            
            //关闭抽屉
            if (currentStatu == "close") {
              this.setData(
                {
                  gouwu:false,
                  showModalStatus: false
                }
              );
            }
          }.bind(this), 200)
        
          // 显示抽屉
          if (currentStatu == "open") {
            this.setData(
              {
                gouwu:true,
                showModalStatus: true
              }
            );
          }
        },
    
    展开全文
  • $(function(){ layer.open({ type: 1, // r表示right,b表示bottom ... title: '抽屉效果', // // anim 特效 0-平滑放大 1-从上掉落 2-从底部往上滑入 3-从左滑入 4-从左翻转 5-渐显 5-抖动 ..
     $(function(){
            layer.open({
                type: 1,
                // r表示right,b表示bottom
                offset: 'rb',
                // 标题
                title: '抽屉效果',
                //
                // anim 特效 0-平滑放大 1-从上掉落 2-从底部往上滑入 3-从左滑入 4-从左翻转 5-渐显 5-抖动
                anim: 2,
                // 第一个参数宽度,第二个参数高度
                area: ['558px', '100%'],
                // 内容区 在body中写入<div id="draw">。。。。</div>代码,即弹窗内容
                content: $("#drawer").html(),
            })
        });

     

    展开全文
  • Micro SIM卡座 6Pin 弹出式 altium版本封装库。 包含3D图。
  • css3动画:弹出式菜单

    2017-10-01 21:32:00
    css3动画:弹出式菜单 今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子。 注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷。 弹出式菜单 效果: 要做这个效果...

    css3动画:弹出式菜单

    今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子。

    注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷。

    弹出式菜单

    效果:

    要做这个效果主要用到的是translate(),思路就是把整个菜单放到右下角,并且设置rigth负值,当hover的时候,translate()的x值设为负值,菜单项就会往左平移,鼠标移出时,也会收回去。

    代码如下:

    <div class="side-menu">
        <div class="item" id="item1">item1</div>
        <div class="item" id="item2">item2</div>
        <div class="item" id="item3">item3</div>
        <div class="item" id="item4">item4</div>
    </div>
    .side-menu{
        position: fixed;
        bottom: 50px;
        right: -100px;
    }
    .item{
        height: 30px;
        line-height: 30px;
        width: 150px;
        transition: 0.5s;
        color: #fff;
        font-size: 18px;
    }
    .item:hover{
        transform: translate(-100px);
    }
    #item1{
        background: green;
    }
    #item2{
        background: red;
    }
    #item3{
        background: blue;
    }
    #item4{
        background: grey;
    }

    我们可以随自己的喜好试着增加一些样式的变化,这里我随便做一个demo:

    主要把初始化的透明度设为0.5,hover的高度、行高、字体大小和透明度改变:

    .item{
            opacity: 0.5;
        }
    .item:hover{
        height: 50px;
        line-height: 50px;
        font-size: 30px;
        opacity: 1;
    }

    弹出式菜单说到这里,我们以后分享更多css3动画的应用。

    转载于:https://www.cnblogs.com/dkplus/p/7617876.html

    展开全文
  • 容器使用flex布局(关于flex布局,可以参考阮一峰大牛的flex教程),由于需要按钮上,可以让子元素从下往上布局,将flex-derection设置为column-reverse;另外flex子元素默认缩小(flex-shrink)的,可以直接将flex设置...

    先上效果图

    实现思路及问题

    • 通过动态更改容器的高度,结合overflow:hidden属性动态显示
    • 容器使用flex布局(关于flex布局,可以参考阮一峰大牛的flex教程),由于需要按钮上弹,可以让子元素从下往上布局,将flex-derection设置为column-reverse;另外flex子元素默认缩小(flex-shrink)的,可以直接将flex设置为none,即不放大也不缩小。
    • 后面只是一个简单的animation动画,并没有什么复杂的
    • 由于不希望界面一打开就出现动画,我并没有直接赋值false或者true,而是先赋值null,然后点击后再赋值0和1。这样就不会一开始就出现动画了。

    下面是代码

    index.wxml

    <view class='pop-box {{unfold==0?"on":""}} {{unfold==1?"off":""}}'>
      <view bindtap='unfold'>点我</view>
      <view>222</view>
      <view>333</view>
    </view>
    复制代码

    index.wxss

    .pop-box {
      width: 120rpx;
      height: 120rpx;
      border: 1rpx solid pink;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      overflow: hidden;
      position: fixed;
      bottom: 100rpx;
      right: 50rpx;
    }
    
    .pop-box>view {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: none;
    }
    
    .pop-box>view:nth-child(1) {
      background-color: rgb(243, 81, 17);
    }
    
    .pop-box>view:nth-child(2) {
      background-color: rgb(192, 255, 245);
    }
    
    .pop-box>view:nth-child(3) {
      background-color: rgb(128, 32, 218);
    }
    
    @keyframes unfold {
      0% {
        height: 120rpx;
      }
    
      80% {
        height: 500rpx;
      }
    
      100% {
        height: 420rpx;
      }
    }
    
    @keyframes shrink {
      0% {
        height: 420rpx;
      }
    
      20% {
        height: 500rpx;
      }
    
      100% {
        height: 420rpx;
      }
    }
    .on {
      height: 420rpx;
      animation: unfold 1.2s 1 ease-out;
    }
    .off {
      height: 120rpx;
      animation: shrink 1.2s 1 ease-out;
    }
    
    复制代码

    index.js

    data: {
        unfold: null //0为展开,1为收缩
      },
        unfold() {
        var unfold = this.data.unfold
        if (unfold === null) { //默认为收缩
          unfold = 1   
        }
        if (unfold == 0) {   //点击后改变展开样式
          unfold = 1
        } else {
          unfold = 0
        }
        this.setData({  //赋值
          unfold: unfold
        })
      }
    复制代码

    github

    个人博客

    转载于:https://juejin.im/post/5bf0fabc518825171726f7b6

    展开全文
  • 演示图 源码 wxml文件 ...弹出车牌输入键盘</text> <view>{{carId}}</view> <!--mask--> <view class="drawer_screen" bindtap="showCarNo" data-statu="close" wx:.
  • 作者跑路,停止维护AcodeHrLayoutandroid底部弹出抽屉布局,可以设置抽屉布局默认露出的高度,和预计到达的高度,还可增加headerview,titleview。内部可以嵌套Recyleview,ListView,ScrlloView,NestScrollview和常用...
  • 感觉使用抽屉查看短信麻烦,于是自己写了一个模仿iphone查看的短信的小程序,自己用,挺好的。实现原理主要是activity的背景半透明,加上收到短信开启服务和桌面图标开启服务。目前只做了收到1条短信显示,如果是长...
  • Delphi弹出式菜单设计.5

    千次阅读 2011-10-16 14:15:59
    5.1弹出菜单  弹出菜单又称为快捷菜单,是在某个组件上右击时弹出的菜单。快捷菜单中提供了与该组件相关的命令,如下图所示。 与主菜单相比,弹出菜单具有更高的灵活性,它不但可以用于窗体本身,还可以...
  • 有两种使用方法:1)上下文的菜单,即右键单击显示的菜单 2)弹出菜单,即单击按钮后显示的菜单 菜单种显示一个项目,用到MenuItem:提供一种熟悉的方式来响应被触发的菜单项。它有一个触发信号triggered()。 Menu的...
  • ListView抽屉式展示

    2015-07-09 14:48:57
    点击ListView顶部的一个按钮,隐藏区域弹出显示,同时ListView下移
  • 应用场景:从下边或者右边拖出或弹出一个控件,提供操作快捷方式; 问题:滑动抽屉由什么组成?把手和隐藏控件;handle and content 思考:1.抽屉的把手用什么做?drag a handle to bring the content
  • android 抽屉式滑动demo

    2015-01-16 10:49:29
    android 抽屉式侧拉demo
  • Android动画实战 一 实现下拉式窗帘动画和上拉式抽屉动画,详细解析可以看http://blog.csdn.net/u013718120/article/details/51161989
  • 三行代码 废话不在前面说,直接上代码! 讲 XML 根布局设置为 CoordinatorLayout <android.support.design.widget.CoordinatorLayout ...将要要弹出的三段式抽屉根布局设置 behavior_fitToConten
  • Qt 实现抽屉式菜单

    2017-10-26 13:38:38
    可以正常编译,编译器是Qt4版本,很适合开发界面使用;代码可以直接拿过来使用。非常好用。
  • 最近比较忙,因为月底要上线App。...今天,我将和大家分享我们Android动画之旅系列的最后一个实战项目:下拉式窗帘动画和上拉式抽屉动画。目前这种动画效果在App中也是比较流行的,ok,我们一起先来看看效
  • 抽屉

    2015-11-20 20:34:05
    这是 iOS 上一个弹出式菜单,用户在某处拖拽时显示,菜单显示在用户拖拽的地方。 MLPPopupMenu MLPPopupMenu 是 iOS 上实现了任意 UIControl 上的弹出菜单效果。 UIMenuBar UIMenuBar 是一个 iOS ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 目录 ps:如果你觉得对你有帮助的话,麻烦点个赞,加个关注 效果图: 代码: 效果图: 代码: res/layout/activity_main.xml <?xml version="1.0" encoding="utf-8"?> ...--设置抽屉控件--> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,923
精华内容 1,169
关键字:

弹出式抽屉