限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 动画效果

vue产品左右展开收缩参数对比动画特效代码

所属分类： 网页特效-动画效果    2024-12-04 03:12:42

 3.3K  0  查看评论 (0)
vue产品左右展开收缩参数对比动画特效代码 ie兼容8
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

vue产品左右展开收缩参数对比动画特效代码（共3个文件）

    • index.html

使用方法

  • code
  • source
  1. new Vue({

  2.   el: "#container",

  3.   data: {

  4.     show_device: "",

  5.     iphone: {

  6.       summary: {

  7.         announced: {

  8.           title: "Announced",

  9.           value: "13 Oct 2020",

  10.           icon: ""

  11.         },

  12.         os: {

  13.           title: "OS",

  14.           value: "iOS 14.4",

  15.           icon: ""

  16.         },

  17.         weight: {

  18.           title: "Weight",

  19.           value: "228g",

  20.           icon: ""

  21.         },

  22.         dim: {

  23.           title: "Dimensions",

  24.           value: "160.8 x 78.1 x 7.4 mm",

  25.           icon: ""

  26.         }

  27.       },

  28.       summary_large: {

  29.         size: {

  30.           title: "Size",

  31.           value: '6.7"',

  32.           subvalue: "1284x2778 px",

  33.           icon: ""

  34.         },

  35. 

  36.         camera: {

  37.           title: "Camera",

  38.           value: "12MP",

  39.           subvalue: "2160p",

  40.           icon: ""

  41.         },

  42.         memory: {

  43.           title: "Memory",

  44.           value: "6GB RAM",

  45.           subvalue: "Apple A14 Bionic",

  46.           icon: ""

  47.         },

  48.         battery: {

  49.           title: "Battery",

  50.           value: "3687mAh",

  51.           subvalue: "Li-Ion",

  52.           icon: ""

  53.         }

  54.       }

  55.     },

  56.     galaxy: {

  57.       summary: {

  58.         announced: {

  59.           title: "Announced",

  60.           value: "14 Jan 2021",

  61.           icon: ""

  62.         },

  63.         os: {

  64.           title: "OS",

  65.           value: "Android 11, One UI 3.1",

  66.           icon: ""

  67.         },

  68.         weight: {

  69.           title: "Weight",

  70.           value: "229g",

  71.           icon: ""

  72.         },

  73.         dim: {

  74.           title: "Dimensions",

  75.           value: "165.1 x 75.6 x 8.9 mm",

  76.           icon: ""

  77.         }

  78.       },

  79.       summary_large: {

  80.         size: {

  81.           title: "Size",

  82.           value: '6.8"',

  83.           subvalue: "1440x3200 pixels",

  84.           icon: ""

  85.         },

  86. 

  87.         camera: {

  88.           title: "Camera",

  89.           value: "108MP",

  90.           subvalue: "4320p",

  91.           icon: ""

  92.         },

  93.         memory: {

  94.           title: "Memory",

  95.           value: "16GB",

  96.           subvalue: "Exynos 2100",

  97.           icon: ""

  98.         },

  99.         battery: {

  100.           title: "Battery",

  101.           value: "5000mAh",

  102.           subvalue: "Li-Ion",

  103.           icon: ""

  104.         }

  105.       }

  106.     }

  107.   },

  108.   methods: {

  109.     toggleDevice(device) {

  110.       if (this.show_device == device) {

  111.         this.show_device = '';

  112.         return;

  113.       }

  114. 

  115.       this.show_device = device;

  116.     }

  117.   }

  118. })

new Vue({
  el: "#container",
  data: {
    show_device: "",
    iphone: {
      summary: {
        announced: {
          title: "Announced",
          value: "13 Oct 2020",
          icon: ""
        },
        os: {
          title: "OS",
          value: "iOS 14.4",
          icon: ""
        },
        weight: {
          title: "Weight",
          value: "228g",
          icon: ""
        },
        dim: {
          title: "Dimensions",
          value: "160.8 x 78.1 x 7.4 mm",
          icon: ""
        }
      },
      summary_large: {
        size: {
          title: "Size",
          value: '6.7"',
          subvalue: "1284x2778 px",
          icon: ""
        },

        camera: {
          title: "Camera",
          value: "12MP",
          subvalue: "2160p",
          icon: ""
        },
        memory: {
          title: "Memory",
          value: "6GB RAM",
          subvalue: "Apple A14 Bionic",
          icon: ""
        },
        battery: {
          title: "Battery",
          value: "3687mAh",
          subvalue: "Li-Ion",
          icon: ""
        }
      }
    },
    galaxy: {
      summary: {
        announced: {
          title: "Announced",
          value: "14 Jan 2021",
          icon: ""
        },
        os: {
          title: "OS",
          value: "Android 11, One UI 3.1",
          icon: ""
        },
        weight: {
          title: "Weight",
          value: "229g",
          icon: ""
        },
        dim: {
          title: "Dimensions",
          value: "165.1 x 75.6 x 8.9 mm",
          icon: ""
        }
      },
      summary_large: {
        size: {
          title: "Size",
          value: '6.8"',
          subvalue: "1440x3200 pixels",
          icon: ""
        },

        camera: {
          title: "Camera",
          value: "108MP",
          subvalue: "4320p",
          icon: ""
        },
        memory: {
          title: "Memory",
          value: "16GB",
          subvalue: "Exynos 2100",
          icon: ""
        },
        battery: {
          title: "Battery",
          value: "5000mAh",
          subvalue: "Li-Ion",
          icon: ""
        }
      }
    }
  },
  methods: {
    toggleDevice(device) {
      if (this.show_device == device) {
        this.show_device = '';
        return;
      }

      this.show_device = device;
    }
  }
})

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 产品展示展开收缩动画特效css3动画
相关资源 / 动画效果
查看更多

javascript基于SVG路径文本动画特效

 Lazy Line Painter是一款svg路径动画插件，共包含6个html页面文件，用于创建响应式SVG路径动画，每个路径的持续时间都可在代码中调整。
  动画效果
 7238  0

CSS3实现的淡出淡入文本文字显示隐藏动画特效

 一款由CSS3编写文本文字动画效果，可让指定标签文字按顺序进行显示隐藏，带淡出淡入的显示动画。
  动画效果
 9635  0

jquery鼠标悬停触发背景动画特效

 鼠标hover经过按钮上方，触发button背景色淡出淡入动画特效！
  动画效果
 9454  0

javascript创建的星星轨迹动画特效

 一款鼠标移动触发的星星散落动画，移动鼠标时呈现星星飘落动画。五颜六色的星星图标淡出淡入。
  动画效果
 9690  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论