用Vue制作图片翻面效果
1.创建文件夹PhotoTest。
2.并在当前文件夹下创建img包用来存储图片。
3.把vue.js文件复制到PhotoTest文件夹下
4.图片切片
（1）图片在photoshop（ps）中打开。
（2）右键选择切片工具。
（3）左键拉一个框选中整张图片，再点击右键选择划分切片。
（4）勾上水平和垂直划分，并且内容都改为10
（5）存储为web格式，选择JPEG格式
（6）选择新建文件夹得到100张图片
5.页面布局
（1）.打开HBuilder创建一个HTML文件并写好整体结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoTest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="all">
<div class="content">
</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#all",
data(){
return{
}
}
})
</script>
（2） 写好主体盒子样式
<style>
body{background-color: aquamarine;}
.content{
margin: 80px auto;
width: 870px;
height: 550px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img{
width: 86px;
height: 54px;
}
.a{
margin: 0;
padding: 0;
width: 86px;
height: 54px;
background-color: lightcoral;
}
</style>
（3）写一个自定义组件（component），并且在template下写好我们要重复使用的模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoTest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="all">
<div class="content">
</div>
</div>
</body>
<template id="tem">
<div class="a" @click="change">
<img :src="obj" v-show="show">
</div>
</template>
<script>
Vue.component("img-test",
{
props:["obj"],
template:"#tem",
data:function(){
return{
show:false
}
},
methods:{
change:function(){
this.show = !this.show;
}
}
})
var vm = new Vue({
el:"#all",
data(){
return{
}
}
})
</script>
</html>
（4）.因为我们要把100张切片图片都放进去所以使用v-for循环遍历我们的图片更方便，：obj（v-bind:obj）这个是我们用props设置的自定义属性，其目的是让我们img标签中的 :src 中的值变为一个动态的对像。
<body>
<div id="all">
<div class="content">
<img-test v-for="a in imgs" :obj="a"></img-test>
</div>
</div>
</body>
（5） .在data中写一个imgs数组用来存放我们100张图片的地址
var vm = new Vue({
el:"#all",
data(){
return{
imgs:["
img/images/1-2104200936259_01.jpg","img/images/1-2104200936259_02.jpg","img/images/1-2104200936259_03.jpg","img/images/1-2104200936259_04.jpg","img/images/1-2104200936259_05.jpg","img/images/1-2104200936259_06.jpg","img/images/1-2104200936259_07.jpg","img/images/1-2104200936259_08.jpg","img/images/1-2104200936259_09.jpg","img/images/1-2104200936259_10.jpg","img/images/1-2104200936259_11.jpg","img/images/1-2104200936259_12.jpg","img/images/1-2104200936259_13.jpg","img/images/1-2104200936259_14.jpg","img/images/1-2104200936259_15.jpg","img/images/1-2104200936259_16.jpg","img/images/1-2104200936259_17.jpg","img/images/1-2104200936259_18.jpg","img/images/1-2104200936259_19.jpg","img/images/1-2104200936259_20.jpg","img/images/1-2104200936259_21.jpg","img/images/1-2104200936259_22.jpg","img/images/1-2104200936259_23.jpg","img/images/1-2104200936259_24.jpg","img/images/1-2104200936259_25.jpg","img/images/1-2104200936259_26.jpg","img/images/1-2104200936259_27.jpg","img/images/1-2104200936259_28.jpg","img/images/1-2104200936259_29.jpg","img/images/1-2104200936259_30.jpg","img/images/1-2104200936259_31.jpg","img/images/1-2104200936259_32.jpg","img/images/1-2104200936259_33.jpg","img/images/1-2104200936259_34.jpg","img/images/1-2104200936259_35.jpg","img/images/1-2104200936259_36.jpg","img/images/1-2104200936259_37.jpg","img/images/1-2104200936259_38.jpg","img/images/1-2104200936259_39.jpg","img/images/1-2104200936259_40.jpg","img/images/1-2104200936259_41.jpg","img/images/1-2104200936259_42.jpg","img/images/1-2104200936259_43.jpg","img/images/1-2104200936259_44.jpg","img/images/1-2104200936259_45.jpg","img/images/1-2104200936259_46.jpg","img/images/1-2104200936259_47.jpg","img/images/1-2104200936259_48.jpg","img/images/1-2104200936259_49.jpg","img/images/1-2104200936259_50.jpg","img/images/1-2104200936259_51.jpg","img/images/1-2104200936259_52.jpg","img/images/1-2104200936259_53.jpg","img/images/1-2104200936259_54.jpg","img/images/1-2104200936259_55.jpg","img/images/1-2104200936259_56.jpg","img/images/1-2104200936259_57.jpg","img/images/1-2104200936259_58.jpg","img/images/1-2104200936259_59.jpg","img/images/1-2104200936259_60.jpg","img/images/1-2104200936259_61.jpg","img/images/1-2104200936259_62.jpg","img/images/1-2104200936259_63.jpg","img/images/1-2104200936259_64.jpg","img/images/1-2104200936259_65.jpg","img/images/1-2104200936259_66.jpg","img/images/1-2104200936259_67.jpg","img/images/1-2104200936259_68.jpg","img/images/1-2104200936259_69.jpg","img/images/1-2104200936259_70.jpg","img/images/1-2104200936259_71.jpg","img/images/1-2104200936259_72.jpg","img/images/1-2104200936259_73.jpg","img/images/1-2104200936259_74.jpg","img/images/1-2104200936259_75.jpg","img/images/1-2104200936259_76.jpg","img/images/1-2104200936259_77.jpg","img/images/1-2104200936259_78.jpg","img/images/1-2104200936259_79.jpg","img/images/1-2104200936259_80.jpg","img/images/1-2104200936259_81.jpg","img/images/1-2104200936259_82.jpg","img/images/1-2104200936259_83.jpg","img/images/1-2104200936259_84.jpg","img/images/1-2104200936259_85.jpg","img/images/1-2104200936259_86.jpg","img/images/1-2104200936259_87.jpg","img/images/1-2104200936259_88.jpg","img/images/1-2104200936259_89.jpg","img/images/1-2104200936259_90.jpg","img/images/1-2104200936259_91.jpg","img/images/1-2104200936259_92.jpg","img/images/1-2104200936259_93.jpg","img/images/1-2104200936259_94.jpg","img/images/1-2104200936259_95.jpg","img/images/1-2104200936259_96.jpg","img/images/1-2104200936259_97.jpg","img/images/1-2104200936259_98.jpg","img/images/1-2104200936259_99.jpg","img/images/1-2104200936259_100.jpg"]
}
}
})
（6）运行效果图（每个方框都可以点击隐藏和显示）。
用Vue制作图片翻面效果相关推荐
- Vue制作图片翻面效果
1.创建文件夹PhotoTest. 2.并在当前文件夹下创建img包用来存储图片. 3.把vue.js文件复制到PhotoTest文件夹下 4.图片切片 (1)图片在photoshop(ps)中打开. ...
- unity 制作书本 翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页 不使用插件 自制 实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...
- ppt怎么把图片做成翻书效果_手把手教你做图片翻书效果.ppt
手把手教你做图片翻书效果 第六张幻灯片 (第2张翻第3张的动画过程) 第七张幻灯片 (右边超链接到自定义放映中的"第3张翻第4张" , 左边超链接到自定义放映中的"第3张 ...
- JS实现图片翻书效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
- PPT模板如何制作图片镜面动画效果？
PPT模板 如何制作图片镜面动画效果?动画效果在ppt模板设计过程中,能给模板增色不少,今天ppt家园来介绍一ppt模板镜面动画效果的操作方法. 模板入口:https://www.pptjia.com ...
- html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...
- dw如何制作图片自动切换效果_dw怎么用css做图片轮播
Adobe Dreamweaver,简称"DW",中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购.DW是集网 ...
- 使用transform制作书本翻页效果
transform transform属于CSS属性 Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 在网页中需要制作一些有立体感的3d效果,比如书本 ...
最新文章
- 阿里离职员工吐槽加班太疯狂，所有的高薪都是加班加出来的！被榨干到一丝精力都不剩！婚姻不保！...
- unity shader入门精要_shader入门数学基础矩阵篇
- 机器学习入门系列一（关键词：单变量线性回归，梯度下降法）
- 电子书下载：The C# Programming Language, 4th Edition
- unity的vr场景怎么做_如何用Unity快速创建一个VR体验
- 《Windows Server 2012 Hyper-V虚拟化管理实践》——3.2 Hyper-V主机日常管理
- 【mysq 5.7.31】远程访问权限（允许远程连接）
- Jsoup代码解读之五-parser(中)
- mongodb,spring data api常用总结
- Bailian2914 计算概论习题－动态存储【排序】
- 最近纠结致死的一个java报错java.net.SocketException: Connection reset 终于得到解决
- Security+ 学习笔记49 事件调查
- linux安装中文输入法sc,Ubuntu 设置中文输入法
- WPF中自定义MarkupExtension
- i春秋 死亡ping命令 原理学习（命令执行+shell反弹）+复现
- 雷霄骅《基于 FFmpeg + SDL 的视频播放器的制作》源码在VS2017中编译的兼容性问题
- ubuntu查看 固态硬盘位置_在Ubuntu（Linux）中启用固态硬盘（固态硬盘）TRIM | MOS86...
- 《Redis设计与实现 黄建宏 著》阅读笔记目录（持续更新）
- 智能家居系统模型设计2.0
- 微软十五道面试题 答案
热门文章
- Iphone8 plus Fiddler 抓包App Https 请求时的坑
- bmob php支付,GitHub - bmob/bmob-php-sdk: PHP SDK相关源码
- 优酷android 离线 导出来,手机优酷缓存的视频如何导出 缓存视频导出到电脑方法...
- Linux rm -rf 之rm: cannot remove `linux': Device or resource busy
- 一只兔子每三个月生兔子JAVA,兔子生兔子问题
- 盘点2018年化工行业大事故！回顾那些令人心痛的瞬间......
- php 中文 验证码,php 验证码 支持中文验证码
- 贴片电阻的封装和功率关系
- 大数据常用的开发工具
- Stream流的学习