1
Q
先进的滑块定制
A
回答
1
(function($) {
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 6000, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
html,
body
{
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
overflow-x: hidden;
background: url('../images/bg.jpg') repeat top left;
}
h1
{
font-size: 20px;
font-weight: normal;
color: #2e6e80;
}
/**
* important: keep position fixed, you can however use top:0 instead of bottom:0
* if you want to make it stick to the top of the browser
*/
.scroll
{
position: fixed;
bottom: 0;
left: 0;
}
/**
* z-index ordering of the different layers, do this for your layers,
* also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
*/
.horizon
{
z-index: 1;
width: 3000px;
}
.middle
{
z-index: 500;
width: 4000px;
}
.front
{
z-index: 1000;
width: 6000px;
}
<h1>jInvertScroll Example</h1>
<div class="horizon scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/horizon.png" alt="" />
</div>
<div class="middle scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/middle.png" alt="" />
</div>
<div class="front scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/front.png" alt="" />
</div>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.min.js"></script>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
相关问题
- 1. 控制MediaController进度滑块
- 2. 定制jQuery UI的滑块
- 3. 如何定制滑块?
- 4. 定制nivo滑块jQuery
- 5. 将滑块输入绑定到十进制值的AngularJS问题
- 6. 使用进度条制作滑块
- 7. 滑块值,int到二进制转换
- 8. 如何制作顺序步进滑块?
- 9. 制作Div滑块
- 10. Jssor滑块嵌入在WordPress - 定制化
- 11. 定制后滑块不工作XAML
- 12. 负AngularJS滑块与定制规模
- 13. 垂直滑块需要更多定制
- 14. Zurb基金会轨道滑块定制
- 15. WPF定制滑块drawed自己
- 16. 有限制的jQuery滑块
- 17. jQuery滑块的拖动控制柄/滑块上的值
- 18. 自定义滑块
- 19. 在引导布局定制光滑滑块
- 20. 滑块内的滑动滑块
- 21. 带滑动滑块的Jquery滑块
- 22. CSS需要为滑块后面的jquery滑块制作标签
- 23. 限制jQuery的滑块到另一个滑块
- 24. 混合滑块控制
- 25. 范围滑块控制
- 26. Jquery滑块控制音量
- 27. 具有十进制支持的jQuery UI滑块
- 28. 优先滑轨滑行
- 29. 自定义全宽度滑动滑块
- 30. 滑动滑块自定义点