• Tab栏——滑动效果的制作


     如图,达到上述效果,当单击【待映时】,白色滑块移动到该位置,并且【待映】字体变为红色。

    •  1. 创建矩形,调整大小

      

    •  2. 再创建一个矩形,调整大小,填充为黑色,调整透明度到34,大矩形填充为红色(吸原图上的颜色)

      

     •  3. 再创建一个矩形,调整大小,调整为圆角,透明度调整为92

      

     •  4. 复制两个该白块,同时选中,向右拖拽,记下三个白块的 X 和Y值

      

     •  5. 把右边两个白块删掉,拖入一级标题到白块,写入【热映】,调整字体大小,字体改为白色,上下左右居中(操作时候可以把其它矩形锁住)

      

     •  6. 复制该字体到右边,分别改为【待映】和【热片】

      

     •  7. 给白块还有三个字体分别命名,例如:bk, ry, dy, rp (白块,热映首字母拼音)

      

     •  8.  选中【热映】,在检视;栏双击【鼠标单击时】

      

     •  9.  点击【移动】,选中 bk(白块),移动改为【绝对】,X Y值填入第4步记在【便签上的值】,动画改为【线性】,时间 200 毫秒,点击【确定】

        同理,给另外两个字体,进行同样的操作,只是不同的 XY值

      

     •  10.  选中【热映】,鼠标右键,点击【交互样式】

      

     •  11.  点击【选中】,修改字体颜色为红色(吸色),同理给另外两个字体进行同样的设置

       

     •  12.  同时选中这三个字体,鼠标右键【设置选项组】,命个名,确定。

      

     •  13.  选中【热映】,双击右边【bk to (482, 93) 线性 200 ms】这段绿色字体

      

    •  14.  点击【设置选中】、 选择【当前元件】(true),确定

      

     •  15.  同理,复制该效果,到【待映】和【热片】上(因为设置时选的当前元件,所以复制过去就行),

        注意一定要在【Case 1】下复制和粘贴

      

       

     •  16.  选中【热映】,在右边【选中】打钩,这里是默认初始选中状态

      

     •  预览就完事啦~

      

       

    一个奋斗中的产品小白
  • 相关阅读:
    js获取当前时间
    jQuery动画
    label用js,jquery取值赋值,以及怎么在后台取值
    jquer 事件,选择器,dom操作
    linq分页组合查询
    linq的简单增删改查
    内置对象session ,cookic,Application,ViewState
    listview控件及其与数据库的连接
    Mybatis 学习
    UML类图的6中关系
  • 原文地址:https://www.cnblogs.com/dabai123/p/12030798.html
Copyright © 2020-2023  润新知