日期时间变化时出现翻转的3D立体动效
HTML
<body onload="loaded()">
<div id="wrapper">
<div id="scroller">
<div class="scroll-box">
<ul class="row mt-170">
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2017.Q3</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
</ul>
</div>
</div>
</li>
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2017.Q3</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
</ul>
</div>
</div>
</li>
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2017 Q4</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
</ul>
</div>
</div>
</li>
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2018 Q1</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
</ul>
</div>
</div>
</li>
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2018 Q2</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>API & SDK Dev</div></li>
<li><span class="ico-des-dot">•</span><div>Security Auditing</div></li>
<li><span class="ico-des-dot">•</span><div>Testing</div></li>
</ul>
</div>
</div>
</li>
<li class="col-xs-12 ico-develop-list">
<div class="develop-box">
<div class="dev-date">2018 Q3</div>
<div class="dev-des">
<ul>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
<li><span class="ico-des-dot">•</span><div>测试数据</div></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
//自定义滚动条样式（水平滚动条）
.iScrollHorizontalScrollbar {
position: absolute;
z-index: 9999;
height: 24px;
width: 300px;
left: 50%;
-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);
bottom: 0;
overflow: visible!important;
}
.iScrollHorizontalScrollbar:before{
content: "";
position: absolute;
top: 11px;
left: 0;
height: 0;
width: 100%;
border-top: 2px solid #c8d2d7;
}
.iScrollHorizontalScrollbar .iScrollIndicator {
position: absolute;
width: 64px!important;
height: 24px!important;
background:url(../images/icon/slide_btn@2x.png) no-repeat top left/cover;
}
//父盒子
#wrapper {
position: absolute;
z-index: 1;
top: 328px;
bottom: 80px;
left: 0;
right: 0;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.scroll-box>ul {
width: 1800px;
border-top: 4px solid #c8d2d7;
padding-left: 132px;
}
.ico-develop-list {
width: 263px;
position: relative;
border-left: 1px solid #c8d2d7;
min-height: 160px;
}
.ico-develop-list:nth-of-type(2n+1) {
-webkit-transform: translateY(-160px);
-moz-transform: translateY(-160px);
-ms-transform: translateY(-160px);
transform: translateY(-160px);
}
.ico-develop-list:before {
content: '';
position: absolute;
top: -14px;
left: -12px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 8px;
height: 8px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #c8d2d7;
border: 8px solid #f2f5f6;
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.ico-develop-list:nth-of-type(2n+1):before {
top: auto;
bottom: -14px;
}
.develop-box {
position: absolute;
padding-left: 16px;
bottom: 0;
}
.ico-develop-list:nth-of-type(2n+1) .develop-box {
top: 0;
bottom: auto;
}
ul{
list-style:none;
}
JS:
//先引包
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript” src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js">
<script>
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: false,mouseWheel:true,scrollbars: 'custom', interactiveScrollbars: true });
}
</script>
1、 首先是iscroll的实例化方式
var myScroll = new IScroll('#id');
2、添加参数
v5默认水平滚动禁用掉，竖直默认启用
参数：
- scrollX: true 开启水平方向滚动
- scrollY: false 关闭竖直方向滚动
- startX：0 滚动的初始x位置
- startY：0 滚动的初始y位置
- mouseWheel:true 开启鼠标滚轮支持
- scrollbars: ‘custom’ 开启滚动条支持（显示滚动条）
- fadeScrollbars:true 开启滚动条淡入淡出方式
- interactiveScrollbars: true 让滚动条能够拖动
- interWheelDirection：true 开启反转滚动的方向（即滚轮向下，滚动条向上）
- tap :”myEvent” 在滚动区域开启tap事件（事件的名称为“myEvent”）
- resizeScrollbars:false 滚动条固定大小（默认值为true，可以根据容器决定滚动条的大小）
- shrinkScrollbars : scale 有效的值为：‘clip’和’scale’。
- ‘clip’是移动指示器到它容器的外面，效果就是滚动条收缩起来，简单的移动 到屏幕以外的区域。属性设置为此值后将大大的提升整个iScroll的性能。
- 值’scale’关闭属性useTransition，之后所有的动画效果将使用requestAnimationFrame实现。指示器实际上有各种尺寸，并且最终的效果最好。
- 默认值：false注意改变大小不是在GPU上执行的，所以’scale’是在CPU上执行。如果你的应用程序将在多种设备上运行，我建议你使用选项’scale’，或者设置 ‘clip’为false(例如：在较老的设备上应该设置为’clip’，而在桌面浏览器上应设置为’scale’)。
- 滚动的编程接口
- scrollTo(x,y,time,easing)（滚动到任意的位置）
- 对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：myScroll.scrollTo(0,-100);通过上面的方式将向下滚动100个像素。记住：0永远是左上角。需要滚动你必须传递负数。 time和easing是可选项。他们控制滚动周期（毫秒级别）和动画的擦除效果。 擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：
- myScroll.scrollTo(0,-100,1000,IScroll.utils.ease.elastic);
- 擦除动画的类型选项有：quadratic,circular,back,bounce,elastic。
- scrollBy(x,y,time,easing)（从当前位置滚动任意位置）
- 和上面一个方法类似，但是可以传递X和Y的值从当前位置进行滚动。 myScroll.scrollBy(0,-10);上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100，那么滚动结束后位置为-110.
- scrollToElement(el,time,offsetX,offsetY,easing)（滚动到某个元素的左上角位置）
- 这是一个很有用的方法，你会喜欢它的。 在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll
- 将尝试滚动到这个元素的左上角位置。 time是可选项，用于设置动画周期。 offsetX和offsetY定义像素级的偏移量，所以你可以滚动到元素并且加上特别 的偏移量。但并不仅限于此。如果把这两个参数设置为true，元素将会位于屏幕的中间。请参考例子滚动到元素example。 easing参数和scrollTo方法里的一样。
- scrollTo(x,y,time,easing)（滚动到任意的位置）
- 对齐 （iScroll能对齐到固定的位置和元素。）
- Options.snap（以某个子元素对齐分割）
- var myScroll=newIScroll('#wrapper',{ snap:true}); 这将按照页面容器的大小自动分割滚动条。 snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的 选择器。比如下面：
- var myScroll=newIScroll('#wrapper',{snap:'li'}); 这个示例中滚动条将会对齐到每一个LI标记的元素。
- goToPage(x,y,time,easing)（滚动到指定页）
- x和y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使 用滚动条，只需要为你不需要的轴向传递0值。 time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参 考高级功能中的option.bounceEasing。这两个属性都是可选项。 myScroll.goToPage(10,0,1000); 这个例子将在一秒内沿着横向滚动到第10页。
- next()（下一页）
- prev()（上一页） 滚动到当前位置的下一页或者前一页
- Options.snap（以某个子元素对齐分割）
若遇到在滚动区域中某些地方的默认事件无法触发，基本上是由于IScroll把滚动区域中的表单元素默认事件都禁用掉了，也就是e.preventDefault()（为了滚动顺畅），可根据需要在源码中做个判断，比如你想保留A标签的默认事件，则可以对被点击的元素的tagName进行判断，然后决定要不要e.preventDefault()。
网友评论