客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：xiaojue/EasySlide开源软件地址(OpenSource Url)：https://github.com/xiaojue/EasySlide开源编程语言(OpenSource Language)：HTML 55.4%开源软件介绍(OpenSource Introduction)：EasySlideEasy to build a mobile page slide. 介绍EasySlide 不基于任何框架。它是一个可以快速、独立的制作H5 Mobile页面的微框架。 它包含 使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可，它还内置一些utils和动画效果，你也可以使用监听器和自己编写CSS类来扩展EasySlide. EasySlide独立分为4个js文件，如果你只需要基本功能，则只引用dist/EasySlide.js即可。 Demo
快速上手首先需要引用对应的css和javascript，和要求的HTML结构，本框架只支持移动端，更多API见参考文档。 <html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link href="reset.css" rel="stylesheet"> <!-- 或者你自己的reste css -->
<link href="../dist/EasySlide.css" rel="stylesheet"> <!-- EasySlide所依赖的css -->
<script src="../dist/EasySlide.js"></script> <!-- EasySlide所依赖的js -->
<script src="../dist/loader.js"></script>
<script src="../dist/ppt.js"></script>
<script src="../dist/effects.js"></script>
</head>
<body>
<div class="EasySlide-warp" id="j_wrap">
<div index="0" class="EasySlide-slides"> <!-- 一个page的容器 -->
<div gindex="0" class="EasySlide-groups"> <!-- 一个page可以分成多个group来展示 -->
<div id="j_ppt"></div> <!-- ppt幻灯钩子 -->
</div>
</div>
<div index="1" class="Easyslide-slides">
<div gindex="0" class="EasySlide-groups">
<h1 class="EasySlide-animate" in="zoomIn" duration="1s" delay=".5s">Title</h1> <!-- 每个groups里的元素都可以通过EasySlide-animte来标记，在dom节点上直接做动画操作 -->
</div>
</div>
</div>
<script>
var Slide = new EasySlide({
replay:true, //每页动画都重新播放
subpptObjects:[{
wrapDiv:"j_ppt", //ppt类容器钩子
img:["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"], //ppt展示的图片，最少4张
parentNum:0 //所属slides的index
}],
wrapAll:"j_wrap" //整个slides的父容器
});
Slide.on("progress",function(percent){
console.log(percent); //loading的百分比，可以自己定义loading层和动画
});
Slide.on("loaded",function(){
//load资源结束，隐藏loading层，展示slide
});
//load对应图片资源
Slide.loader(["images/1.jpg","images/2.jpg","..."]);
</script>
</body>
</html>APIEasySlide方法loadernew EasySlide({
}).loader(["img1.jpg","img2.jpg"]);
//调用loader方法可以实现预加载图片资源，并可以监听到loaded和progress两个事件gotovar Slide = new EasySlide({});
Slide.goto(3);
//页面跳转到对应的slide indexmovevar Slide = new EasySlide({});
Slide.move(1) //-1 参数为1或者-1
//移动当前页面至前后一页renderSlide动态修改过容器之后，可以调用此方法重新计算容器动画和元素个数。showCurSlide可以调用此方法执行当前页切换动画getCurAllowSwipe获取当前slide的可滑动状态事件progressloaded//loader只后，使用on方法可以监听到progress事件，回调第一个参数为百分比
var Slide = new EasySlide({});
Slide.on("progress",function(pre){
//xx.xx %
});
Slide.on("loaded",function(){
//load资源结束
});
Slide.loader(["1.jpg","2.jpg"]);swipeYswipeXswipeMoveswipeEndvar Slide = new EasySlide({});
Slide.on("swipeX",function(direction){
//direction为 1或者-1 代表方向
});
Slide.on("swipeY",function(direction){
//direction为 1或者-1 代表方向
});
Slide.on("swipeMove",function(){
//可以自己扩展移动时的动画，在demo中有体现用法
});
Slide.on("swipeEnd",function(){
//在touchend时触发
});dragDirecNotEqual在滑动方向与默认方向相反时，touchEnd触发slide-switchEndppt-switchEndvar Slide = new EasySlide({});
Slide.on("slide-switchEnd",function(allowSwipe){
//slide翻页结束后触发，回调返回该页是否可被继续swipe，allowSwipe可能为next或者prev
});
Slide.on("ppt-switchEnd",function(direction){
//幻灯翻页结束后触发
});初始化参数配置wrapAll//必填，所有slides的父节点idSubpptObjectsSubpptObjects:[{
wrapDiv:"", //ppt节点id
imgs:["1.jpg","2.jpg"], //ppt幻灯图片
parentNum:0 //所在父节点的index值
}]replay//布尔值，默认为false，表示动画结束后，再次翻到此页，是否重播动画，对所有slide生效。firstTime第一屏第一轮是否可以回滚设置，默认为true，不可以animateEffectswipeDirectionslide滑动方向，默认为 "y"margin选填默认0，制作多个slide共存在view中可用transitionanimate参数配置indelaydurationtfunctioniterationslide参数配置indexgindexlayeridscrollgotoallowswipeEasySlide.STATICEasySlide.STATIC.flayerClsEasySlide.STATIC.flayerTriggerClsEasySlide.STATIC.animateClsEasySlide.STATIC.groupCls |
