简单的javascript/css slider滑动条

最新推荐文章于 2024-05-28 09:53:05 发布
最新推荐文章于 2024-05-28 09:53:05 发布
阅读量231 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wwwggg/archive/2012/10/30/2746901.html
版权 
 
  
 
  

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#bar{
    width:200px;
    height:25px;
    border:1px solid black;
    position:relative;
}

#slider{
    width:0%;
    height:100%;
    background-color:red;
    top:0px;
    left:0px;
    position:absolute;
    cursor:pointer;
}

#info{
    width:200px;
    height:25px;
    border:1px solid black;    
}

</style>

<script type="text/javascript">
var bar, slider;

function init(){

    bar = document.getElementById('bar');
    slider = document.getElementById('slider');
    info = document.getElementById('info');
    bar.addEventListener('mousedown', startSlide, false);    
    bar.addEventListener('mouseup', stopSlide, false);
}

function startSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'start' + set_perc + '%';    
    bar.addEventListener('mousemove', moveSlide, false);    
    slider.style.width = (set_perc * 100) + '%';    
}

function moveSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'moving : ' + set_perc + '%';
    slider.style.width = (set_perc * 100) + '%';
}

function stopSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'done : ' + set_perc + '%';
    bar.removeEventListener('mousemove', moveSlide, false);
    slider.style.width = (set_perc * 100) + '%';
}

</script>

</head>
<body onload='init()'>

<div id='bar'>
<div id='slider'>

</div>
</div>
<br />

<div id='info'>info</div>

</body>
</html>
 
 
 

 

转载于:https://www.cnblogs.com/wwwggg/archive/2012/10/30/2746901.html

                

        

        




    




    

      

        

            

              
                
                  初仔仔
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
使用css及简单的js实现酷炫的响应式slider

				
			

			

				

					王浴昊
				

				

					08-09
					
					5006
					
				

			

		

		

			
				
真的是好久都没有写博客了，这几个月一直很忙。这几天暑假在家，闲来无事，从前端到后台写了一个网站，算是新的个人博客吧。本文的demo和下载就挂在上面。今天在这里分享一个十分常见的应用，轮播。我们经常在网站中看到slider，既实用又好看。这里主要用css和少量的jQuery(其实用原生js也很简单)来实现一个响应式的幻灯片slider。这里主要给大家提供一种思路，还有实现中的一些细节处理，具体的功能，

			
		

	



                

              
                



	

		

			

				
					
CSSSlider:一个使用 CSS3 过渡和 jQuery 的简单滑块

				
			

			

				

					07-12
				

			

		

		

			
				
CSS滑块
使用 CSS3 过渡和 jQuery 的简单滑块

			
		

	



                


  
              

                


	

		

			

				
					
开源推荐：纯CSS打造的简洁滑块——CSS Slider

					
最新发布

				
			

			

				

					gitblog_00034的博客
				

				

					05-28
					
					538
					
				

			

		

		

			
				
开源推荐：纯CSS打造的简洁滑块——CSS Slider
项目地址:https://gitcode.com/drygiel/csslider
在追求网站美观与交互体验的今天，一个优雅的图片或内容滑动展示工具是必不可少的。今天，我们向您推荐一款轻量级且全由CSS编写的滑块——CSS Slider。
项目介绍
CSS Slider是一个纯粹使用CSS实现的简单滑块组件。它不需要JavaScript介入...

			
		

	





	

		

			

				
					
纯CSS实现滑动效果（Slide Up & Slide Down）

					
热门推荐

				
			

			

				

					廿四桥明月夜的博客
				

				

					12-12
					
					1万+
					
				

			

		

		

			
				
只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上）

HTML代码
  
        这里是内容
    
    点击看看


CSS代码
 .slider {
     overflow-y: hidden;
     max-height: 500px;
     /* 最大高度 */
     backgroun

			
		

	



		

			
		



	

		

			

				
					
css3 简单slider

				
			

			

				

					牧童
				

				

					01-24
					
					1305
					
				

			

		

		

			
				
[code="html"]



	
	
	

	大屏幕
  	
  		.sliderBox{height:12em;position:relative;overflow: hidden;}
  		.slider{position:absolute;width:100%;height:100%;} 
		.slider li{position:absolute;top:...

			
		

	





	

		

			

				
					
一个强大专业的响应式jQuery幻灯效果插件：Royal Slider

				
			

			

				

					GBin1.com
				

				

					09-10
					
					1086
					
				

			

		

		

			
				
日期：2012-9-9  来源：GBin1.com
你是否在一直寻找一个完全可定制的幻灯效果插件？那么Royal Slider会成为你最好的选择之一。 Royal Slider是一个用于显示HTML格式内容(图像，视频，文本)，并且拥有很多功能的jQuery幻灯插件。这款幻灯插件是可以完全支持自定义的，拥有50多个选项，4种皮肤和PSD格式文件，9款预设的模板(即将推出更多)及其完整的CSS样式

			
		

	





	

		

			

				
					
weex slider实现滑动底部导航功能

				
			

			

				

					08-29
				

			

		

		

			
				
Weex Slider 实现滑动底部导航功能需要使用 Slider 组件、JavaScript 代码和 CSS 样式设置来实现。通过捕获 Slider 的 change 事件、设置当前 tab 的索引和设置 Slider 的样式，可以创建一个流畅、自然的滑动底部...

			
		

	





	

		

			

				
					
css区间范围滑动条

				
			

			

				

					12-05
				

			

		

		

			
				
**CSS 区间范围滑动条详解**  在网页设计中，滑动条是一种常见的交互元素，用户可以通过拖动滑块来选择一个值或设定一个范围。在HTML5中，`<input type="range">` 提供了基本的单值滑动条功能，但区间范围滑动条则...

			
		

	





	

		

			

				
					
用easyui的slider改造的JavaScript时间播放条

				
			

			

				

					08-10
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用EasyUI的slider组件来创建一个自定义的JavaScript时间播放条。EasyUI是一个基于jQuery的轻量级UI框架，它提供了丰富的组件，如表格、对话框、菜单等，用于快速构建用户界面。而...

			
		

	





	

		

			

				
					
第30章 Slider(滑动条)组件1

				
			

			

				

					08-03
				

			

		

		

			
				
EasyUI 的 Slider（滑动条）组件是一种交互式的用户界面元素，常用于用户输入数值或者在预设范围内进行选择。本章将详细讲解 Slider 的加载方式、属性列表、事件列表以及方法列表，帮助你深入理解和应用这个组件。  ...

			
		

	





	

		

			

				
					
Slider(滑动条控件)

				
			

			

				

					04-23
				

			

		

		

			
				
JavaScript文件可能包含处理滑动条事件和更新UI的函数，而CSS文件则负责定义滑动条的视觉样式。  五、跨浏览器兼容性 考虑到不同的浏览器对滑动条的支持程度不一，开发者可能需要使用像Modernizr这样的库来检测...

			
		

	





	

		

			

				
					
jquery 滑动条-Slider

				
			

			

				

					07-26
				

			

		

		

			
				
NULL
博文链接：https://mgm.iteye.com/blog/663083

			
		

	





	

		

			

				
					
cssSlider:最小滑块，动画是由 css 实现的

				
			

			

				

					07-08
				

			

		

		

			
				
css滑块
最小滑块，动画是由 css 实现的。
待办事项
重构
移除 jQuery 依赖
文档
css动画示例

			
		

	





	

		

			

				
					
css3slider:仅使用css3过渡创建简单的水平滑块

				
			

			

				

					05-25
				

			

		

		

			
				
CSS3Slider
 仅使用css3过渡创建简单的水平滑块
为什么要使用它？
 简单的水平滑块是一种众所周知的模式，可以在数千个网站上以各种方式观察到。 有很多框架可以提供各种滑块体验，但是其中大多数都非常肿，并且提供了比我们大多数人所需的功能更多的功能。 这就是CSS3Slider出现的地方。 使用CSS3Slider，您可以创建具有响应能力的简单滑块，并提供简单但美观的滑动动画。
正在安装
当前，只有一种使用NPM来安装CSS3Slider的方法： 
 $ npm install css3slider
如何使用
首先，您需要CSS3Slider： 
 var CSS3Slider = require ( 'css3slider' ) ;
 为了使用CSS3Slider，您需要在脚本中创建一个新CSS3Slider对象： 
 var mySliderObject = new CSS3S

			
		

	





	

		

			

				
					
js Slider拖动条与滑块改变参数值的例子.rar

				
			

			

				

					07-10
				

			

		

		

			
				
js Slider拖动条与滑块改变参数值的例子附完整演示源码，这种效果可以应用在游戏开发中，或者日常一些需要用户设定参数的WEB开发中，比如音量调节、速度调节、时间设定等。通过本示例演示，你可以从中获取使用方法，本实例是使用滑块选取时间区间的例子，操作体验相当不错。

			
		

	





	

		

			

				
					
js实现sliderbar

				
			

			

				

					04-17
				

			

		

		

			
				
js实现的各种类型的sliderbar，横竖向滚动条。

			
		

	





	

		

			

				
					
html 圆圈滑动条,纯CSS3的一款滑动条（Slider）

				
			

			

				

					weixin_31459571的博客
				

				

					06-03
					
					620
					
				

			

		

		

			
				
CSS语言：CSSSCSS确定html {height: 100%;background: #fff;}[class*='-ms-']:before {opacity: 0.15;}input[type='range'] {box-sizing: border-box;overflow: visible;position: absolute;-webkit-appearance: none;top...

			
		

	





	

		

			

				
					
CSS实现简单的Slider

				
			

			

				

					weixin_34126557的博客
				

				

					03-31
					
					203
					
				

			

		

		

			
				
直接代码贴出来吧。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .myDiv {
            width: 500px;
            height: 200...

			
		

	





	

		

			

				
					
js滑动滑动条改变盒子文字大小

				
			

			

				

					06-12
				

			

		

		

			
				
可以使用JavaScript监听滑动条的值改变事件，然后通过修改CSS样式来改变盒子文字大小。具体实现步骤如下：

1. 给滑动条和盒子分别设置id属性，方便后面使用。

```html
<input type="range" id="slider">
<div id="box">Hello, World!</div>
```

2. 编写JavaScript代码，获取滑动条和盒子元素，监听滑动条值改变事件，根据滑动条值修改盒子文字大小。

```javascript
var slider = document.getElementById("slider");
var box = document.getElementById("box");

slider.addEventListener("input", function() {
  var value = slider.value;
  box.style.fontSize = value + "px";
});
```

上述代码中，addEventListener方法用于监听滑动条值改变事件，input事件会在滑动条值发生改变时触发。获取滑动条的值可以使用value属性，根据该值设置盒子的字体大小即可。

3. 编写CSS样式，设置盒子的初始字体大小。

```css
#box {
  font-size: 16px;
}
```

完整代码示例：

```html
<!DOCTYPE html>
<html>
<head>
  <title>Slider Demo</title>
  <style>
    #box {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <input type="range" id="slider">
  <div id="box">Hello, World!</div>
  <script>
    var slider = document.getElementById("slider");
    var box = document.getElementById("box");

    slider.addEventListener("input", function() {
      var value = slider.value;
      box.style.fontSize = value + "px";
    });
  </script>
</body>
</html>
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值