js实现水平和竖直滑动条

最近在做练手项目时候,需要用到滑动条,所以就稍微研究了一下。

首先来看水平滑动条,效果图如下:

js实现水平和竖直滑动条_第1张图片

代码如下:


 
  
  水平滑动条
  
 
 
  

竖直滑动条效果图如下:

js实现水平和竖直滑动条_第2张图片

代码如下:


 
  
  竖直滑动条
  
 
 
  

这里之所以加入移动百分比的展示效果,主要是考虑到后续如果需要对接后台的数据就可以达到动态控制的目的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(js实现水平和竖直滑动条)