image.png
接着上篇文章继续介绍以下内容：
上篇文章把每页最基本需要用到的图标和箭头提示都设置好后，往后继续其他步骤：
（1）设置 静态元素—图片
html
css
css
(2)设置各元素动画
提示：
1)前提需要加上.swiper-slide-active,因为这样才能激活上下切换动画不停，如果不设置，就第一次往下切换可以激活动画，可是第二次往上或往下切换动画都失效了
2)在设置动画前，需要把静态元素隐藏起来
css
html
css
(3)介绍静态元素布局和激活动画设置，往后进一步详细介绍下动画animate：
1)设置动画一般用css3里面的animation（前缀有-webkit,-moz等），一般移动端写上animation和-webkit-animation就好了
2)设置animation，首先写上设置的动画名称，动画延迟时间，动画距离上个元素动画的开始时间，动画的状态（匀速，快速等等），动画次数（有循环infinite或者一次forwards）
提示：元素可以设置一次动画，也可以同时设置几种动画
css
一般设置元素动画，大部分会用到animate.css这框架里面设置好的动画
animate样式框架
温馨提示：本人平时用到的框架里面常用的动画有：（bounceInRight（向右弹跳出来）/zoomInLeft（向左出现）/love（跳动出现）/arr2（上下摇动）/rotate360（360度旋转）/tada（左右缓慢挪动）/bounceInDown（向上弹跳出现）/bounceInUp（向下弹跳出现）/smallbig（由远到近出现）/fadeIn（淡入）/fadeOut（淡出）等等）
可是用此框架只能满足一小部分动画，有些元素设置的动画无法满足，需要自己自定义动画；
以下是我自定义设置过的动画有：（只列部分的）
1)汽车缓慢开出来动画效果
汽车
效果图：
效果图
2）人物带着滑板划过：
人物
效果图
效果图
3）气球由近到远
ball
效果图
效果图
3）线条裁剪出现
线条
效果图
效果图
4）仿手机开锁效果：
效果图
html
需要注意移动端和pc端设置拖拽区别：
移动端：http://blog.csdn.net/u010242159/article/details/52369347
pc端：http://blog.csdn.net/baidu_25343343/article/details/53215193
//getOffsetSum 获取相对与document的偏移量
function getOffsetSum(ele){
var top= 0,left=0;
while(ele){
// top+=ele.offsetTop;
left+=ele.offsetLeft;
ele=ele.offsetParent;
}
/* alert(left+" : "+top);*/
return { top:top, left:left }
}
var maindiv=document.getElementById("btn");
var a=document.getElementById("a");
var website=document.getElementById("website");
maindiv.addEventListener("touchmove",touch,false);
function touch(e)
{
switch(e.type)
{
case "touchmove":
var ele=getOffsetSum(e.target);
var left=ele.left;
// var top=ele.top;
var x=e.touches[0].clientX-left/2;
// var y=e.touches[0].clientY-top/2;
e.preventDefault();
e.target.style.marginLeft=x+"px";
// console.log(x);
var progress=$('.page1_progress2').width()-60;
console.log(progress);
if(x>=progress){
// e.target.style.backgroundColor='yellow';
e.target.style.marginLeft=x+"px";
e.preventDefault();
swiper.slideTo(1); //拖到底部自动跳转到下一页
}
else if(x<=0){ // left=ele.left;
e.target.style.marginLeft=10+"px";
}
else{
// e.target.style.backgroundColor='green';
}
}
}
(4)补充其他会在宣传页面使用到的细节：
1）除了可以垂直切换，同时也可以设置水平切换，甚至是在垂直切换的页面中嵌入水平切换：
效果图
html
js
2)slideTo()跳转到下一页或者指定页面
效果图
js
3)点击弹窗出现
效果图
效果图
html
js
5）使用overflow-y:scroll;，当滚动内容时，上下滑动就禁止，可是不滚动就可以滑动
html
js
6)loading加载页
效果图
html
js
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
网友评论