运动框架（js）—上下滑动的侧边栏

最新推荐文章于 2022-09-28 14:35:34 发布
最新推荐文章于 2022-09-28 14:35:34 发布
阅读量577 收藏 1
点赞数
分类专栏： javascript实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang295242361/article/details/78547302
版权




css：

#div{
    width:100px;
    height:200px;
    background: goldenrod;
    position: absolute;
    right:0;
}
 #div span{
     width: 25px;
     height: 70px;
     position: absolute;
     right:100px;
     top:65px;
     background: rebeccapurple;
     color:#fff;
 }
html: 

<body style="height: 2000px;">
<div id="div">
    <span>分享到</span>
</div>
<body/>
js:
 

window.onscroll=function () {
    var oDiv=document.getElementById("div");
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var client=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
 

    var t=scrollTop+client;
    startMove(parseInt(t))}//运动框架    var timer=null;//timer写在函数外    function startMove(itarget) {        var oDiv=document.getElementById("div");        clearInterval(timer);        timer=setInterval(function () {            var iSpeed=(itarget-oDiv.offsetTop)/8;            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed)            if(oDiv.offsetTop==itarget){                clearInterval(timer)            }else{                oDiv.style.top=oDiv.offsetTop+iSpeed+"px";            }        },30)    }
 

 


                

        

        

    




    

      

        

            

              
                
                  yang295242361
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
JavaScript实现上下滑动的侧边栏

				
			

			

				

					Sibmle
				

				

					07-03
					
					1243
					
				

			

		

		

			
				
这个是在很多网站中侧边导航栏有的功能，比如那种很招人烦的咨询广告，下面是一个简化版：&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;style&gt;
			body{
				height: 2

			
		

	



                

              
                



	

		

			

				
					
js实现上下滑动侧边栏

				
			

			

				

					weixin_30793643的博客
				

				

					08-21
					
					137
					
				

			

		

		

			
				
给一个原先的电子商务网站做修改，客户说想将原先上下滑动侧边栏改的更加人性化，希望将原先匀速滑动的侧边栏改成变速运动的侧边栏，在到达目的地之前速度越变越慢。
原先一开始的时候，，这个图片是硬生生地到达可视区的中点，看得有点愣愣傻傻的。
原先的代码是这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...

			
		

	



                


  
              

                


	

		

			

				
					
js  上下滑动的侧边栏

				
			

			

				

					weixin_30755393的博客
				

				

					04-06
					
					84
					
				

			

		

		

			
				
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>上下滑动的侧边栏</title>
&lt...

			
		

	





	

		

			

				
					
JS运动框架之分享侧边栏动画

				
			

			

				

					Mikyou的专栏
				

				

					03-02
					
					1118
					
				

			

		

		

			
				
JS运动框架之分享侧边栏动画


	
		
		
		
		*{
			margin:0px;
			padding:0px;
		}
			#div1{
				width:319px;
				height: 340px;
				border: 1px solid #FFF;
				position: absolute;
				top:100px;
				left:-320px;

			
		

	



		

			
		



	

		

			

				
					
上下滑弹框（仿高德）

				
			

			

				

					Zt0118的博客
				

				

					08-16
					
					1178
					
				

			

		

		

			
				
上下滑弹框（仿高德）

			
		

	





	

		

			

				
					
Bootstrap3隐藏滑动侧边栏菜单代码

				
			

			

				

					06-24
				

			

		

		

			
				
最后，别忘了引入Bootstrap的CSS和jQuery库，因为滑动侧边栏的实现依赖于jQuery的事件处理和Bootstrap的JavaScript插件。在HTML头部添加以下链接：  ```html <!-- Add this before your custom CSS -->  ...

			
		

	





	

		

			

				
					
jQuery侧边栏菜单滑动展开代码

				
			

			

				

					06-24
				

			

		

		

			
				
本示例中的"jQuery侧边栏菜单滑动展开代码"是利用jQuery库和Bootstrap框架来创建的一种动态交互效果，使用户可以轻松地展开和收起左侧菜单。以下是对这个主题的详细说明：  首先，jQuery是一个轻量级、高性能的...

			
		

	





	

		

			

				
					
jQuery滑动侧边栏实现多级菜单插件jSide.zip

				
			

			

				

					11-18
				

			

		

		

			
				
本资源"jQuery滑动侧边栏实现多级菜单插件jSide.zip"提供了使用jQuery创建动态、交互式侧边栏菜单的解决方案。以下是关于这个插件及其使用的一些关键知识点：  1. **jQuery库**: jQuery 是一个轻量级的JavaScript库...

			
		

	





	

		

			

				
					
Bootstrap3隐藏滑动侧边栏菜单代码.zip

				
			

			

				

					07-11
				

			

		

		

			
				
Bootstrap3隐藏滑动侧边栏菜单是Web开发中常见的交互设计元素，特别是在响应式网站设计中，它能够提供良好的移动设备用户体验。这个压缩包文件包含了实现这一功能的代码，主要利用了Bootstrap框架的灵活性和...

			
		

	





	

		

			

				
					
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

				
			

			

				

					10-27
				

			

		

		

			
				
现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果

			
		

	





	

		

			

				
					
手机端点击滑动隐藏侧边栏菜单.zip

				
			

			

				

					05-27
				

			

		

		

			
				
手机端点击滑动隐藏侧边栏菜单基于CSS3制作，4种侧边栏菜单实例。

			
		

	





	

		

			

				
					
上滑滚动禁止_滑入（向下滚动）框

				
			

			

				

					CSS 初学者指南
				

				

					07-09
					
					289
					
				

			

		

		

			
				
我当时在玩新的Nexus 7（我真的想拥有一台真正的Android设备），但我注意到它随附的Google+应用程序中的效果很小。 向下滑动时，新的内容模块会向上滑动到位。 视频最好在这里： 


 我们能做到这一点！ 这是一个非常简单的两步过程： 

 窗口滚动时，检查模块是否可见 
 jQuery有一个：visible选择器，但这不是我们所需要的。 我们需要查看元素的任何部分是否在可视视口内...

			
		

	





	

		

			

				
					
js实现运动的框架实例

				
			

			

				

					weixin_30484247的博客
				

				

					08-20
					
					56
					
				

			

		

		

			
				
html代码：鼠标移入时多物体实现高宽同时变化接着改变透明度
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<link rel="stylesheet" type="text/css" href=...

			
		

	





	

		

			

				
					
这是我见过最牛逼的滑动加载前端框架

				
			

			

				

					来自上海的这位朋友
				

				

					09-28
					
					1万+
					
				

			

		

		

			
				
这是我见过最牛逼的滑动加载前端框架

			
		

	





	

		

			

				
					
css 设置某个区域可以上下滑动滚动

					
热门推荐

				
			

			

				

					u012045045的博客
				

				

					11-05
					
					4万+
					
				

			

		

		

			
				
隐藏滚动：

body {

    overflow: hidden;

}

设置滚动：

#div {

    overflow: auto;

    background: #FFFF00;

    height: 200px;

 

}



			
		

	





	

		

			

				
					
使用js实现左侧或右侧 侧边栏弹框

				
			

			

				

					qq_36627117的博客
				

				

					06-02
					
					2856
					
				

			

		

		

			
				
我们可能经常在网页中的左侧或右侧遇到当鼠标移入到按钮时就出来小弹框，鼠标移出按钮时弹框又缩回去了的功能操作，如下图的功能：

初始只有一个按钮悬浮在页面左侧，

当把鼠标移入”分享到“按钮出来弹框，



移出“分享到”按钮后变为最上面图的样子，具体实现代码如下：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

			
		

	





	

		

			

				
					
原生JS实现分享侧边栏

				
			

			

				

					越陌度阡
				

				

					08-06
					
					1488
					
				

			

		

		

			
				
分享一个用原生JS实现的分享侧边栏，实现效果如下：

以下是代码实现，方便大家复制粘贴。


<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>分享到效果</title>
    <style>
     .........

			
		

	





	

		

			

				
					
侧边菜单导航(JS+CSS)

				
			

			

				

					若水弹丸之地
				

				

					12-10
					
					8809
					
				

			

		

		

			
				
效果展示：（1） （2）  （3）注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入        （2）注意修改引入的css和JS文件的路径HTML&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;SideBar Nav&lt;/title&gt;
	&lt;script type=...

			
		

	





	

		

			

				
					
js实现侧边栏滑动效果

					
最新发布

				
			

			

				

					06-02
				

			

		

		

			
				
实现侧边栏滑动效果的方法有很多，以下是其中一种基于 JavaScript 和 CSS 的方法：

HTML 结构：

```html
<div class="sidebar">
  <!-- 侧边栏内容 -->
</div>

<div class="main-content">
  <!-- 主体内容 -->
</div>

<button class="toggle-btn">Toggle Sidebar</button>
```

CSS 样式：

```css
.sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* 侧边栏初始隐藏 */
  width: 300px;
  height: 100%;
  background-color: #ccc;
  transition: left 0.3s ease-in-out;
}

.main-content {
  margin-left: 0; /* 初始状态主体内容全屏 */
  transition: margin-left 0.3s ease-in-out;
}

.show-sidebar .sidebar {
  left: 0; /* 显示侧边栏 */
}

.show-sidebar .main-content {
  margin-left: 300px; /* 主体内容向右移动 */
}
```

JavaScript 代码：

```javascript
const toggleBtn = document.querySelector('.toggle-btn');
const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');

toggleBtn.addEventListener('click', function() {
  sidebar.classList.toggle('show-sidebar');
  mainContent.classList.toggle('show-sidebar');
});
```

以上代码实现了一个基本的侧边栏滑动效果，点击 `toggle-btn` 按钮可以切换侧边栏的显示与隐藏。可以根据实际需求进行样式和交互的调整。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值