vue适用于手机点击卡片图片缩放效果



327 1304 435



特效描述:vue适用于手机 点击卡片 图片缩放效果,vue.js制作如何实现图片缩放功能。你点击卡片里的图片,会一个对话框形式打开,图像将放大展示。这个适用于一些手机端图片放大缩放展示代码。

代码结构

1. 引入JS

<script type="text/javascript" src="js/vue.min.js"></script>

2. HTML代码

<div id="app">
  <div class="card">
    <h1 class="card-title">点击图片放大</h1>
    <p class="card-text">这个例子演示了如何实现可缩放的图像vue.js。如果你点击下面的图片,一个对话框将打开,图像将放大展示。</p>
    <div class="card-image">
      <image-dialog thumb="img/s.jpg" full="img/b.jpg" :full-width="945" :full-height="600"></image-dialog>
    </div>
  </div>
</div>
<script id="image-dialog" type="text/x-template">
  <div class="image-dialog">
    <button class="image-dialog-trigger" type="button" @click="showDialog"><img class="image-dialog-thumb" ref="thumb" :src="thumb"/></button>
    <transition name="dialog" @enter="enter" @leave="leave">
      <div class="image-dialog-background" v-show="appearedDialog" ref="dialog">
        <button class="image-dialog-close" type="button" @click="hideDialog" aria-label="Close"></button><img class="image-dialog-animate" ref="animate" :class="{ loading: !loaded }" :src="loaded ? full : thumb"/><img class="image-dialog-full" ref="full" :src="appearedDialog && full" :width="fullWidth" :height="fullHeight" @load="onLoadFull"/>
      </div>
    </transition>
  </div>
</script>
<script>
Vue.component('image-dialog', {
  template: '#image-dialog',
  props: {
    thumb: String,
    full: String,
    fullWidth: Number,
    fullHeight: Number
  },
  data () {
    return {
      loaded: false,
      appearedDialog: false
    }
  },
  methods: {
    showDialog () {
      this.appearedDialog = true
    },
    hideDialog () {
      this.appearedDialog = false
    },
    enter () {
      this.animateImage(
        this.$refs.thumb,
        this.$refs.full
      )
    },
    leave () {
      this.animateImage(
        this.$refs.full,
        this.$refs.thumb
      )
    },
    onLoadFull () {
      this.loaded = true
    },
    animateImage (startEl, destEl) {
      const start = this.getBoundForDialog(startEl)
      this.setStart(start)
      this.$nextTick(() => {
        const dest = this.getBoundForDialog(destEl)
        this.setDestination(start, {
          top: dest.top,
          left: dest.left,
          width: dest.width || this.fullWidth,
          height: dest.height || this.fullHeight
        })
      })
    },
    getBoundForDialog (el) {
      const bound = el.getBoundingClientRect()
      const dialog = this.$refs.dialog
      return {
        top: bound.top + dialog.scrollTop,
        left: bound.left + dialog.scrollLeft,
        width: bound.width,
        height: bound.height
      }
    },
    setStart (start) {
      const el = this.$refs.animate
      el.style.left = start.left + 'px'
      el.style.top = start.top + 'px'
      el.style.width = start.width + 'px'
      el.style.height = start.height + 'px'
      el.style.transitionDuration = '0s'
      el.style.transform = ''
    },
    setDestination (start, dest) {
      const el = this.$refs.animate
      el.style.transitionDuration = ''
      const translate = `translate(${dest.left - start.left}px, ${dest.top - start.top}px)`
      const scale = `scale(${dest.width / start.width}, ${dest.height / start.height})`
      el.style.transform = `${translate} ${scale}`
    }
  }
})
new Vue({
  el: '#app'
})</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片放大镜 图片广告 文字提示框 文字放大缩小 图片放大缩小 数字放大缩小 对联广告 提示框/弹出层 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 缩放放大缩小 缩放切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到