1.创建文件夹

创建文件夹PhotoTest。
并在当前文件夹下创建img包用来存储图片。
把vue.js文件复制到PhotoTest文件夹下。
文件目录如下。

2.图片切片

随便找一张图片在（ps）中打开。
右键选择切片工具。
.左键拉一个框选中整张图片，再点击右键选择划分切片.
勾上水平和垂直划分，并且内容都改为10。
选择jpeg格式，点击左下角储存，选择储存位置。
储存在我们已经建好的img包里，这样我们就得到了这张图片的100张图片了。

3.页面布局

打开HBuilderX创建一个html文件并写好整体结构。
写好主题盒子样式。
写一个自定义组件，并且在template下写好我们要重复使用的模板。
因为我们要把100张切片图片都放进去所以使用v-for循环遍历我们的图片更方便，：obj（v-bind:obj）这个是我们用props设置的自定义属性，其目的是让我们img标签中的 :src 中的值变为一个动态的对像。
在data中写一个imgs数组用来存放我们100张图片的地址。

4.快捷地做出100张图片地址的文本。

你在把图片存到img中后除了第一张图片是JPEG格式其他的都是gif格式，先把第一张图片的格式改为gif格式
现在data中写上第一张的地址。
复制第一个并且打开Excel，随便粘贴一个位置，左键点住单元格右下角向下拉出100个。
点击选择性粘贴中的转至。
把粘贴内容复制到新建的文本文档里，然后替换中间内容。

运行效果

用Vue制作一个图片翻面效果相关推荐

易语言图片插入超级列表框_利用PPT制作一个图片抽奖
上课时,为了参加互动的效果,抽奖是一个很好的方法,即能提高学生的学习兴趣也能活跃课堂气氛. 老师们大多使用的课件都是PPT,而PPT实现这种效果有点难度.百度中有介绍如何使幻灯片切换功能实现名字抽奖的 ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
ppt怎么把图片做成翻书效果_手把手教你做图片翻书效果.ppt
手把手教你做图片翻书效果第六张幻灯片 (第2张翻第3张的动画过程) 第七张幻灯片 (右边超链接到自定义放映中的"第3张翻第4张" , 左边超链接到自定义放映中的"第3张 ...
Unity中用shader graph制作一个简单的传送门效果
Unity中用shader graph制作一个简单的传送门效果一.配置渲染管线 1.通过菜单"Asset" --> "Create" --> &q ...
手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
C#制作一个图片查看器，具有滚轮放大缩小，鼠标拖动，图像像素化，显示颜色RGB信息功能
目录前言一.界面设计二.关键技术 1.把图片拖入到窗体并显示 2.实现图像缩放的功能 3.实现图像的移动效果 4.实时显示当前鼠标处的RGB值 5. 右击功能的实现 6.效果展示总结前言使 ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
JS实现图片翻书效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

用Vue制作一个图片翻面效果

1.创建文件夹

2.图片切片

3.页面布局

4.快捷地做出100张图片地址的文本。

运行效果

用Vue制作一个图片翻面效果相关推荐

最新文章

热门文章