何把PDF转为EXE翻页电子书?可能有些人都不知道EXE是什么东西,其实EXE电子书是一个可执行文件,阅读方便,分发出去的时候,读者也不需要另外安装任何阅读器,可直接双击预览。不过PDF是不能直接转为EXE文件的,相信很多小伙伴都比较苦恼。
所以,今天就来推荐一款可以在线上传PDF,转换成EXE电子书的网站:云展网,它这个转换的功能是免费的,而下载EXE则需要会员,有兴趣的可以进入网站试试,只需要我们动手上传,转换是非常智能的。另外,它不仅可以把PDF转换为EXE电子书,还可以在线设计制作多媒体电子书,然后导出EXE、PDF、HTMl、嵌入代码都可以,功能对比其他网站还是比较强大的,所以就想着分享给大家,让大家一起来解锁更多好用的功能,这下想要EXE文件的电子书就不用发愁了。
云展网如何把PDF转为EXE翻页电子书呢?
1.首先,当然是需要打开云展网,点击注册登录啦;
2.之后点击开始免费创作,云展网有四种创建方式,我们选择上传文档创建,进入上传界面,我们可看到不仅支持PDF,还有PPT、Word、图片也是支持的;
3.上传之后,稍等片刻进行转换,转换完成后进入编辑界面,可以设置电子书的背景、装订书脊、多媒体设置等
4.我们在后台找到这本电子书,点击下载按钮,选择导出EXE版即可;除了下载EXE,还有PDF、HTMl等格式可供下载。甚至还可以直接在线分享,对方无需接收或下载,在线就可以打开阅读了。
只需要按照上述方法进行操作,就可以解决PDF转为EXE翻页电子的问题啦!如果大家还想要将PDF转换成其他文件,也可以利用云展网这款软件进行转换哦!
如何做一个简单的手机端页面的翻页】
第一步:创建移动端页面内 HTML + CSS 【注】可用弹性布局 但需要注意的是 外层盒子的定位
第二步: 思考问题 要实现怎样的效果?
1. 手指滑动时触发事件【左右】两个方向
2.点击footer部分的下标实现切换效果
3.点击footer部分的下标实现下标颜色变化
第三步;编写JS代码
添加监听事件
document.addEventListener('DOMContentLoaded',function(){
创建一个数组用于调用数组属性值 或者 方便【数值】的更改 【注】可以用数组 /对象 但对象更方便我们的使用
var postion = {
startX:0,
startY:0,
endX:0,
endY:0,
baseMoveX: window.innerHeight / 3,
index:1
}
获取页面元素 比不可少的一个步骤
var tab2 = document.getElementsByClassName('tab2')[0];//获取到ul 思路: 用ul定位来实现页面的切换 (ul的宽度设置成 innerWind * 4)
var li2 = document.getElementsByClassName('li2');//索引值不确定 且不写先
var tab3 = document.querySelector('#tab3');
var li3 = document.querySelectorAll('.li3');
li3[0].style.color = '#58bc58';//设置默认的第一个下标的颜色
//封装一个函数用于清空下标 的颜色
function delite(){
for(var i = 0;i < li3.length; i++){
li3[i].style.color = '';
}
}
手指事件【注】 这里的原理和拖拽一抹一样 (手指按下和 手指移动是 时 必须给给记录 光标位置)
手指移动到位置上时候触发 记录鼠标移动坐标
tab2.addEventListener('touchstart',function(e){
postion.startX = e.touches[0].clientX;
postion.startY = e.touches[0].clientY;
})
手指移动位置胡时候触发 记录鼠标移动坐标
tab2.addEventListener('touchmove',function(en){
postion.endX = en.touches[0].clientX;
postion.endY = en.touches[0].clientY;
move();//当手指滑动时触发函数 改变ul的定位
})
手指移开的时候定位
tab2.addEventListener('touchend',function(vent){
move(true);//手指松开时调用调用函(函数用于判断 :滑动的距离是否超过绝对值 1.超过 (滑动到下一页) 2.不超过 (位置定位在当前页))
})
function move(_end){
var x = postion.startX - postion.endX;
var y = postion.startY - postion.endY;
滑动效果
if(postion.index < li2.length){//第一种情况==========left [用if 判断:索引值是 1-3的时候可以 向左滑动 改变 ul的定位 【注】因为超出会造成用户滑动出现空白页面 ]
if(x > 0){//计算公式: 起点位置 - 终点位置 = x; 如果 x > 0 说明滑动的方向是左边
to left
有些时候,我们饼状图中echarts的数据可能会很多。
这个时候展示肯定会密密麻麻的。导致显示很凌乱
我们需要\'翻页\'类似表格展示下一页的数据
在legend中下需要配置属性 type: \'scroll\',表示滚动
数据太多可以滚动的形式进展示
如下:
legend: {
type: \'scroll\',
}
但是我们发现这个分页箭头不好看。
所以我们需要优化这个分页的箭头
通过官网的描述信息我们配置如下这只
这里设置箭头的路径
var option = {
legend: {
type: \'scroll\', 滚动
orient: \'vertical\', 垂直方向滚动
pageIcons: {
vertical: [
\'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z\',
\'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z\',
],
},
pageButtonPosition: \'end\', // 翻页的位置。\'start\':控制块在左或上,end控制块在右或下。
pageIconColor: \'#29bca8\', // 可以点击的翻页按钮颜色
pageIconInactiveColor: \'#7f7f7f\', // 禁用的按钮颜色
pageIconSize: 14, //这当然就是按钮的大小
}
}
有的小伙伴会好奇
path得值怎么来的,我是从svg中获取的,
第1种:svg的代码,就是我刚刚使用的
第2种:URL为图片链接例如:\'image://http://xxx.xxx.xxx/a/b.png\'
第3种:URL为dataURI 例如:
\'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh
wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7\'
在legend下有一个formatter属性
我们可以通过 formatter 来自定义文字
formatter: function(name) {
let showNum
let percentage
for (var i = 0; i < listSummary.length; i++) {
if (listSummary[i].name == name) {
showNum = listSummary[i].value
if (lejibaoxiuTotals) { //lejibaoxiuTotals可能为0
// 计算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + \'%\'
} else {
percentage = \'\'
}
}
}
return `{name| ${ name.length > 5 ? name.slice(0, 5) + \'...\' : name}}
| {val| ${percentage}} {numNum| ${showNum}}`
},
通过富文本来控制样式
textStyle: {
fontSize: 13, //字体的大小
color: \'#D9D9D9\',
rich: {
//设置name属性的样式(显示的:华为x),这里与 return中的name保持一致
name: {
color: \'#595959\',
width: 77, //宽度
padding: [0, 0, 0, 0], //间距表示 上右下左
},
//设置val(百分比)属性的样式,这里与 return中的val保持一致
val: {
width: 50,//宽度
color: \'#8c8c8c\', 、
padding: [0, 10, 0, 6], //间距表示 上右下左
},
//设置numNum(数量)属性的样式,这里与 return中的numNum保持一致
numNum: {
color: \'#8c8c8c\',
},
},
},
这样就好看一些了
*请认真填写需求信息,我们会在24小时内与您取得联系。