动态立体盒子效果
vue 2017-12-29 10:17:13

 66ADC7A18AEEE79329DD4701BD9E880C.png

 

JavaScript Code复制内容到剪贴板
  1. cnpm install animate.css --save  

 

JavaScript Code复制内容到剪贴板
  1. <template>  
  2.     <div class="top" id="top">  
  3.         <div class="place exam-place" @click="selectType('exam',$store.state.common.publishExercise)"></div>  
  4.         <div class="place wechat-place" @click="selectType('wechat',$store.state.common.publishMicroLesson)"></div>  
  5.         <div class="place survey-place" @click="selectType('survey',$store.state.common.publishQuestionnaire)"></div>  
  6.         <div class="place outline-place" @click="selectType('outline',$store.state.common.publishActivity)"></div>  
  7.         <div class="place live-place" @click="selectType('live',$store.state.common.publishLive)"></div>  
  8.         <div class="place download-place" @click="selectType('download')"></div>  
  9.     </div>  
  10.     <div class="btn-group" id="btn-group">  
  11.         <button @click="publishArticle(publishType,2)">免费发布</button>  
  12.         <button @click="publishArticle(publishType,1)">付费发布</button>  
  13.     </div>  
  14. </template>  
  15.   
  16. <script>  
  17.     import animate from 'animate.css'  
  18.     export default {  
  19.         name: 'publish',  
  20.         data: function() {  
  21.             return {  
  22.                 scaleLock: true,  
  23.                 createNum: 0,  
  24.                 scaleTimes: 1,  
  25.                 clickType: ""  
  26.             }  
  27.         },  
  28.         methods: {  
  29.             selectType(clickType, type) {  
  30.                 this.clickType = clickType;  
  31.   
  32. //              if(clickType != 'download') {  
  33. //                  this.publishType = type;  
  34. //              }  
  35.   
  36.                 if(this.createNum == 0) {  
  37.                     for(var i = 1; i < 5; i++) {  
  38.                         var imgBtn = document.createElement('img');  
  39.                         var topEl = document.getElementById("top");  
  40.                         imgBtn.src = "../static/images/" + clickType + "/" + i + ".png";  
  41.                         this.setStyle(imgBtn, {  
  42.                             width: "100%",  
  43.                             height: "100%",  
  44.                             display: "none",  
  45.                             position: 'absolute',  
  46.                             top: 0,  
  47.                             left: 0,  
  48.                         });  
  49.                         topEl.appendChild(imgBtn);  
  50.                     }  
  51.                     this.createNum = 1;  
  52.                 }  
  53.   
  54.                 //判断放大还是缩小  
  55.                 if(this.scaleLock) {  
  56.                     this.scaleBigEffect();  
  57.                     this.scaleLock = false;  
  58.                 } else {  
  59.                     this.scaleSmallEffect();  
  60.                     this.scaleLock = true;  
  61.                 }  
  62.             },  
  63.         },  
  64.     }  
  65. </script>  
  66.   
  67. <style>  
  68.   
  69. </style>  
资源图片.zip
文件类型: .zip e12b77c112d02d38d945d618b0738e48.zip (404.26 KB)

本文来自于：http://www.yoyo88.cn/study/vue/262.html

上一篇 vue引入微信jssdk / SDK
下一篇 vue判断路由中的name给高亮显示/菜单高亮
相关的文章
Powered by yoyo苏ICP备15045725号