整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何把PDF转为EXE翻页电子书?- 云展网

何把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

charts饼状图数据太多

echarts 饼状图内容太多怎么处理

有些时候,我们饼状图中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中获取的,

如何在iconfont中获取图标的svg代码

pageIcons 的值哪些?

第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的显示内容样式的设置

在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\',
		},
	},
},

这样就好看一些了

最终的代码