3-D Stereodynamic Effect of Reversal when Date and Time Change
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>test data</div></li>
<li><span class="ico-des-dot">•</span><div>test data</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>test data</div></li>
<li><span class="ico-des-dot">•</span><div>test data</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>test data</div></li>
<li><span class="ico-des-dot">•</span><div>test data</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>test data</div></li>
<li><span class="ico-des-dot">•</span><div>test data</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>test data</div></li>
<li><span class="ico-des-dot">•</span><div>test data</div></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
//Custom scrollbar style (horizontal scrollbar) .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; } //Father Box #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:
//First Introduction Pack
<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. First, the instantiation of iscroll
var myScroll = new IScroll('#id');
2. Adding parameters
v5 default horizontal scroll disabled, vertical default enabled
Parameters:
- scrollX: true opens horizontal scroll
- scrollY: false closes vertical scroll
- The initial x position of the start X:0 scroll
- The initial y position of the start Y:0 scroll
- mouseWheel:true turn on mouse wheel support
- Scrollbars:'custom'opens scrollbar support (displays scrollbars)
- fadeScrollbars:true opens scrollbar fade-in and fade-out mode
- Interactive Scrollbars: true allows scrollbars to drag
- InterWheel Direction: true opens the reverse direction of the roll (i.e., the rollers go down and the rollers go up)
- Tap: "myEvent" opens tap events in the scrolling area (event name is "myEvent")
- resizeScrollbars:false scrollbar fixed size (default value is true, you can determine the size of the scrollbar according to the container)
- ShrinkScrollbars: Scale valid values are:'clip'and'scale'.
- 'clip'is to move the indicator to the outside of its container. The effect is that the scroll bar shrinks and simply moves out of the screen. Property setting to this value greatly improves the performance of the entire iScroll.
- The value'scale'closes the attribute useTransition, after which all animation effects will be implemented using the request Animation Frame. Indicators actually come in all sizes, and ultimately work best.
- Default: false notices that resizing is not performed on the GPU, so'scale'is performed on the CPU. If your application will run on multiple devices, I recommend that you use the option'scale'or set'clip' to false (for example,'clip'on older devices and'scale' on desktop browsers).
- Rolling Programming Interface
- Scroll To (x, y, time, easing) (scroll to any position)
- For an iScroll instance called myScroll, you can scroll down to any location by following: myScroll. scroll To (0, - 100); scroll down 100 pixels by the above way. Remember: 0 is always the top left corner. To scroll you have to pass negative numbers. time and easing are optional. They control the scroll cycle (millisecond level) and the erase effect of the animation. The erase function is an effective IScroll.utils.ease object. For example, to apply a one-second classic erase animation, you should do this:
- myScroll.scrollTo(0,-100,1000,IScroll.utils.ease.elastic);
- The type options for erasing animation are quadratic,circular,back,bounce,elastic.
- Scroll By (x, y, time, easing) (scroll anywhere from the current position)
- Similar to the previous method, you can pass the values of X and Y to scroll from the current position. myScroll.scrollBy(0,-10); the above statement scrolls down 10 pixels at the current position. If your current position is - 100, then the position after the scroll is - 110.
- Scroll ToElement (el, time, offsetX, offsetY, easing) (scroll to the top left corner of an element)
- This is a very useful method, you will like it. There is only one mandatory parameter in this method, which is el. Pass an element or a selector, iScroll
- Scroll to the top left corner of the element. time is optional to set the animation cycle. offsetX and offsetY define pixel-level offsets, so you can scroll to elements and add special offsets. But that's not all. If you set these two parameters to true, the element will be in the middle of the screen. Refer to the example and scroll to the element example. The easing parameter is the same as in the scrollTo method.
- Scroll To (x, y, time, easing) (scroll to any position)
- Alignment (iScroll aligns to fixed positions and elements).
- Options.snap (aligned with a subelement)
- var myScroll=newIScroll(' wrapper', {snap:true}); this will automatically split the scroll bar according to the size of the page container. The snap attribute can also pass the value of the character type type. This value is the selector of the elements to which the scrollbar will be aligned. For example, the following:
- var myScroll=newIScroll(' wrapper', {snap:'li'}); in this example, the scroll bar will be aligned to each element of the LI tag.
- goToPage(x,y,time,easing) (scroll to the specified page)
- x and y present the number of pages you want to scroll to the horizontal or vertical axis. If you need to use scrollbars alone, you just need to pass 0 values for the axis you don't need. The time attribute is the animation cycle, and the easing attribute is the erase function type used to scroll to the specified point. Refer to option.bounceEasing in Advanced Functions. Both attributes are optional. myScroll.goToPage(10,0,1000); this example will scroll horizontally to page 10 in a second.
- next() (next page)
- prev() (previous page) scrolls to the next or previous page of the current location
- Options.snap (aligned with a subelement)
If the default event cannot be triggered in some places in the scrolling area, it is basically because IScroll disables the default event of form elements in the scrolling area, that is, e.preventDefault() (for smooth scrolling), you can make a judgment in the source code according to the need, such as if you want to retain the default event of label A, You can judge the tagName of the clicked element and then decide whether to use e.preventDefault().